path: root/templates/dashboard/htmx/overview.htmx.django

<style>
    @keyframes pulseGlow {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    .pulse-dot {
        animation: pulseGlow 2s ease-in-out infinite;
    }
    @keyframes barGrow {
        from { width: 0; }
    }
    .animate-bar {
        animation: barGrow 0.8s ease-out forwards;
    }
    .dove-scroll {
        max-height: 220px;
        overflow-y: auto;
    }
    .dove-scroll::-webkit-scrollbar {
        width: 4px;
    }
    .dove-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .dove-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 2px;
    }
    .dove-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    @keyframes drawLine {
        from { stroke-dashoffset: var(--line-length); }
        to { stroke-dashoffset: 0; }
    }
    @keyframes fadeGradient {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .sparkline-draw {
        animation: drawLine 1s ease-out forwards;
    }
    .sparkline-fill-fade {
        opacity: 0;
        animation: fadeGradient 0.6s ease-out 0.4s forwards;
    }
    @keyframes statusBarGrow {
        from { width: 0; }
    }
    .status-bar-segment {
        animation: statusBarGrow 0.6s ease-out forwards;
    }
</style>

<div class="slide-up space-y-4">

    <div class="grid grid-cols-2 gap-4">

        <div class="glass rounded-xl glow-border overflow-hidden" data-email-card>
            <div class="flex items-center justify-between px-5 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">Email</h3>
                <div class="flex items-center gap-1 text-[10px] text-zinc-600">
                    <button class="px-1.5 py-0.5 rounded bg-white/[0.06] text-zinc-400 transition-colors duration-150" data-email-range="24h" data-email-active>24h</button>
                    <button class="px-1.5 py-0.5 rounded hover:bg-white/[0.04] transition-colors duration-150" data-email-range="7d">7d</button>
                    <button class="px-1.5 py-0.5 rounded hover:bg-white/[0.04] transition-colors duration-150" data-email-range="30d">30d</button>
                </div>
            </div>
            <div class="px-5 pt-3 pb-1">
                <svg viewBox="0 0 200 40" class="w-full h-20" preserveAspectRatio="none" data-email-svg>
                    <defs>
                        <linearGradient id="emailGradient" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="#34d399" stop-opacity="0.15" />
                            <stop offset="100%" stop-color="#34d399" stop-opacity="0" />
                        </linearGradient>
                    </defs>
                    <path d="{{ email.Sparkline24h.FillPath }}" fill="url(#emailGradient)" class="sparkline-fill-fade" data-email-fill />
                    <polyline points="{{ email.Sparkline24h.LinePath }}" fill="none" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="sparkline-draw" data-email-line />
                </svg>
            </div>
            <div class="grid grid-cols-4 gap-4 px-5 py-3 border-t border-white/[0.04]">
                <div>
                    <p class="text-[10px] text-zinc-600">Mailboxes</p>
                    <p class="text-sm text-zinc-200 font-mono tabular-nums">{{ email.TotalMailboxes }}</p>
                </div>
                <div>
                    <p class="text-[10px] text-zinc-600">Delivered</p>
                    <p class="text-sm text-zinc-200 font-mono tabular-nums">{{ email.TotalDelivered }}</p>
                </div>
                <div>
                    <p class="text-[10px] text-zinc-600">Bounced</p>
                    <p class="text-sm text-zinc-200 font-mono tabular-nums">{{ email.TotalBounced }}</p>
                </div>
                <div>
                    <p class="text-[10px] text-zinc-600">Bounce rate</p>
                    <p class="text-sm text-zinc-200 font-mono tabular-nums">{{ email.BounceRate }}%</p>
                </div>
            </div>
        </div>

        <div class="glass rounded-xl glow-border overflow-hidden flex flex-col" data-domains-card>
            <div class="flex items-center justify-between px-5 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">Domains</h3>
                {% if domains.Domains %}
                <div class="dropdown dropdown-compact" data-dropdown data-domain-dropdown>
                    <input type="hidden" value="{{ domains.Selected }}" data-dropdown-value data-domain-selected>
                    <button type="button" data-dropdown-trigger class="flex items-center gap-1.5 px-2 py-0.5 rounded bg-white/[0.06] border border-white/[0.06] text-[10px] text-zinc-400 transition-colors duration-150 hover:border-white/[0.1]">
                        <span class="truncate max-w-[120px]" data-dropdown-label>{{ domains.Selected }}</span>
                        <svg class="w-2.5 h-2.5 text-zinc-600 shrink-0 transition-transform duration-150" data-dropdown-chevron fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </button>
                    <div class="dropdown-menu" data-dropdown-menu>
                        <div class="dropdown-options" data-dropdown-options>
                            {% for domain in domains.Domains %}
                            <button type="button" class="dropdown-option" data-dropdown-option data-value="{{ domain.Name }}" data-label="{{ domain.Name }}">
                                <p>{{ domain.Name }}</p>
                            </button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            {% if domains.Domains %}
            <div class="flex-1 flex flex-col justify-center">
                {% for domain in domains.Domains %}
                <div class="px-5 py-3 {% if domain.Name != domains.Selected %}hidden{% endif %}" data-domain-graph="{{ domain.Name }}">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-full h-2 rounded-full bg-white/[0.04] overflow-hidden flex">
                            <div class="h-full bg-emerald-500/70 rounded-l-full status-bar-segment" style="width: {{ domain.PercentOk }}%"></div>
                            <div class="h-full bg-amber-500/70 status-bar-segment" style="width: {{ domain.PercentWarn }}%"></div>
                            <div class="h-full bg-red-500/70 rounded-r-full status-bar-segment" style="width: {{ domain.PercentErr }}%"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4 text-center">
                        <div>
                            <span class="inline-flex items-center gap-1 text-[10px] mb-1">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500/70"></span>
                                <span class="text-zinc-500">2xx</span>
                                <span class="text-zinc-300 font-mono tabular-nums">{{ domain.PercentOk }}%</span>
                            </span>
                            <p class="text-sm text-emerald-400 font-mono tabular-nums">{{ domain.StatusOk }}</p>
                        </div>
                        <div>
                            <span class="inline-flex items-center gap-1 text-[10px] mb-1">
                                <span class="w-1.5 h-1.5 rounded-full bg-amber-500/70"></span>
                                <span class="text-zinc-500">3xx</span>
                                <span class="text-zinc-300 font-mono tabular-nums">{{ domain.PercentWarn }}%</span>
                            </span>
                            <p class="text-sm text-amber-400 font-mono tabular-nums">{{ domain.StatusWarn }}</p>
                        </div>
                        <div>
                            <span class="inline-flex items-center gap-1 text-[10px] mb-1">
                                <span class="w-1.5 h-1.5 rounded-full bg-red-500/70"></span>
                                <span class="text-zinc-500">4xx+</span>
                                <span class="text-zinc-300 font-mono tabular-nums">{{ domain.PercentErr }}%</span>
                            </span>
                            <p class="text-sm text-red-400 font-mono tabular-nums">{{ domain.StatusErr }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="flex-1 flex items-center justify-center">
                <p class="text-xs text-zinc-600">No domains registered</p>
            </div>
            {% endif %}
        </div>

    </div>

    <div class="grid grid-cols-3 gap-4">

        <div class="glass rounded-xl glow-border overflow-hidden">
            <div class="px-5 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">Reverse Proxy</h3>
            </div>
            <div class="divide-y divide-white/[0.04]">
                {% for service in reverse_proxy.Services %}
                <div class="flex items-center justify-between px-5 py-2.5">
                    <div class="flex items-center gap-3">
                        {% if service.Up %}
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)] pulse-dot"></span>
                        {% else %}
                        <span class="w-1.5 h-1.5 rounded-full bg-red-400 shadow-[0_0_6px_rgba(248,113,113,0.4)] pulse-dot"></span>
                        {% endif %}
                        <span class="text-xs {% if service.Up %}text-zinc-300{% else %}text-red-400/70{% endif %}">{{ service.Name }}</span>
                    </div>
                    <span class="text-xs text-zinc-600 font-mono">{{ service.Target }}</span>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="glass rounded-xl glow-border overflow-hidden">
            <div class="flex items-center justify-between px-5 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">Object Storage</h3>
                <span class="text-[10px] text-zinc-600 font-mono">{{ storage.TotalUsage }}</span>
            </div>
            <div class="divide-y divide-white/[0.04]">
                {% for bucket in storage.Buckets %}
                <div class="px-5 py-2.5">
                    <div class="flex items-center justify-between mb-1.5">
                        <span class="text-xs text-zinc-300">{{ bucket.Name }}</span>
                        <span class="text-[10px] text-zinc-600 font-mono">{{ bucket.UsageLabel }}</span>
                    </div>
                    <div class="w-full h-1 rounded-full bg-white/[0.04]">
                        <div class="h-full rounded-full bg-cyan-500/60 animate-bar" style="width: {{ bucket.Percentage }}%"></div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="glass rounded-xl glow-border overflow-hidden">
            <div class="flex items-center justify-between px-5 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">Cron Jobs</h3>
                <span class="text-[10px] text-zinc-600">{{ cron_jobs.FailCount }} failed</span>
            </div>
            {% if cron_jobs.Failures %}
            <div class="divide-y divide-white/[0.04]">
                {% for failure in cron_jobs.Failures %}
                <div class="px-5 py-2.5">
                    <div class="flex items-center justify-between mb-0.5">
                        <span class="text-xs text-zinc-300">{{ failure.JobName }}</span>
                        <span class="text-[10px] text-zinc-600">{{ failure.FailedAt }}</span>
                    </div>
                    <p class="text-[10px] text-red-400/70 truncate">{{ failure.ErrorText }}</p>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="flex items-center justify-center py-8">
                <p class="text-xs text-emerald-400/60">All jobs running successfully</p>
            </div>
            {% endif %}
        </div>

    </div>

    <div class="grid grid-cols-[3fr_1fr] gap-4">

        <div class="glass rounded-xl glow-border overflow-hidden">
            <div class="flex items-center justify-between px-5 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">Dove</h3>
                <div class="flex items-center gap-4 text-[10px]">
                    {% for group, count in dove.StatusGroups %}
                    <span class="{% if group == "2xx" %}text-emerald-400{% elif group == "3xx" %}text-amber-400{% elif group == "4xx" %}text-orange-400{% else %}text-red-400{% endif %} font-mono tabular-nums">{{ group }}: {{ count }}</span>
                    {% endfor %}
                </div>
            </div>
            <div class="dove-scroll">
                <table class="w-full text-xs">
                    <thead class="sticky top-0 bg-surface-900/95 backdrop-blur-sm">
                        <tr class="border-b border-white/[0.04]">
                            <th class="text-left text-zinc-600 font-medium px-5 py-2">Method</th>
                            <th class="text-left text-zinc-600 font-medium px-5 py-2">Route</th>
                            <th class="text-left text-zinc-600 font-medium px-5 py-2">Status</th>
                            <th class="text-right text-zinc-600 font-medium px-5 py-2">Hits</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/[0.04]">
                        {% for entry in dove.RecentRoutes %}
                        <tr>
                            <td class="px-5 py-1.5">
                                <span class="inline-flex px-1.5 py-0.5 rounded text-[10px] font-medium
                                    {% if entry.Method == "GET" %}bg-blue-500/10 text-blue-400
                                    {% elif entry.Method == "POST" %}bg-emerald-500/10 text-emerald-400
                                    {% elif entry.Method == "PUT" %}bg-amber-500/10 text-amber-400
                                    {% elif entry.Method == "DELETE" %}bg-red-500/10 text-red-400
                                    {% else %}bg-zinc-500/10 text-zinc-400{% endif %}">{{ entry.Method }}</span>
                            </td>
                            <td class="px-5 py-1.5 text-zinc-400 font-mono">{{ entry.Route }}</td>
                            <td class="px-5 py-1.5">
                                <span class="font-mono tabular-nums
                                    {% if entry.StatusCode >= 200 and entry.StatusCode < 300 %}text-emerald-400
                                    {% elif entry.StatusCode >= 300 and entry.StatusCode < 400 %}text-amber-400
                                    {% elif entry.StatusCode >= 400 and entry.StatusCode < 500 %}text-orange-400
                                    {% else %}text-red-400{% endif %}">{{ entry.StatusCode }}</span>
                            </td>
                            <td class="px-5 py-1.5 text-right text-zinc-500 font-mono tabular-nums">{{ entry.Count }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="glass rounded-xl glow-border overflow-hidden flex flex-col">
            <div class="flex items-center justify-between px-4 py-3 border-b border-white/[0.04]">
                <h3 class="text-xs font-medium text-zinc-400">System DNS</h3>
            </div>
            <div class="flex flex-col items-center justify-center flex-1 py-6 gap-3 px-4">
                {% if dns.Configured %}
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.5)] pulse-dot"></span>
                    <span class="text-xs text-emerald-400 font-medium">Configured</span>
                </div>
                <p class="text-[10px] text-zinc-500 text-center leading-relaxed">Resolving through Dove on {{ dns.Platform }}.</p>
                <span class="text-[10px] text-zinc-600 font-mono">{{ dns.Address }}</span>
                <form method="POST" action="/dashboard/dns/disable">
                    <button type="submit" class="mt-1 px-3 py-1 rounded-md text-[11px] font-medium text-red-400 bg-red-500/10 border border-red-500/20 transition-all duration-150 hover:bg-red-500/20 hover:border-red-500/30 cursor-pointer">Disable</button>
                </form>
                {% else %}
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-zinc-600"></span>
                    <span class="text-xs text-zinc-400 font-medium">Not configured</span>
                </div>
                <p class="text-[10px] text-zinc-500 text-center leading-relaxed">Dove's DNS is not set as a system nameserver.</p>
                <span class="text-[10px] text-zinc-600 font-mono">{{ dns.Address }}</span>
                <form method="POST" action="/dashboard/dns/configure">
                    <button type="submit" class="mt-1 px-3 py-1 rounded-md text-[11px] font-medium text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 transition-all duration-150 hover:bg-emerald-500/20 hover:border-emerald-500/30 cursor-pointer">Configure</button>
                </form>
                {% endif %}
            </div>
        </div>

    </div>

    <div class="glass rounded-xl glow-border overflow-hidden">
        <div class="px-5 py-3 border-b border-white/[0.04]">
            <h3 class="text-xs font-medium text-zinc-400">Listeners</h3>
        </div>
        <table class="w-full text-xs">
            <thead>
                <tr class="border-b border-white/[0.04]">
                    <th class="text-left text-zinc-500 font-medium px-5 py-2.5">Name</th>
                    <th class="text-left text-zinc-500 font-medium px-5 py-2.5">Address</th>
                    <th class="text-left text-zinc-500 font-medium px-5 py-2.5">Protocol</th>
                    <th class="text-right text-zinc-500 font-medium px-5 py-2.5">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/[0.04]">
                {% for service in services %}
                <tr>
                    <td class="px-5 py-2 text-zinc-300 font-medium font-mono">{{ service.Name }}</td>
                    <td class="px-5 py-2 text-zinc-500 font-mono">{{ bind_address }}:{{ service.Port }}</td>
                    <td class="px-5 py-2 text-zinc-500">{{ service.Protocol }}</td>
                    <td class="px-5 py-2 text-right">
                        {% if service.Active %}
                        <span class="inline-flex items-center gap-1.5">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)] pulse-dot"></span>
                            <span class="text-emerald-400">Running</span>
                        </span>
                        {% else %}
                        <span class="inline-flex items-center gap-1.5">
                            <span class="w-1.5 h-1.5 rounded-full bg-red-400/50 pulse-dot"></span>
                            <span class="text-red-400/50">Inactive</span>
                        </span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

