kuchen diagram update

src/components/AssetDetail.jsx

@@ -21,6 +21,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { ArrowLeft, Pencil, Save, X } from 'lucide-react';
+import { parseKommentarForDisplay } from '@/lib/kommentarAnhaenge';
+import KommentarAnhaengeList from '@/components/KommentarAnhaengeList';
 
 const STATUS_LABEL = { offen: 'Offen', in_bearbeitung: 'In Bearbeitung', entsorgt: 'Entsorgt' };
 const PRIO_LABELS = { kritisch: 'Kritisch', hoch: 'Hoch', mittel: 'Mittel', niedrig: 'Niedrig' };
@@ -47,6 +49,25 @@ function PrioBadge({ prio }) {
   return <Badge className="border-green-300 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">{PRIO_LABELS[prio]}</Badge>;
 }
 
+function KommentarReadonly({ value }) {
+  const { subject, body, attachments } = parseKommentarForDisplay(value);
+  const empty = !subject && !(body && body.trim()) && attachments.length === 0;
+  if (empty) return <p className="text-sm">–</p>;
+  return (
+    <div className="space-y-3">
+      {subject && (
+        <div className="rounded-md bg-amber-100 px-3 py-2 text-sm font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
+          {subject}
+        </div>
+      )}
+      {body && body.trim() ? (
+        <p className="text-sm whitespace-pre-wrap">{body}</p>
+      ) : null}
+      <KommentarAnhaengeList attachments={attachments} />
+    </div>
+  );
+}
+
 export default function AssetDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
@@ -348,7 +369,18 @@ export default function AssetDetail() {
               )}
             </div>
 
-            <PropertyField label="Kommentar" value={form.kommentar} editing={editing} onChange={(v) => setForm(f => ({ ...f, kommentar: v }))} textarea className="sm:col-span-2" />
+            <div className="space-y-1.5 sm:col-span-2">
+              <Label>Kommentar</Label>
+              {editing ? (
+                <Textarea
+                  value={form.kommentar}
+                  onChange={(e) => setForm((f) => ({ ...f, kommentar: e.target.value }))}
+                  rows={4}
+                />
+              ) : (
+                <KommentarReadonly value={form.kommentar} />
+              )}
+            </div>
           </div>
         </CardContent>
         <CardFooter className="flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">