reworked dashboard

templates/components/storage_usage.html

@@ -0,0 +1,32 @@
+{% from 'macros.html' import format_size %}
+
+{% macro storage_usage(storage_by_type) %}
+<div class="masonry-card">
+  <div class="card shadow-sm">
+    <div class="card-body">
+      <div class="d-flex justify-content-between align-items-center mb-3">
+        <h5 class="card-title mb-0"><i class="fas fa-chart-pie me-2"></i>Storage Usage</h5>
+        <a href="{{ url_for('rooms.rooms') }}" class="btn btn-primary btn-sm">View Details</a>
+      </div>
+      {% if storage_by_type %}
+      <div class="chart-container">
+        <canvas id="storageChart"></canvas>
+      </div>
+      <div class="mt-3">
+        {% for type in storage_by_type %}
+        <div class="d-flex justify-content-between align-items-center mb-2">
+          <div class="d-flex align-items-center">
+            <i class="fas fa-file me-2 icon-primary"></i>
+            <span class="text-muted">{{ type.extension|upper }}:</span>
+          </div>
+          <div class="fw-bold text-primary">{{ format_size(type.total_size) }}</div>
+        </div>
+        {% endfor %}
+      </div>
+      {% else %}
+      <div class="text-muted small">No storage data available</div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}