Files
OTSSignsTheme/custom/otssignange/views/dashboard.twig
Matt Batchelder efe206a589 init
2026-02-04 06:23:04 -05:00

113 lines
3.6 KiB
Twig
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{#
OTS Signage Modern Theme - Dashboard Page Override
Modern dashboard with KPI cards, status panels, and quick actions
#}
{% extends "authed.twig" %}
{% block pageTitle %}Dashboard{% endblock %}
{% block content %}
<div class="ots-theme dashboard-page">
<section class="dashboard-hero">
<div class="hero-content">
<h2>Dashboard</h2>
<p class="text-muted">Overview of your digital signage network</p>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="{{ baseUrl }}/layout">
<span class="icon"></span> New Layout
</a>
</div>
</section>
{# KPI Row #}
<section class="kpi-row">
<div class="kpi-card">
<div class="kpi-icon">🖥</div>
<div class="kpi-content">
<div class="kpi-label">Displays</div>
<div class="kpi-number">{{ stats.displays.total|default(0) }}</div>
<div class="kpi-status">
{% if stats.displays.online|default(0) > 0 %}
<span class="badge-success">{{ stats.displays.online }} Online</span>
{% endif %}
{% if stats.displays.offline|default(0) > 0 %}
<span class="badge-danger">{{ stats.displays.offline }} Offline</span>
{% endif %}
</div>
</div>
</div>
<div class="kpi-card">
<div class="kpi-icon">📅</div>
<div class="kpi-content">
<div class="kpi-label">Schedules</div>
<div class="kpi-number">{{ stats.schedules.total|default(0) }}</div>
<div class="kpi-status">
<span class="text-muted">Scheduled events</span>
</div>
</div>
</div>
<div class="kpi-card">
<div class="kpi-icon">👤</div>
<div class="kpi-content">
<div class="kpi-label">Users</div>
<div class="kpi-number">{{ stats.users.total|default(0) }}</div>
<div class="kpi-status">
<span class="text-muted">{{ stats.users.active|default(0) }} Active</span>
</div>
</div>
</div>
</section>
{# Main Panels Row #}
<section class="dashboard-panels">
<article class="panel panel-large">
<div class="panel-header">
<h3>Display Status</h3>
<a href="{{ baseUrl }}/display" class="link-subtle">View all →</a>
</div>
<div class="panel-body">
<p class="text-muted">No displays configured yet. Add a display to get started.</p>
</div>
</article>
<article class="panel panel-large">
<div class="panel-header">
<h3>Upcoming Schedules</h3>
<a href="{{ baseUrl }}/schedule" class="link-subtle">View all →</a>
</div>
<div class="panel-body">
<p class="text-muted">No schedules found. Create a schedule to get started.</p>
</div>
</article>
</section>
{# Quick Actions #}
<section class="quick-actions">
<article class="panel">
<div class="panel-header">
<h3>Quick Actions</h3>
</div>
<div class="panel-body">
<div class="actions-grid">
<a href="{{ baseUrl }}/schedule" class="action-card">
<span class="action-icon">📅</span>
<span class="action-text">Create Schedule</span>
</a>
<a href="{{ baseUrl }}/display" class="action-card">
<span class="action-icon">🖥</span>
<span class="action-text">Manage Displays</span>
</a>
<a href="{{ baseUrl }}/user" class="action-card">
<span class="action-icon">👤</span>
<span class="action-text">Add User</span>
</a>
</div>
</div>
</article>
</section>
</div>
{% endblock %}