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/CaseDetailPanel.tsx

@@ -10,6 +10,10 @@ import { CaseToothChartPanel } from '@/components/ui/lab/CaseToothChartPanel';
 import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
 import { LabCaseAttachmentPreview } from '@/components/ui/lab/LabCaseAttachmentPreview';
 import { LabCaseAttachmentsDialog } from '@/components/ui/lab/LabCaseAttachmentsDialog';
+import {
+  LabCaseShareQrDialog,
+  LabCaseShareQrThumb,
+} from '@/components/ui/lab/LabCaseShareQrDialog';
 import { labTaskStatusVariant } from '@/components/lab/labTaskStatusDisplay';
 import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
 import {
@@ -89,6 +93,7 @@ export function CaseDetailPanel({
 }: CaseDetailPanelProps) {
   const t = useTranslations('cases');
   const [attachmentsDialogOpen, setAttachmentsDialogOpen] = useState(false);
+  const [shareQrDialogOpen, setShareQrDialogOpen] = useState(false);
   const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);
 
   useEffect(() => {
@@ -137,15 +142,7 @@ export function CaseDetailPanel({
           </div>
         </div>
 
-        <div className="flex w-full sm:w-auto shrink-0 flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-start gap-2">
-          {showCommentsButton && onCommentsClick ? (
-            <Button type="button" variant="outline" size="sm" onClick={onCommentsClick}>
-              <MessageSquare className="h-4 w-4 me-1.5" />
-              {commentCount > 0
-                ? t('commentsCount', { count: commentCount })
-                : t('showComments')}
-            </Button>
-          ) : null}
+        <div className="flex w-full sm:w-auto shrink-0 flex-col items-end gap-2">
           {canEditImportant ? (
             <Checkbox
               checked={labCase.isImportant ?? false}
@@ -155,21 +152,39 @@ export function CaseDetailPanel({
               onChange={(checked) => onImportantChange?.(checked)}
             />
           ) : null}
-          {previewAttachment && labCase.attachments.length > 0 ? (
-            <button
-              type="button"
-              onClick={() => setAttachmentsDialogOpen(true)}
-              className="aspect-square w-24 sm:w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
-              title={previewAttachment.fileName}
-              aria-label={t('viewAttachments')}
-            >
-              <LabCaseAttachmentPreview
-                caseId={labCase.id}
-                attachment={previewAttachment}
-                loadBlob={loadAttachmentBlob}
-                className="h-full w-full"
-              />
-            </button>
+          {showCommentsButton && onCommentsClick ? (
+            <Button type="button" variant="outline" size="sm" onClick={onCommentsClick}>
+              <MessageSquare className="h-4 w-4 me-1.5" />
+              {commentCount > 0
+                ? t('commentsCount', { count: commentCount })
+                : t('showComments')}
+            </Button>
+          ) : null}
+          {labCase.shareUrl || (previewAttachment && labCase.attachments.length > 0) ? (
+            <div className="flex flex-row items-center gap-2 shrink-0">
+              {previewAttachment && labCase.attachments.length > 0 ? (
+                <button
+                  type="button"
+                  onClick={() => setAttachmentsDialogOpen(true)}
+                  className="aspect-square w-24 sm:w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  title={previewAttachment.fileName}
+                  aria-label={t('viewAttachments')}
+                >
+                  <LabCaseAttachmentPreview
+                    caseId={labCase.id}
+                    attachment={previewAttachment}
+                    loadBlob={loadAttachmentBlob}
+                    className="h-full w-full"
+                  />
+                </button>
+              ) : null}
+              {labCase.shareUrl ? (
+                <LabCaseShareQrThumb
+                  shareUrl={labCase.shareUrl}
+                  onClick={() => setShareQrDialogOpen(true)}
+                />
+              ) : null}
+            </div>
           ) : null}
         </div>
       </header>
@@ -279,6 +294,14 @@ export function CaseDetailPanel({
         attachments={labCase.attachments}
         loadBlob={loadAttachmentBlob}
       />
+
+      {labCase.shareUrl ? (
+        <LabCaseShareQrDialog
+          open={shareQrDialogOpen}
+          onClose={() => setShareQrDialogOpen(false)}
+          shareUrl={labCase.shareUrl}
+        />
+      ) : null}
     </div>
   );
 }