improvement: users can now comment on a case and it's details and have an option to make it visible for clinics too.

frontend/src/app/[locale]/(dashboard)/cases/page.tsx

@@ -3,13 +3,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { MessageSquare } from 'lucide-react';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { formatApiErrorMessage } from '@/components/shared/formatApiError';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { useToast } from '@/lib/hooks/useToast';
-import { canEditCases } from '@/components/shared/permissions';
-import { Badge, type BadgeVariant } from '@/components/ui/shared/Badge';
+import { canEditCases, canEditTasks } from '@/components/shared/permissions';
+import { Badge } from '@/components/ui/shared/Badge';
+import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
+import { labTaskStatusVariant } from '@/components/ui/lab/labTaskStatusDisplay';
 import { casesApi } from '@/lib/api/cases';
+import { tasksApi } from '@/lib/api/tasks';
 import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
 import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
 import { Button } from '@/components/ui/shared/Button';
@@ -30,17 +34,6 @@ import {
 
 const PAGE_SIZE = 20;
 
-function taskStatusVariant(status: LabTaskStatus): BadgeVariant {
-  switch (status) {
-    case 'COMPLETED':
-      return 'success';
-    case 'IN_PROGRESS':
-      return 'default';
-    default:
-      return 'warning';
-  }
-}
-
 function formatPatientName(patient: { firstName: string; lastName: string }) {
   return `${patient.firstName} ${patient.lastName}`.trim();
 }
@@ -105,8 +98,10 @@ export default function CasesPage() {
   const [loadingList, setLoadingList] = useState(false);
   const [loadingDetail, setLoadingDetail] = useState(false);
   const [updatingTaskId, setUpdatingTaskId] = useState<string | null>(null);
+  const [commentCount, setCommentCount] = useState(0);
 
   const canEdit = canEditCases(currentOrganization);
+  const canEditComments = canEditTasks(currentOrganization);
   const locale = user?.language ?? 'en';
 
   const treatmentLabel = useCallback(
@@ -200,12 +195,21 @@ export default function CasesPage() {
   useEffect(() => {
     if (selectedCaseId) {
       void loadDetail(selectedCaseId);
+      void tasksApi
+        .listComments(selectedCaseId)
+        .then((r) => setCommentCount(r.data.length))
+        .catch(() => setCommentCount(0));
     } else {
       setSelectedCase(null);
+      setCommentCount(0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- reload when selection changes
   }, [selectedCaseId]);
 
+  function scrollToComments() {
+    document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
+  }
+
   function clearFilters() {
     setSearch('');
     setClinicId('');
@@ -408,9 +412,17 @@ export default function CasesPage() {
           ) : (
             <div className="space-y-4">
               <header className="space-y-1 border-b border-border pb-3">
-                <h2 className="text-lg font-semibold text-text-primary">
-                  {formatPatientName(selectedCase.patient)}
-                </h2>
+                <div className="flex flex-wrap items-start justify-between gap-2">
+                  <h2 className="text-lg font-semibold text-text-primary">
+                    {formatPatientName(selectedCase.patient)}
+                  </h2>
+                  <Button type="button" variant="outline" size="sm" onClick={scrollToComments}>
+                    <MessageSquare className="h-4 w-4 me-1.5" />
+                    {commentCount > 0
+                      ? t('commentsCount', { count: commentCount })
+                      : t('showComments')}
+                  </Button>
+                </div>
                 <p className="text-sm text-text-muted">
                   {t('patientMobile')}: {selectedCase.patient.mobile}
                 </p>
@@ -432,12 +444,6 @@ export default function CasesPage() {
                     total={selectedCase.taskProgress.total}
                   />
                 </div>
-                {selectedCase.labComment ? (
-                  <p className="text-sm text-text-muted pt-1">
-                    <span className="font-medium text-text-primary">{t('labComment')}:</span>{' '}
-                    {selectedCase.labComment}
-                  </p>
-                ) : null}
               </header>
 
               {selectedCase.details.length > 0 && (
@@ -493,7 +499,7 @@ export default function CasesPage() {
                               <span className="min-w-0 flex-1">
                                 {task.stepOrder}. {task.stepLabel}
                               </span>
-                              <Badge variant={taskStatusVariant(task.status)} fixedWidth={false}>
+                              <Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
                                 {statusOptions.find((opt) => opt.value === task.status)?.label ??
                                   task.status}
                               </Badge>
@@ -530,6 +536,34 @@ export default function CasesPage() {
                   ))
                 )}
               </div>
+
+              {selectedCaseId ? (
+                <section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
+                  <LabCaseCommentsPanel
+                    caseId={selectedCaseId}
+                    canPost={canEditComments}
+                    canToggleVisibility={canEditComments}
+                    loadComments={async () => {
+                      const r = await tasksApi.listComments(selectedCaseId);
+                      setCommentCount(r.data.length);
+                      return r.data;
+                    }}
+                    onPost={async (body, visibleToClinic) => {
+                      const r = await tasksApi.addComment(selectedCaseId, {
+                        body,
+                        visibleToClinic,
+                      });
+                      setCommentCount((n) => n + 1);
+                      return r.data;
+                    }}
+                    onToggleVisibility={async (commentId, visible) => {
+                      const r = await tasksApi.setCommentVisibility(commentId, visible);
+                      return r.data;
+                    }}
+                    onError={toast.showError}
+                  />
+                </section>
+              ) : null}
             </div>
           )}
         </section>