113 lines
3.6 KiB
Twig
113 lines
3.6 KiB
Twig
|
{#
|
|||
|
|
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 %}
|