Visualizzazione ricevute

frontend/src/components/ReceiptTree/ReceiptTree.tsx

@@ -1,5 +1,6 @@
-import { ChevronDown, ChevronRight, Mail } from 'lucide-react'
+import { ChevronDown, ChevronRight, Mail, ExternalLink } from 'lucide-react'
 import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { PecTypeBadge, PecStateBadge } from '@/components/PecBadge/PecBadge'
 import { formatDate } from '@/lib/utils'
 import type { MessageResponse } from '@/types/api.types'
@@ -12,9 +13,11 @@ interface ReceiptTreeProps {
 /**
  * Visualizza la gerarchia delle ricevute PEC collegate a un messaggio.
  * Mostra in ordine cronologico: accettazione → consegna (o anomalia).
+ * Le ricevute sono cliccabili e navigano al dettaglio del messaggio ricevuta.
  */
 export function ReceiptTree({ message, receipts }: ReceiptTreeProps) {
   const [expanded, setExpanded] = useState(true)
+  const navigate = useNavigate()
 
   if (receipts.length === 0) {
     if (message.direction === 'outbound') {
@@ -66,6 +69,7 @@ export function ReceiptTree({ message, receipts }: ReceiptTreeProps) {
                 date={receipt.received_at || receipt.created_at}
                 type={receipt.pec_type}
                 messageId={receipt.id}
+                onClick={() => navigate(`/messages/${receipt.id}`)}
               />
             ))}
         </div>
@@ -81,25 +85,41 @@ interface ReceiptNodeProps {
   type?: MessageResponse['pec_type']
   messageId?: string
   isRoot?: boolean
+  onClick?: () => void
 }
 
-function ReceiptNode({ label, date, state, type, isRoot }: ReceiptNodeProps) {
-  return (
+function ReceiptNode({ label, date, state, type, isRoot, onClick }: ReceiptNodeProps) {
+  const isClickable = !!onClick
+
+  const content = (
     <div className="flex items-start gap-3">
       {/* Indicatore timeline */}
       <div className="mt-1 flex flex-col items-center">
         <div
           className={`h-3 w-3 rounded-full border-2 ${
-            isRoot ? 'border-primary bg-primary/20' : 'border-muted-foreground bg-muted'
+            isRoot
+              ? 'border-primary bg-primary/20'
+              : isClickable
+                ? 'border-blue-500 bg-blue-100'
+                : 'border-muted-foreground bg-muted'
           }`}
         />
       </div>
 
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 flex-wrap">
-          <span className="text-sm font-medium truncate">{label}</span>
+          <span
+            className={`text-sm font-medium truncate ${
+              isClickable ? 'text-blue-600 group-hover:underline' : ''
+            }`}
+          >
+            {label}
+          </span>
           {state && !isRoot && <PecStateBadge state={state} />}
           {type && type !== 'posta_certificata' && <PecTypeBadge type={type} />}
+          {isClickable && (
+            <ExternalLink className="h-3.5 w-3.5 text-blue-400 group-hover:text-blue-600 flex-shrink-0" />
+          )}
         </div>
         {date && (
           <p className="text-xs text-muted-foreground mt-0.5">{formatDate(date)}</p>
@@ -107,4 +127,19 @@ function ReceiptNode({ label, date, state, type, isRoot }: ReceiptNodeProps) {
       </div>
     </div>
   )
+
+  if (isClickable) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className="w-full text-left group rounded-md px-2 py-1 -mx-2 hover:bg-muted/50 transition-colors cursor-pointer"
+        title="Apri dettaglio ricevuta"
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return <div>{content}</div>
 }