add summary to transaction-review and a hove/selected status to the transactions
This commit is contained in:
Bob Molitor
@@ -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([
|
||||
'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,
|
||||
])
|
||||
class="{{ implode(' ', $buttonClasses) }}"
|
||||
aria-pressed="{{ $selectedState ? 'true' : 'false' }}"
|
||||
>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user