<script>
(function() {
    var emailLine = document.querySelector('[data-email-line]');
    var emailFill = document.querySelector('[data-email-fill]');

    if (emailLine) {
        var lineLength = emailLine.getTotalLength();
        emailLine.style.strokeDasharray = lineLength;
        emailLine.style.strokeDashoffset = lineLength;
        emailLine.style.setProperty('--line-length', lineLength);
        emailLine.classList.add('sparkline-draw');

        emailLine.addEventListener('animationend', function() {
            emailLine.style.strokeDasharray = '';
            emailLine.style.strokeDashoffset = '';
            emailLine.classList.remove('sparkline-draw');
        }, { once: true });
    }

    var emailData = {
        '24h': { line: '{{ email.Sparkline24h.LinePath }}', fill: '{{ email.Sparkline24h.FillPath }}' },
        '7d':  { line: '{{ email.Sparkline7d.LinePath }}',  fill: '{{ email.Sparkline7d.FillPath }}' },
        '30d': { line: '{{ email.Sparkline30d.LinePath }}', fill: '{{ email.Sparkline30d.FillPath }}' }
    };

    var emailButtons = document.querySelectorAll('[data-email-range]');
    var animating = false;

    function parsePoints(pointString) {
        return pointString.split(' ').map(function(pair) {
            var coordinates = pair.split(',');
            return { x: parseFloat(coordinates[0]), y: parseFloat(coordinates[1]) };
        });
    }

    function interpolatePoints(fromPoints, toPoints, progress) {
        var result = [];
        var length = fromPoints.length;
        for (var index = 0; index < length; index++) {
            var interpolatedX = fromPoints[index].x + (toPoints[index].x - fromPoints[index].x) * progress;
            var interpolatedY = fromPoints[index].y + (toPoints[index].y - fromPoints[index].y) * progress;
            result.push(interpolatedX.toFixed(1) + ',' + interpolatedY.toFixed(1));
        }
        return result.join(' ');
    }

    function buildFillPath(pointString) {
        return 'M2.0,40.0 L' + pointString + ' L198.0,40.0 Z';
    }

    function animateSparkline(targetRange, duration) {
        if (animating) return;
        animating = true;

        var currentLinePoints = parsePoints(emailLine.getAttribute('points'));
        var targetLinePoints = parsePoints(emailData[targetRange].line);
        var startTime = null;

        function step(timestamp) {
            if (!startTime) startTime = timestamp;
            var elapsed = timestamp - startTime;
            var progress = Math.min(elapsed / duration, 1);
            var eased = 1 - Math.pow(1 - progress, 3);

            var interpolatedLine = interpolatePoints(currentLinePoints, targetLinePoints, eased);
            emailLine.setAttribute('points', interpolatedLine);
            emailFill.setAttribute('d', buildFillPath(interpolatedLine));

            if (progress < 1) {
                requestAnimationFrame(step);
            } else {
                emailLine.setAttribute('points', emailData[targetRange].line);
                emailFill.setAttribute('d', emailData[targetRange].fill);
                animating = false;
            }
        }

        requestAnimationFrame(step);
    }

    emailButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var range = button.getAttribute('data-email-range');

            emailButtons.forEach(function(otherButton) {
                otherButton.classList.remove('bg-white/[0.06]', 'text-zinc-400');
                otherButton.removeAttribute('data-email-active');
            });
            button.classList.add('bg-white/[0.06]', 'text-zinc-400');
            button.setAttribute('data-email-active', '');

            animateSparkline(range, 400);
        });
    });

    var domainDropdown = document.querySelector('[data-domain-dropdown]');
    if (domainDropdown) {
        var domainHidden = domainDropdown.querySelector('[data-domain-selected]');
        var domainOptions = domainDropdown.querySelectorAll('[data-dropdown-option]');

        domainOptions.forEach(function(option) {
            option.addEventListener('click', function() {
                setTimeout(function() {
                    var selectedDomain = domainHidden.value;
                    var allGraphs = document.querySelectorAll('[data-domain-graph]');
                    var allStats = document.querySelectorAll('[data-domain-stats]');

                    allGraphs.forEach(function(graph) {
                        if (graph.getAttribute('data-domain-graph') === selectedDomain) {
                            graph.classList.remove('hidden');
                        } else {
                            graph.classList.add('hidden');
                        }
                    });

                    allStats.forEach(function(stats) {
                        if (stats.getAttribute('data-domain-stats') === selectedDomain) {
                            stats.classList.remove('hidden');
                        } else {
                            stats.classList.add('hidden');
                        }
                    });
                }, 10);
            });
        });
    }
})();
</script>