improvement: QRcode and shared link added to cases inorder to make it possible for staff users to share a case info with other staffs or other clinics.

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

@@ -10,6 +10,7 @@ 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 { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
 import { groupTasksForDisplay } from '@/components/lab/taskListGrouping';
 import {
   buildDefaultLocateParams,
@@ -64,6 +65,7 @@ export function TasksPage() {
   const [updatingTaskId, setUpdatingTaskId] = useState<string | null>(null);
   const [exitingTaskIds, setExitingTaskIds] = useState<Set<string>>(() => new Set());
   const [expandedCommentsTaskId, setExpandedCommentsTaskId] = useState<string | null>(null);
+  const [expandedCommentsCaseId, setExpandedCommentsCaseId] = useState<string | null>(null);
 
   const [search, setSearch] = useState(DEFAULT_TASKS_VIEW.search);
   const [clinicId, setClinicId] = useState(DEFAULT_TASKS_VIEW.clinicId);
@@ -255,6 +257,7 @@ export function TasksPage() {
       setSortBy(DEFAULT_TASKS_VIEW.sortBy);
       setSortDir(DEFAULT_TASKS_VIEW.sortDir);
       setExpandedCommentsTaskId(null);
+      setExpandedCommentsCaseId(null);
       setHighlightTaskId(task.id);
 
       try {
@@ -357,7 +360,8 @@ export function TasksPage() {
       currentUserId={user?.id}
       statusOptions={statusOptions}
       updatingTaskId={updatingTaskId}
-      commentsOpen={expandedCommentsTaskId === task.id}
+      commentsOpen={flatMode && expandedCommentsTaskId === task.id}
+      showCommentsButton={flatMode}
       prosthesisCatalog={prosthesisCatalog}
       onStatusUpdate={(id, status) => void handleStatusUpdate(id, status)}
       onToggleComments={(id) =>
@@ -519,7 +523,43 @@ export function TasksPage() {
           <div className="divide-y divide-border">
             {displayModel.cases.map((caseGroup) => (
               <section key={caseGroup.labCaseId} className="border-b border-border last:border-b-0">
-                <TaskCaseGroupHeader caseGroup={caseGroup} locale={locale} />
+                <TaskCaseGroupHeader
+                  caseGroup={caseGroup}
+                  locale={locale}
+                  showCommentsButton={canEdit}
+                  commentsOpen={expandedCommentsCaseId === caseGroup.labCaseId}
+                  onToggleComments={() =>
+                    setExpandedCommentsCaseId((prev) =>
+                      prev === caseGroup.labCaseId ? null : caseGroup.labCaseId,
+                    )
+                  }
+                />
+                {expandedCommentsCaseId === caseGroup.labCaseId && canEdit ? (
+                  <div className="border-b border-border/50 px-3 pb-3">
+                    <LabCaseCommentsPanel
+                      caseId={caseGroup.labCaseId}
+                      canPost
+                      canToggleVisibility
+                      loadComments={async () => {
+                        const r = await tasksApi.listComments(caseGroup.labCaseId);
+                        return r.data;
+                      }}
+                      onPost={async (body, visibleToClinic) => {
+                        const r = await tasksApi.addComment(caseGroup.labCaseId, {
+                          body,
+                          visibleToClinic,
+                        });
+                        notifyTabBadgesChanged();
+                        return r.data;
+                      }}
+                      onToggleVisibility={async (commentId, visible) => {
+                        const r = await tasksApi.setCommentVisibility(commentId, visible);
+                        return r.data;
+                      }}
+                      onError={showError}
+                    />
+                  </div>
+                ) : null}
                 {caseGroup.prosthesisGroups.map((prosthesisGroup) => (
                   <div
                     key={prosthesisGroup.key}