bmc_hub/app/dashboard/frontend/index.html

{% extends "shared/frontend/base.html" %}

{% block title %}Dashboard - BMC Hub{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h2 class="fw-bold mb-1">Dashboard</h2>
            <p class="text-muted mb-0">Velkommen tilbage, Christian</p>
        </div>
        <div class="d-flex gap-3">
            <input type="text" class="header-search" placeholder="Søg...">
            <button class="btn btn-primary"><i class="bi bi-plus-lg me-2"></i>Ny Opgave</button>
        </div>
    </div>

    <!-- Alerts -->
    {% if bankruptcy_alerts %}
    <div class="alert alert-danger d-flex align-items-center mb-4 border-0 shadow-sm" role="alert" style="background-color: #ffeaea; color: #842029;">
        <i class="bi bi-shield-exclamation flex-shrink-0 me-3 fs-2 animate__animated animate__pulse animate__infinite"></i>
        <div class="flex-grow-1">
            <h5 class="alert-heading mb-1 fw-bold">⚠️ KONKURS ALARM</h5>
            <div>Systemet har registreret <strong>{{ bankruptcy_alerts|length }}</strong> potentiel(le) konkurssag(er).</div>
            <ul class="mb-0 mt-2 small list-unstyled">
                {% for alert in bankruptcy_alerts %}
                <li class="mb-1">
                    <span class="badge bg-danger me-2">ALARM</span>
                    <strong>{{ alert.display_name }}:</strong> 
                    <a href="/emails?id={{ alert.id }}" class="alert-link text-decoration-underline">{{ alert.subject }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div>
            <a href="/emails?filter=bankruptcy" class="btn btn-sm btn-danger px-3">Håndter Nu <i class="bi bi-arrow-right ms-1"></i></a>
        </div>
    </div>
    {% endif %}

    {% if unknown_worklog_count > 0 %}
    <div class="alert alert-warning d-flex align-items-center mb-5" role="alert">
        <i class="bi bi-exclamation-triangle-fill flex-shrink-0 me-3 fs-4"></i>
        <div>
            <h5 class="alert-heading mb-1">Tidsregistreringer kræver handling</h5>
            Der er <strong>{{ unknown_worklog_count }}</strong> tidsregistrering(er) med typen "Ved ikke". 
            <a href="/ticket/worklog/review" class="alert-link">Gå til godkendelse</a> for at afklare dem.
        </div>
    </div>
    {% endif %}

    <div class="row g-4 mb-5">
        <div class="col-md-3">
            <div class="card stat-card p-4 h-100">
                <div class="d-flex justify-content-between mb-2">
                    <p>Aktive Kunder</p>
                    <i class="bi bi-people text-primary" style="color: var(--accent) !important;"></i>
                </div>
                <h3>124</h3>
                <small class="text-success"><i class="bi bi-arrow-up-short"></i> 12% denne måned</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card p-4 h-100">
                <div class="d-flex justify-content-between mb-2">
                    <p>Hardware</p>
                    <i class="bi bi-hdd text-primary" style="color: var(--accent) !important;"></i>
                </div>
                <h3>856</h3>
                <small class="text-muted">Enheder online</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card p-4 h-100">
                <div class="d-flex justify-content-between mb-2">
                    <p>Support</p>
                    <i class="bi bi-ticket text-primary" style="color: var(--accent) !important;"></i>
                </div>
                <h3>12</h3>
                <small class="text-warning">3 kræver handling</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card p-4 h-100">
                <div class="d-flex justify-content-between mb-2">
                    <p>Omsætning</p>
                    <i class="bi bi-currency-dollar text-primary" style="color: var(--accent) !important;"></i>
                </div>
                <h3>450k</h3>
                <small class="text-success">Over budget</small>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card p-4">
                <h5 class="fw-bold mb-4">Seneste Aktiviteter</h5>
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th>Kunde</th>
                                <th>Handling</th>
                                <th>Status</th>
                                <th class="text-end">Tid</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-bold">Advokatgruppen A/S</td>
                                <td>Firewall konfiguration</td>
                                <td><span class="badge bg-success bg-opacity-10 text-success">Fuldført</span></td>
                                <td class="text-end text-muted">10:23</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Byg & Bo ApS</td>
                                <td>Licens fornyelse</td>
                                <td><span class="badge bg-warning bg-opacity-10 text-warning">Afventer</span></td>
                                <td class="text-end text-muted">I går</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Cafe Møller</td>
                                <td>Netværksnedbrud</td>
                                <td><span class="badge bg-danger bg-opacity-10 text-danger">Kritisk</span></td>
                                <td class="text-end text-muted">I går</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card p-4 h-100">
                <h5 class="fw-bold mb-4">System Status</h5>
                
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="small fw-bold text-muted">CPU LOAD</span>
                        <span class="small fw-bold">24%</span>
                    </div>
                    <div class="progress" style="height: 8px; background-color: var(--accent-light);">
                        <div class="progress-bar" style="width: 24%; background-color: var(--accent);"></div>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="small fw-bold text-muted">MEMORY</span>
                        <span class="small fw-bold">56%</span>
                    </div>
                    <div class="progress" style="height: 8px; background-color: var(--accent-light);">
                        <div class="progress-bar" style="width: 56%; background-color: var(--accent);"></div>
                    </div>
                </div>
                
                <div class="mt-auto p-3 rounded" style="background-color: var(--accent-light);">
                    <div class="d-flex">
                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                        <small class="fw-bold" style="color: var(--accent)">Alle systemer kører optimalt.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}