Refine UI to clean professional style

templates/components/card.html

@@ -0,0 +1,24 @@
+{#
+  Card/Panel Component
+  Reusable container with optional header and footer
+
+  Variables:
+    - title: Optional card header title
+    - indicator: If true, shows status indicator dot in header
+    - indicator_active: If true, indicator is active/green
+    - no_padding: If true, removes body padding
+#}
+
+<div class="panel">
+    {% if title %}
+    <div class="panel-header">
+        <span>{{ title }}</span>
+        {% if indicator %}
+        <div class="panel-indicator {% if indicator_active %}active{% endif %}"></div>
+        {% endif %}
+    </div>
+    {% endif %}
+    <div class="panel-content{% if no_padding %}" style="padding: 0;{% else %}{% endif %}">
+        {{ caller() }}
+    </div>
+</div>

templates/components/empty_state.html

@@ -0,0 +1,38 @@
+{#
+  Empty State Component
+  Display when no data is available
+
+  Variables:
+    - icon: Optional SVG icon (default: generic empty icon)
+    - title: Main message (default: "No data")
+    - description: Optional helper text
+    - action_text: Optional button text
+    - action_onclick: Optional button onclick handler
+    - action_href: Optional button link
+#}
+
+<div class="empty-state">
+    <div class="empty-state-icon">
+        {% if icon %}
+        {{ icon|safe }}
+        {% else %}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M8 12h8"/>
+        </svg>
+        {% endif %}
+    </div>
+    <div class="empty-state-title">{{ title|default('No data') }}</div>
+    {% if description %}
+    <div class="empty-state-description">{{ description }}</div>
+    {% endif %}
+    {% if action_text %}
+    <div class="empty-state-action">
+        {% if action_href %}
+        <a href="{{ action_href }}" class="btn btn-primary btn-sm">{{ action_text }}</a>
+        {% elif action_onclick %}
+        <button class="btn btn-primary btn-sm" onclick="{{ action_onclick }}">{{ action_text }}</button>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>

templates/components/loading.html

@@ -0,0 +1,27 @@
+{#
+  Loading State Component
+  Display while data is being fetched
+
+  Variables:
+    - text: Optional loading text (default: "Loading...")
+    - size: 'sm', 'md', or 'lg' (default: 'md')
+    - overlay: If true, renders as full overlay
+#}
+
+{% if overlay %}
+<div class="loading-overlay">
+    <div class="loading-content">
+        <div class="spinner {% if size == 'sm' %}spinner-sm{% elif size == 'lg' %}spinner-lg{% endif %}"></div>
+        {% if text %}
+        <div class="loading-text mt-3 text-secondary text-sm">{{ text }}</div>
+        {% endif %}
+    </div>
+</div>
+{% else %}
+<div class="loading-inline flex items-center gap-3">
+    <div class="spinner {% if size == 'sm' %}spinner-sm{% elif size == 'lg' %}spinner-lg{% endif %}"></div>
+    {% if text %}
+    <span class="text-secondary text-sm">{{ text }}</span>
+    {% endif %}
+</div>
+{% endif %}

templates/components/stats_strip.html

@@ -0,0 +1,47 @@
+{#
+  Stats Strip Component
+  Horizontal bar displaying key metrics
+
+  Variables:
+    - stats: List of stat objects with 'id', 'value', 'label', and optional 'title'
+    - show_divider: Show divider after stats (default: true)
+    - status_dot_id: Optional ID for status indicator dot
+    - status_text_id: Optional ID for status text
+    - time_id: Optional ID for time display
+#}
+
+<div class="stats-strip">
+    <div class="stats-strip-inner">
+        {% for stat in stats %}
+        <div class="strip-stat" {% if stat.title %}title="{{ stat.title }}"{% endif %}>
+            <span class="strip-value" id="{{ stat.id }}">{{ stat.value|default('0') }}</span>
+            <span class="strip-label">{{ stat.label }}</span>
+        </div>
+        {% endfor %}
+
+        {% if show_divider|default(true) %}
+        <div class="strip-divider"></div>
+        {% endif %}
+
+        {# Additional content from caller #}
+        {% if caller is defined %}
+        {{ caller() }}
+        {% endif %}
+
+        {% if status_dot_id or status_text_id %}
+        <div class="strip-divider"></div>
+        <div class="strip-status">
+            {% if status_dot_id %}
+            <div class="status-dot inactive" id="{{ status_dot_id }}"></div>
+            {% endif %}
+            {% if status_text_id %}
+            <span id="{{ status_text_id }}">STANDBY</span>
+            {% endif %}
+        </div>
+        {% endif %}
+
+        {% if time_id %}
+        <div class="strip-time" id="{{ time_id }}">--:--:-- UTC</div>
+        {% endif %}
+    </div>
+</div>

templates/components/status_badge.html

@@ -0,0 +1,27 @@
+{#
+  Status Badge Component
+  Compact status indicator with dot and text
+
+  Variables:
+    - status: 'online', 'offline', 'warning', 'error' (default: 'offline')
+    - text: Status text to display
+    - id: Optional ID for the text element (for JS updates)
+    - dot_id: Optional ID for the dot element (for JS updates)
+    - pulse: If true, adds pulse animation to dot
+#}
+
+{% set status_class = {
+    'online': 'online',
+    'active': 'online',
+    'offline': 'offline',
+    'warning': 'warning',
+    'error': 'error',
+    'inactive': 'inactive'
+}.get(status|default('offline'), 'inactive') %}
+
+<div class="status-badge flex items-center gap-2">
+    <div class="status-dot {{ status_class }}{% if pulse %} pulse{% endif %}"
+         {% if dot_id %}id="{{ dot_id }}"{% endif %}></div>
+    <span class="text-sm"
+          {% if id %}id="{{ id }}"{% endif %}>{{ text|default('Unknown') }}</span>
+</div>