init

custom/otssignange/views/displays.twig

@@ -0,0 +1,85 @@
+{#
+  OTS Signage Modern Theme - Displays Page Override
+  Two-column layout with folder panel on left
+#}
+{% extends "authed.twig" %}
+
+{% block pageTitle %}Displays{% endblock %}
+
+{% block content %}
+<div class="ots-theme two-column-layout">
+  <aside class="left-panel">
+    <div class="panel-header">
+      <h3>Folders</h3>
+      <button class="btn-icon-sm" aria-label="Expand/collapse">
+        <span>✎</span>
+      </button>
+    </div>
+    <div class="folder-tree">
+      <div class="folder-item active">
+        <span class="folder-icon">📁</span>
+        <span class="folder-name">All Items</span>
+      </div>
+      <div class="folder-item">
+        <span class="folder-icon">📂</span>
+        <span class="folder-name">Root Folder</span>
+      </div>
+    </div>
+  </aside>
+
+  <main class="content-panel">
+    <div class="page-header">
+      <h1>Displays</h1>
+      <p class="text-muted">Manage and monitor your digital signage displays</p>
+    </div>
+
+    <div class="content-toolbar">
+      <input type="search" placeholder="Search displays…" class="form-control search-field" />
+      <div class="toolbar-actions">
+        <button class="btn btn-outline">Columns</button>
+        <a href="{{ baseUrl }}/display/add" class="btn btn-primary">Add Display</a>
+      </div>
+    </div>
+
+    <div class="stat-row">
+      <div class="stat-box">
+        <div class="stat-label">Total</div>
+        <div class="stat-value">1</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">Online</div>
+        <div class="stat-value text-success">1</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">Offline</div>
+        <div class="stat-value text-danger">0</div>
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>Display</th>
+            <th>Status</th>
+            <th>Folder</th>
+            <th>Group</th>
+            <th>Last Check-in</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Test1</td>
+            <td><span class="badge badge-success">Online</span></td>
+            <td>Test Screens</td>
+            <td>-</td>
+            <td>just now</td>
+            <td><button class="btn-icon-sm" aria-label="Actions">⋮</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</div>
+{% endblock %}