Flask-Files/app/templates/dashboard.html

{% extends "base.html" %}

{% block title %}Dashboard - Flask Files{% endblock %}

{% block extra_css %}
<style>
    .dashboard {
        max-width: 1200px;
        margin: 0 auto;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        cursor: pointer;
    }

    .section-header .toggle-icon {
        transition: transform 0.3s ease;
    }

    .section-header.collapsed .toggle-icon {
        transform: rotate(-90deg);
    }

    .collapsible-section {
        margin-bottom: 2rem;
        transition: max-height 0.5s ease;
        overflow: hidden;
    }

    .section-content {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .section-content.collapsed {
        opacity: 0;
        transform: translateY(-10px);
        display: none;
    }

    .quick-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .quick-access {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .quick-action {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 1rem;
        text-align: center;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .quick-action:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .quick-action i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        color: var(--primary-color);
    }
</style>
{% endblock %}

{% block content %}
<section class="dashboard">
    <h2>Dashboard</h2>

    <div class="quick-stats">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-folder"></i></div>
            <div class="stat-info">
                <span class="stat-value">{{ total_folders }}</span>
                <span class="stat-label">Folders</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-file"></i></div>
            <div class="stat-info">
                <span class="stat-value">{{ total_files }}</span>
                <span class="stat-label">Files</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-link"></i></div>
            <div class="stat-info">
                <span class="stat-value">{{ active_shares }}</span>
                <span class="stat-label">Active Shares</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-clock"></i></div>
            <div class="stat-info">
                <span class="stat-value">{{ recent_activities|default(0) }}</span>
                <span class="stat-label">Recent Activities</span>
            </div>
        </div>
    </div>

    <div class="quick-access">
        <a href="{{ url_for('files.upload') }}" class="quick-action">
            <i class="fas fa-cloud-upload-alt"></i>
            <div>Upload Files</div>
        </a>
        <a href="{{ url_for('files.browser') }}" class="quick-action">
            <i class="fas fa-folder-open"></i>
            <div>Browse Files</div>
        </a>
        <a href="#" class="quick-action">
            <i class="fas fa-share-alt"></i>
            <div>Manage Shares</div>
        </a>
        <a href="{{ url_for('auth.profile') }}" class="quick-action">
            <i class="fas fa-user-cog"></i>
            <div>Settings</div>
        </a>
    </div>

    <!-- Recent Files Section (Collapsible) -->
    <div class="collapsible-section" id="recent-files-section">
        <div class="section-header" data-target="recent-files-content">
            <h3><i class="fas fa-clock"></i> Recent Files</h3>
            <span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
        </div>
        <div class="section-content" id="recent-files-content">
            {% if recent_files %}
            <div class="files-grid grid-view">
                {% for file in recent_files %}
                <a href="{{ url_for('files.download', file_id=file.id) }}" class="file-item" data-id="{{ file.id }}">
                    <div class="item-icon">
                        <i class="fas {{ file_icon(file.mime_type, file.name) }}"></i>
                    </div>
                    <div class="item-info">
                        <div class="item-name">{{ file.name }}</div>
                        <div class="item-details">
                            <span class="item-size">{{ format_size(file.size) }}</span>
                            <span class="item-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p>No files uploaded yet. <a href="{{ url_for('files.upload') }}">Upload your first file</a>.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Quick Folder View (Collapsible) -->
    <div class="collapsible-section" id="folders-section">
        <div class="section-header" data-target="folders-content">
            <h3><i class="fas fa-folder"></i> My Folders</h3>
            <span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
        </div>
        <div class="section-content" id="folders-content">
            {% if root_folders %}
            <div class="files-grid grid-view">
                {% for folder in root_folders %}
                <a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="folder-item"
                    data-id="{{ folder.id }}">
                    <div class="item-icon">
                        <i class="fas fa-folder"></i>
                    </div>
                    <div class="item-info">
                        <div class="item-name">{{ folder.name }}</div>
                        <div class="item-details">
                            <span class="item-count">{{ folder.children.count() }} items</span>
                            <span class="item-date">{{ folder.created_at.strftime('%b %d, %Y') }}</span>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p>No folders created yet. <a href="{{ url_for('files.browser') }}">Create your first folder</a>.</p>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Set up collapsible sections
        const sectionHeaders = document.querySelectorAll('.section-header');

        sectionHeaders.forEach(header => {
            header.addEventListener('click', function () {
                const targetId = this.getAttribute('data-target');
                const content = document.getElementById(targetId);

                this.classList.toggle('collapsed');
                content.classList.toggle('collapsed');

                // Store preference in localStorage
                localStorage.setItem(`section_${targetId}`, content.classList.contains('collapsed') ? 'closed' : 'open');
            });

            // Check localStorage for saved preferences
            const targetId = header.getAttribute('data-target');
            const savedState = localStorage.getItem(`section_${targetId}`);

            if (savedState === 'closed') {
                header.classList.add('collapsed');
                document.getElementById(targetId).classList.add('collapsed');
            }
        });
    });
</script>
{% endblock %}