docupulse/templates/dashboard/dashboard.html

{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Dashboard - DocuPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
{% endblock %}

{% block content %}
{{ header(
    title="Welcome back, " + current_user.username + "!",
    description="View your document management overview and statistics",
    button_text="",
    button_url="",
    icon="fa-home"
) }}

{% 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() {
  // Helper function to get computed CSS variable value
  function getCssVar(varName) {
    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
  }

  // Get all chart colors
  const chartColors = {
    primary: getCssVar('--chart-primary'),
    secondary: getCssVar('--chart-secondary'),
    warning: getCssVar('--chart-warning'),
    primaryLight: getCssVar('--chart-primary-light'),
    primaryLighter: getCssVar('--chart-primary-lighter'),
    primaryLightest: getCssVar('--chart-primary-lightest'),
    primaryPale: getCssVar('--chart-primary-pale'),
    secondaryLight: getCssVar('--chart-secondary-light'),
    secondaryLighter: getCssVar('--chart-secondary-lighter'),
    secondaryLightest: getCssVar('--chart-secondary-lightest'),
    secondaryPale: getCssVar('--chart-secondary-pale')
  };

  // 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: [chartColors.primary, chartColors.secondary],
          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: [chartColors.warning, chartColors.primary],
          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: [
          chartColors.primary,
          chartColors.primaryLight,
          chartColors.primaryLighter,
          chartColors.primaryLightest,
          chartColors.primaryPale,
          chartColors.secondary,
          chartColors.secondaryLight,
          chartColors.secondaryLighter,
          chartColors.secondaryLightest,
          chartColors.secondaryPale
        ],
        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: [
          chartColors.primary,
          chartColors.primaryLight,
          chartColors.primaryLighter,
          chartColors.primaryLightest,
          chartColors.primaryPale,
          chartColors.secondary,
          chartColors.secondaryLight,
          chartColors.secondaryLighter,
          chartColors.secondaryLightest,
          chartColors.secondaryPale
        ],
        borderWidth: 0,
        hoverOffset: 4
      }]
    };

    new Chart(trashTypeCtx, {
      type: 'doughnut',
      data: trashTypeData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%'
      }
    });
  }
});
</script>
{% endblock %}