add summary to transaction-review and a hove/selected status to the transactions

resources/views/livewire/transaction-review.blade.php

@@ -191,6 +191,44 @@ new #[Layout('components.layouts.app')] class extends Component {
         Transaction::STATUS_FALSE_POSITIVE => 'Anomalie begründen, Dokumentation ergänzen und Alarm schließen.',
         Transaction::STATUS_CLEARED => 'Review-Ergebnis dokumentieren und Kontrollnachweis archivieren.',
     ];
+    $statusSummaryPhrases = [
+        Transaction::STATUS_TRUE_POSITIVE => [
+            'Verdachtsindikatoren bestätigen Treffer.',
+            'Risikotreiber stehen weiter auf Rot.',
+            'Sofortmaßnahmen priorisieren und dokumentieren.',
+            'Ermittlungsteam unverzüglich koordinieren.',
+            'Audit-Trail aktuell halten und teilen.',
+        ],
+        Transaction::STATUS_FALSE_POSITIVE => [
+            'Alarm widerlegt, Dokumentation abschließen.',
+            'Risikoschwelle fällt unter interne Limits.',
+            'Regelwerk für Fehlalarm analysieren.',
+            'Stakeholder über Entwarnung informieren.',
+            'Kontrollnachweis im Archiv sichern.',
+        ],
+        Transaction::STATUS_CLEARED => [
+            'Keine Auffälligkeiten, Vorgang freigegeben.',
+            'Monitoringdaten bestätigen Referenzverhalten.',
+            'Freigabe mit Vier-Augen-Prinzip dokumentieren.',
+            'Compliance-Team über Abschluss informieren.',
+            'Revisionsunterlagen vollständig archivieren.',
+        ],
+    ];
+    $statusSummary = array_map(
+        static fn (array $phrases): string => $phrases[0] ?? 'Status gemäß aktuellem Prüfpfad.',
+        $statusSummaryPhrases
+    );
+    $statusSummaryBanner = [
+        Transaction::STATUS_TRUE_POSITIVE => [
+            'classes' => 'border border-rose-400/60 bg-gradient-to-r from-rose-500/20 via-rose-500/10 to-rose-400/20 text-rose-900 shadow-[0_30px_70px_-50px_rgba(244,63,94,0.75)] dark:border-rose-500/50 dark:from-rose-500/20 dark:via-rose-500/10 dark:to-rose-400/20 dark:text-rose-100',
+        ],
+        Transaction::STATUS_FALSE_POSITIVE => [
+            'classes' => 'border border-amber-400/60 bg-gradient-to-r from-amber-400/20 via-amber-400/10 to-amber-300/20 text-amber-900 shadow-[0_30px_70px_-50px_rgba(245,158,11,0.65)] dark:border-amber-400/50 dark:from-amber-400/20 dark:via-amber-400/10 dark:to-amber-300/20 dark:text-amber-100',
+        ],
+        Transaction::STATUS_CLEARED => [
+            'classes' => 'border border-emerald-400/60 bg-gradient-to-r from-emerald-400/20 via-emerald-400/10 to-emerald-300/20 text-emerald-900 shadow-[0_30px_70px_-50px_rgba(16,185,129,0.65)] dark:border-emerald-400/50 dark:from-emerald-400/20 dark:via-emerald-400/10 dark:to-emerald-300/20 dark:text-emerald-100',
+        ],
+    ];
 
     $statusLegend = [
         Transaction::STATUS_TRUE_POSITIVE => [
@@ -303,15 +341,22 @@ new #[Layout('components.layouts.app')] class extends Component {
                 @forelse ($transactions as $transaction)
                     @php
                         $selectedState = $transaction->id === $this->selectedTransactionId;
+                        $buttonClasses = [
+                            'flex w-full flex-col gap-3 px-4 py-4 text-left transition duration-200 sm:grid sm:grid-cols-[1.6fr_1fr_0.7fr]',
+                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400/70',
+                        ];
+
+                        if ($selectedState) {
+                            $buttonClasses[] = 'border-s-4 border-indigo-500/80 bg-indigo-500/10 shadow-lg shadow-indigo-500/20 ring-2 ring-indigo-400/70 ring-offset-2 ring-offset-white dark:bg-indigo-500/20 dark:ring-offset-zinc-900 scale-[1.01]';
+                        } else {
+                            $buttonClasses[] = 'border-s-4 border-transparent hover:-translate-y-0.5 hover:border-indigo-400/70 hover:bg-zinc-50/70 hover:shadow-lg hover:shadow-zinc-900/20 dark:hover:bg-zinc-800/60';
+                        }
                     @endphp
                     <button
                         wire:click="selectTransaction({{ $transaction->id }})"
                         type="button"
-                        class="flex w-full flex-col gap-3 px-4 py-4 text-left transition duration-200 sm:grid sm:grid-cols-[1.6fr_1fr_0.7fr]"
+                        class="{{ implode(' ', $buttonClasses) }}"
-                        @class([
+                        aria-pressed="{{ $selectedState ? 'true' : 'false' }}"
-                            'border-s-4 border-indigo-500/80 bg-indigo-500/10 shadow-inner shadow-indigo-500/10 dark:bg-indigo-500/20' => $selectedState,
-                            'border-s-4 border-transparent hover:-translate-y-0.5 hover:border-indigo-400/70 hover:bg-zinc-50/70 hover:shadow-lg hover:shadow-zinc-900/20 dark:hover:bg-zinc-800/60' => ! $selectedState,
-                        ])
                     >
                         <div class="space-y-2">
                             <div class="flex items-start justify-between gap-3">
@@ -388,6 +433,25 @@ new #[Layout('components.layouts.app')] class extends Component {
 
         <div class="space-y-4">
             @if ($selected)
+                @php
+                    $summaryStyles = $statusSummaryBanner[$selected->status] ?? [
+                        'classes' => 'border border-zinc-300/70 bg-zinc-100/80 text-zinc-700 dark:border-zinc-600/60 dark:bg-zinc-800/60 dark:text-zinc-200',
+                    ];
+                    $summaryText = implode(' ', $statusSummaryPhrases[$selected->status] ?? ['Status gemäß aktuellem Prüfpfad.']);
+                @endphp
+
+                <div class="rounded-3xl px-6 py-5 text-sm leading-relaxed shadow-sm backdrop-blur {{ $summaryStyles['classes'] }}">
+                    <div class="flex items-center justify-between gap-3">
+                        <span class="text-xs font-semibold uppercase tracking-wide">Statuszusammenfassung</span>
+                        <span class="inline-flex items-center gap-2 rounded-full border border-current/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide">
+                            {{ $selected->statusLabel() }}
+                        </span>
+                    </div>
+                    <p class="mt-3 text-base font-medium leading-relaxed">
+                        {{ $summaryText }}
+                    </p>
+                </div>
+
                 <div class="rounded-3xl border border-zinc-200/70 bg-white/95 p-6 shadow-sm backdrop-blur dark:border-zinc-700/70 dark:bg-zinc-900/90">
                     <div class="flex flex-wrap items-start justify-between gap-4">
                         <div>
@@ -420,6 +484,12 @@ new #[Layout('components.layouts.app')] class extends Component {
                     </div>
 
                     <dl class="mt-6 grid grid-cols-1 gap-4 text-sm text-zinc-600 dark:text-zinc-300">
+                        <div class="rounded-2xl bg-zinc-50/80 p-4 dark:bg-zinc-800/80">
+                            <dt class="text-xs uppercase tracking-wide text-zinc-400">Statusbegründung</dt>
+                            <dd class="mt-1 font-medium text-zinc-900 dark:text-zinc-100">
+                                {{ $statusSummary[$selected->status] ?? 'Status gemäß aktuellem Prüfpfad.' }}
+                            </dd>
+                        </div>
                         <div class="rounded-2xl bg-zinc-50/80 p-4 dark:bg-zinc-800/80">
                             <dt class="text-xs uppercase tracking-wide text-zinc-400">Gegenpartei</dt>
                             <dd class="mt-1 font-medium text-zinc-900 dark:text-zinc-100">{{ $selected->counterparty }}</dd>