@extends('layouts.app')

@section('page_title', 'Kaffeeliste SaaS - Uebersicht')

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Uebersicht</p>
            <h2 class="hero__title">Dein Bereich</h2>
            <p class="hero__lead">
                Das Dashboard zeigt den aktuellen Kontostand, die Nutzung im Monat und die letzten Buchungen.
                Die Werte sind hier bewusst als fachliche Anker platziert und koennen spaeter direkt aus dem Ledger gespeist werden.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">Letzte Synchronisation: heute</span>
            <span class="badge">Tenant: Demo-Workspace</span>
            <span class="badge badge--solid">Saldo aktiv</span>
        </div>
    </section>

    <section class="grid grid--4">
        <article class="card metric">
            <p class="metric__label">Kontostand</p>
            <div class="metric__value">7,50 EUR</div>
            <p class="muted">Positiver Puffer fuer den laufenden Monat.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Striche diesen Monat</p>
            <div class="metric__value">5</div>
            <p class="muted">Verbrauch seit Monatsbeginn.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Einzahlungen diesen Monat</p>
            <div class="metric__value">1</div>
            <p class="muted">Alle gebuchten Zahlungen im aktuellen Zeitraum.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Letzte Buchung</p>
            <div class="metric__value">Heute</div>
            <p class="muted">Aktuelle Aktivitaet im Mandantenbereich.</p>
        </article>
    </section>

    <section class="split" style="margin-top: 18px;">
        <article class="table-card">
            <div class="table-card__header">
                <div>
                    <p class="card__eyebrow">Aktivitaet</p>
                    <h3>Letzte Buchungen</h3>
                </div>
                <span class="pill">Live feed</span>
            </div>
            <div class="table-card__body">
                <table>
                    <thead>
                        <tr>
                            <th>Zeit</th>
                            <th>Typ</th>
                            <th>Betrag</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>09:00</td>
                            <td>Einzahlung</td>
                            <td>10,00 EUR</td>
                            <td><span class="status">Gebucht</span></td>
                        </tr>
                        <tr>
                            <td>10:30</td>
                            <td>Strich</td>
                            <td>-2,50 EUR</td>
                            <td><span class="status status--warning">Verbraucht</span></td>
                        </tr>
                        <tr>
                            <td>12:15</td>
                            <td>Hinweis</td>
                            <td>Info</td>
                            <td><span class="status">Aktiv</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>

        <article class="panel">
            <h3>Arbeitsbereich</h3>
            <p class="muted">Schnellzugriffe fuer die wichtigsten Arbeitsschritte im Tagesbetrieb.</p>
            <div class="stack">
                <a class="button" href="/members">Mitglieder verwalten</a>
                <a class="button button--ghost" href="/ledger">Ledger pruefen</a>
                <a class="button button--ghost" href="/payments">Zahlungen ansehen</a>
                <a class="button button--ghost" href="/imports">CSV-Import starten</a>
            </div>
            <div class="note" style="margin-top: 18px;">
                Der alte Funktionskern bleibt sichtbar: Saldo, Striche, Einzahlungen und letzte Aktionen bilden die produktive Achse.
            </div>
        </article>
    </section>
@endsection
