feat(01-04): DocumentsSection + NotesSection — link esterni e log decisioni read-only

- DocumentsSection: link clickabili con target="_blank" rel="noopener noreferrer" icone SVG inline per documento ed external link, hover state con colore accent - NotesSection: note read-only con timestamp in locale it-IT (D-12: cliente legge, admin scrive) empty state informativo per entrambi i componenti - SVG inline al posto di lucide-react per compatibilita' massima
2026-05-14 22:13:33 +02:00
parent a4e2de0611
commit 8602bfa92f
2 changed files with 120 additions and 0 deletions
@@ -0,0 +1,49 @@
+import type { ClientView } from '@/lib/client-view';
+import { Card } from '@/components/ui/card';
+
+interface NotesSectionProps {
+  notes: ClientView['notes'];
+}
+
+export function NotesSection({ notes }: NotesSectionProps) {
+  if (notes.length === 0) {
+    return (
+      <p className="text-sm text-[#999999] italic">
+        Nessuna nota ancora registrata. Le decisioni appariranno qui man mano che il progetto avanza.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {notes.map((note) => {
+        const dateFormatted = new Date(note.created_at).toLocaleDateString('it-IT', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        });
+        const timeFormatted = new Date(note.created_at).toLocaleTimeString('it-IT', {
+          hour: '2-digit',
+          minute: '2-digit',
+        });
+
+        return (
+          <Card
+            key={note.id}
+            className="rounded-lg border border-[#e5e5e5] bg-white shadow-none p-5"
+          >
+            {/* Testo nota — sola lettura (D-12: admin scrive, cliente legge) */}
+            <p className="text-sm text-[#1a1a1a] leading-relaxed whitespace-pre-wrap">
+              {note.body}
+            </p>
+
+            {/* Timestamp */}
+            <p className="text-xs text-[#999999] mt-3">
+              {dateFormatted} alle {timeFormatted}
+            </p>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}