|
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %}Dashboard - Retoor's Cloud Solutions{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="/static/css/components/dashboard.css">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="dashboard-layout">
|
|
<aside class="dashboard-sidebar">
|
|
<div class="sidebar-menu">
|
|
<ul>
|
|
<li><a href="/files" class="active"><img src="/static/images/icon-families.svg" alt="My Files Icon" class="icon"> My Files</a></li>
|
|
<li><a href="/shared"><img src="/static/images/icon-professionals.svg" alt="Shared Icon" class="icon"> Shared with me</a></li>
|
|
<li><a href="/recent"><img src="/static/images/icon-students.svg" alt="Recent Icon" class="icon"> Recent</a></li>
|
|
<li><a href="/favorites"><img src="/static/images/icon-families.svg" alt="Favorites Icon" class="icon"> Favorites</a></li>
|
|
<li><a href="/trash"><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sidebar-storage-quota">
|
|
<h4>Storage Used</h4>
|
|
<div class="storage-gauge">
|
|
<div class="storage-gauge-bar" style="width: {{ (user.storage_used_gb / user.storage_quota_gb) * 100 }}%;"></div>
|
|
</div>
|
|
<div class="storage-info">
|
|
<span>{{ user.storage_used_gb }} GB used of {{ user.storage_quota_gb }} GB</span>
|
|
<span>{{ ((user.storage_used_gb / user.storage_quota_gb) * 100)|round(2) }}%</span>
|
|
</div>
|
|
<a href="/order" class="btn-primary" style="margin-top: 20px; display: block; text-align: center;">Manage Quota</a>
|
|
</div>
|
|
|
|
<div class="sidebar-notifications">
|
|
<h4>Notifications</h4>
|
|
{% if user.notifications %} {# Assuming user object has a notifications attribute #}
|
|
<ul>
|
|
{% for notification in user.notifications %}
|
|
<li>{{ notification }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p>No new notifications.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="sidebar-help">
|
|
<a href="/support" class="btn-outline" style="display: block; text-align: center;">Help & Support</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="dashboard-content">
|
|
<div class="dashboard-content-header">
|
|
<h2>Welcome back, {{ user.full_name }}!</h2>
|
|
<div class="dashboard-actions">
|
|
<button class="btn-primary" onclick="alert('+ New feature coming soon!')">+ New</button>
|
|
<button class="btn-outline" onclick="alert('Download feature coming soon!')">Download</button>
|
|
<button class="btn-outline" onclick="alert('Upload feature coming soon!')">Upload</button>
|
|
<button class="btn-outline" onclick="alert('Share feature coming soon!')">Share</button>
|
|
<button class="btn-outline" onclick="alert('Delete feature coming soon!')">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="text" class="file-search-bar" placeholder="Search your files...">
|
|
|
|
<div class="file-list-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Owner</th>
|
|
<th>Last Modified</th>
|
|
<th>Size</th>
|
|
<th></th> {# For action ellipsis #}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon"> documents.zip</td>
|
|
<td>{{ user.email }}</td>
|
|
<td>2025-11-08</td>
|
|
<td>256 MB</td>
|
|
<td><span class="action-ellipsis">...</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon"> photos.zip</td>
|
|
<td>{{ user.email }}</td>
|
|
<td>2025-11-07</td>
|
|
<td>1.2 GB</td>
|
|
<td><span class="action-ellipsis">...</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><img src="/static/images/icon-students.svg" alt="File Icon" class="file-icon"> project_alpha.zip</td>
|
|
<td>{{ user.email }}</td>
|
|
<td>2025-11-05</td>
|
|
<td>512 MB</td>
|
|
<td><span class="action-ellipsis">...</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
{% endblock %}
|