From 8602bfa92f94185060a51df34045cac17065d623 Mon Sep 17 00:00:00 2001
From: Simone Cavalli <simonecavalli@MacBook-Air-di-Simone.local>
Date: Thu, 14 May 2026 22:13:33 +0200
Subject: [PATCH] =?UTF-8?q?feat(01-04):=20DocumentsSection=20+=20NotesSect?=
 =?UTF-8?q?ion=20=E2=80=94=20link=20esterni=20e=20log=20decisioni=20read-o?=
 =?UTF-8?q?nly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 src/components/documents-section.tsx | 71 ++++++++++++++++++++++++++++
 src/components/notes-section.tsx     | 49 +++++++++++++++++++
 2 files changed, 120 insertions(+)
 create mode 100644 src/components/documents-section.tsx
 create mode 100644 src/components/notes-section.tsx

diff --git a/src/components/documents-section.tsx b/src/components/documents-section.tsx
new file mode 100644
index 0000000..5d38243
--- /dev/null
+++ b/src/components/documents-section.tsx
@@ -0,0 +1,71 @@
+import type { ClientView } from '@/lib/client-view';
+import { Card } from '@/components/ui/card';
+
+interface DocumentsSectionProps {
+  documents: ClientView['documents'];
+}
+
+export function DocumentsSection({ documents }: DocumentsSectionProps) {
+  if (documents.length === 0) {
+    return (
+      <p className="text-sm text-[#999999] italic">
+        Nessun documento ancora condiviso.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {documents.map((doc) => (
+        <Card
+          key={doc.id}
+          className="rounded-lg border border-[#e5e5e5] bg-white shadow-none p-0 overflow-hidden"
+        >
+          <a
+            href={doc.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-between gap-3 px-5 py-4 group hover:bg-[#f9f9f9] transition-colors"
+          >
+            {/* Icona documento */}
+            <div className="flex items-center gap-3 min-w-0">
+              <svg
+                className="w-4 h-4 text-[#0066cc] shrink-0"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                />
+              </svg>
+              <span className="text-sm font-medium text-[#1a1a1a] group-hover:text-[#0066cc] truncate transition-colors">
+                {doc.label}
+              </span>
+            </div>
+
+            {/* Icona external link */}
+            <svg
+              className="w-4 h-4 text-[#999999] group-hover:text-[#0066cc] shrink-0 transition-colors"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+              />
+            </svg>
+          </a>
+        </Card>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/notes-section.tsx b/src/components/notes-section.tsx
new file mode 100644
index 0000000..6088689
--- /dev/null
+++ b/src/components/notes-section.tsx
@@ -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>
+  );
+}
\ No newline at end of file