first
This commit is contained in:
471
templates/dashboard.html
Normal file
471
templates/dashboard.html
Normal file
@@ -0,0 +1,471 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dashboard - DocuPulse{% 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>
|
||||
|
||||
{% macro format_size(size) %}
|
||||
{% if size < 1024 %}
|
||||
{{ size }} B
|
||||
{% elif size < 1024 * 1024 %}
|
||||
{{ (size / 1024)|round(1) }} KB
|
||||
{% elif size < 1024 * 1024 * 1024 %}
|
||||
{{ (size / (1024 * 1024))|round(1) }} MB
|
||||
{% else %}
|
||||
{{ (size / (1024 * 1024 * 1024))|round(1) }} GB
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
<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">
|
||||
<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-database me-2" style="color:#16767b;"></i>Storage Overview</h5>
|
||||
<a href="{{ url_for('rooms.rooms') }}" class="btn btn-sm text-white" style="background-color:#16767b;">Browse</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-door-open me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Rooms:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ room_count }}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-file me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Files:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ file_count }}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-folder me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Folders:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ folder_count }}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-hdd me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Total Size:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ format_size(total_size) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="masonry-card">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="card-title mb-0"><i class="fas fa-history me-2" style="color:#16767b;"></i>Recent Activity</h5>
|
||||
<a href="{{ url_for('rooms.rooms') }}" class="btn btn-sm text-white" style="background-color:#16767b;">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="list-group list-group-flush">
|
||||
{% for activity in recent_activity %}
|
||||
<div class="list-group-item px-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
{% if activity.type == 'folder' %}
|
||||
<i class="fas fa-folder me-2" style="color:#16767b;"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-file me-2" style="color:#16767b;"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<h6 class="mb-0">{{ activity.name }}</h6>
|
||||
{% if activity.is_starred %}
|
||||
<span class="badge bg-warning text-dark ms-2" style="background-color: rgba(255,215,0,0.15) !important; color: #ffd700 !important;">
|
||||
<i class="fas fa-star me-1"></i>Starred
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if activity.is_deleted %}
|
||||
<span class="badge bg-danger ms-2" style="background-color: rgba(220,53,69,0.15) !important; color: #dc3545 !important;">
|
||||
<i class="fas fa-trash me-1"></i>Trash
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{{ activity.room.name }} •
|
||||
{{ activity.uploader.username }} {{ activity.uploader.last_name }} •
|
||||
{% if activity.uploaded_at %}{{ activity.uploaded_at|timeago }}{% else %}Unknown{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
{% if activity.type == 'file' and activity.can_download %}
|
||||
<a href="{{ url_for('room_files.download_room_file', room_id=activity.room.id, filename=activity.name, path=activity.path) }}"
|
||||
class="btn btn-sm text-white ms-2" style="background-color:#16767b; border-radius:6px; border:none; box-shadow:0 1px 2px rgba(22,118,123,0.08);" title="Download">
|
||||
<i class="fas fa-download"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" style="color:#16767b;"></i>Storage Usage</h5>
|
||||
<a href="{{ url_for('rooms.rooms') }}" class="btn btn-sm text-white" style="background-color:#16767b;">View Details</a>
|
||||
</div>
|
||||
{% if storage_by_type %}
|
||||
<div class="position-relative" style="height: 200px;">
|
||||
<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" style="color:#16767b;"></i>
|
||||
<span class="text-muted">{{ type.extension|upper }}:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ format_size(type.total_size) }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted small">No storage data available</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if current_user.is_admin %}
|
||||
<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-address-book me-2" style="color:#16767b;"></i>Recent Contacts</h5>
|
||||
<div>
|
||||
<a href="{{ url_for('contacts.contacts_list') }}" class="btn btn-sm text-white me-2" style="background-color:#16767b;">View All</a>
|
||||
<a href="{{ url_for('contacts.new_contact') }}" class="btn btn-sm text-white" style="background-color:#16767b;">+ Add</a>
|
||||
</div>
|
||||
</div>
|
||||
{% if recent_contacts %}
|
||||
<ul class="list-unstyled mb-3">
|
||||
{% for contact in recent_contacts %}
|
||||
<li class="mb-2">
|
||||
<div class="fw-semibold">{{ contact.first_name }} {{ contact.last_name }}</div>
|
||||
<div class="flex flex-wrap gap-2 mt-1">
|
||||
<a href="mailto:{{ contact.email }}"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-sm font-normal transition duration-200 no-underline"
|
||||
style="background-color: rgba(22,118,123,0.08); color: #16767b;">
|
||||
<i class="fas fa-envelope mr-1" style="font-size: 0.85em; opacity: 0.7;"></i>{{ contact.email }}
|
||||
</a>
|
||||
{% if contact.phone %}
|
||||
<a href="tel:{{ contact.phone }}"
|
||||
class="inline-flex items-center px-2 py-0.5 rounded text-sm font-normal transition duration-200 no-underline"
|
||||
style="background-color: rgba(22,118,123,0.08); color: #16767b;">
|
||||
<i class="fas fa-phone mr-1" style="font-size: 0.85em; opacity: 0.7;"></i>{{ contact.phone }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="text-muted small">No contacts yet.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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" style="color:#16767b;"></i>Contact Status</h5>
|
||||
<div>
|
||||
<a href="{{ url_for('contacts.contacts_list') }}" class="btn btn-sm text-white me-2" style="background-color:#16767b;">View All</a>
|
||||
<a href="{{ url_for('contacts.new_contact') }}" class="btn btn-sm text-white" style="background-color:#16767b;">+ Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative" style="height: 200px;">
|
||||
<canvas id="statusChart"></canvas>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center gap-4 mt-3">
|
||||
<div class="text-center">
|
||||
<div class="fw-bold" style="color:#16767b; font-size:1.5rem;">{{ active_count }}</div>
|
||||
<div class="text-muted small">Active</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="fw-bold" style="color:#741b5f; font-size:1.5rem;">{{ inactive_count }}</div>
|
||||
<div class="text-muted small">Inactive</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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-star me-2" style="color:#16767b;"></i>Starred Files</h5>
|
||||
<a href="{{ url_for('main.starred') }}" class="btn btn-sm text-white" style="background-color:#16767b;">View All</a>
|
||||
</div>
|
||||
<div class="position-relative" style="height: 200px;">
|
||||
<canvas id="starredChart"></canvas>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center gap-4 mt-3">
|
||||
<div class="text-center">
|
||||
<div class="fw-bold" style="color:#ffd700; font-size:1.5rem;">{{ starred_count }}</div>
|
||||
<div class="text-muted small">Starred</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="fw-bold" style="color:#16767b; font-size:1.5rem;">{{ file_count - starred_count }}</div>
|
||||
<div class="text-muted small">Unstarred</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-trash me-2" style="color:#16767b;"></i>Trash</h5>
|
||||
<a href="{{ url_for('main.trash') }}" class="btn btn-sm text-white" style="background-color:#16767b;">View All</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-file me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Files in trash:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ trash_count }}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-exclamation-triangle me-2" style="color:#dc3545;"></i>
|
||||
<span class="text-muted">Deleting in 7 days:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#dc3545;">{{ pending_deletion }}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-clock me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Oldest deletion:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ oldest_trash_date|default('N/A') }}</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-hdd me-2" style="color:#16767b;"></i>
|
||||
<span class="text-muted">Storage used:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ format_size(trash_size) }}</div>
|
||||
</div>
|
||||
<div class="alert alert-info mb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<div>
|
||||
<div class="fw-bold mb-1">Files will be permanently deleted after 30 days</div>
|
||||
<div class="small">You can restore files before they are permanently deleted</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-file-alt me-2" style="color:#16767b;"></i>Trash by Type</h5>
|
||||
<a href="{{ url_for('main.trash') }}" class="btn btn-sm text-white" style="background-color:#16767b;">View All</a>
|
||||
</div>
|
||||
{% if trash_by_type %}
|
||||
<div class="position-relative" style="height: 200px;">
|
||||
<canvas id="trashTypeChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
{% for type in trash_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" style="color:#16767b;"></i>
|
||||
<span class="text-muted">{{ type.extension|upper }}:</span>
|
||||
</div>
|
||||
<div class="fw-bold" style="color:#16767b;">{{ type.count }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted small">No files in trash</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 %}
|
||||
Reference in New Issue
Block a user