restructure file system

templates/dashboard/dashboard.html

@@ -0,0 +1,185 @@
+{% extends "common/base.html" %}
+
+{% block title %}Dashboard - DocuPulse{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h2>Welcome back, {{ current_user.username }}!</h2>
+    <div class="input-group" style="max-width: 300px;">
+        <input type="text" class="form-control" placeholder="Search documents...">
+        <button class="btn btn-outline-secondary" type="button">
+            <i class="fas fa-search"></i>
+        </button>
+    </div>
+</div>
+
+{% from 'components/storage_overview.html' import storage_overview %}
+{% from 'components/storage_usage.html' import storage_usage %}
+{% from 'components/contacts.html' import contacts %}
+{% from 'components/contact_status.html' import contact_status %}
+{% from 'components/starred_files.html' import starred_files %}
+{% from 'components/trash.html' import trash %}
+{% from 'components/trash_type.html' import trash_type %}
+
+<style>
+.masonry {
+  column-count: 1;
+  column-gap: 1.5rem;
+}
+@media (min-width: 768px) {
+  .masonry { column-count: 2; }
+}
+@media (min-width: 1200px) {
+  .masonry { column-count: 3; }
+}
+.masonry-card {
+  display: inline-block;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+</style>
+
+<div class="masonry">
+  {{ storage_overview(room_count, file_count, folder_count, total_size) }}
+  {{ storage_usage(storage_by_type) }}
+  
+  {% if current_user.is_admin %}
+  {{ contacts(recent_contacts) }}
+  {{ contact_status(active_count, inactive_count) }}
+  {% endif %}
+  
+  {{ starred_files(starred_count, file_count) }}
+  {{ trash(trash_count, pending_deletion, oldest_trash_date, trash_size) }}
+  {{ trash_type(trash_by_type) }}
+</div>
+
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Contact Status Chart
+  const statusCtx = document.getElementById('statusChart');
+  if (statusCtx) {
+    new Chart(statusCtx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Active', 'Inactive'],
+        datasets: [{
+          data: [{{ active_count }}, {{ inactive_count }}],
+          backgroundColor: ['#16767b', '#741b5f'],
+          borderWidth: 0,
+          hoverOffset: 4
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          }
+        },
+        cutout: '70%'
+      }
+    });
+  }
+
+  // Starred Files Chart
+  const starredCtx = document.getElementById('starredChart');
+  if (starredCtx) {
+    new Chart(starredCtx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Starred', 'Unstarred'],
+        datasets: [{
+          data: [{{ starred_count }}, {{ file_count - starred_count }}],
+          backgroundColor: ['#ffd700', '#16767b'],
+          borderWidth: 0,
+          hoverOffset: 4
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          }
+        },
+        cutout: '70%'
+      }
+    });
+  }
+
+  // Storage Usage Chart
+  const storageCtx = document.getElementById('storageChart');
+  if (storageCtx) {
+    const storageData = {
+      labels: [{% for type in storage_by_type %}'{{ type.extension|upper }}'{% if not loop.last %}, {% endif %}{% endfor %}],
+      datasets: [{
+        data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
+        backgroundColor: [
+          '#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
+          '#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
+        ],
+        borderWidth: 0,
+        hoverOffset: 4
+      }]
+    };
+
+    new Chart(storageCtx, {
+      type: 'doughnut',
+      data: storageData,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          }
+        },
+        cutout: '70%'
+      }
+    });
+  }
+
+  // Trash Type Chart
+  const trashTypeCtx = document.getElementById('trashTypeChart');
+  if (trashTypeCtx) {
+    const trashTypeData = {
+      labels: [{% for type in trash_by_type %}'{{ type.extension|upper }}'{% if not loop.last %}, {% endif %}{% endfor %}],
+      datasets: [{
+        data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
+        backgroundColor: [
+          '#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
+          '#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
+        ],
+        borderWidth: 0,
+        hoverOffset: 4
+      }]
+    };
+
+    new Chart(trashTypeCtx, {
+      type: 'doughnut',
+      data: trashTypeData,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false
+          }
+        },
+        cutout: '70%'
+      }
+    });
+  }
+});
+</script>
+{% endblock %}