0969436abd
Add aria-hidden="true" to decorative Font Awesome icons across templates, aria-label to icon-only buttons, aria-live to dynamic content regions, aria-labelledby to modals, aria-expanded to toggle buttons, scope="col" to table headers, and aria-label to tables. Also improve alt text on 500.html error image and add aria-label to password toggle buttons. Templates updated: settings.html, credentials.html, status_dashboard.html, file_view.html, file_detail.html, index.html, queue_dashboard.html, audit_log.html, 500.html Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
160 lines
7.7 KiB
HTML
160 lines
7.7 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Dashboard – DocuElevate{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container mx-auto px-4 py-8">
|
||
|
||
<!-- Hero / Quick Actions -->
|
||
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg text-white p-8 mb-8">
|
||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||
<div>
|
||
<h1 class="text-3xl font-bold mb-1">DocuElevate Dashboard</h1>
|
||
<p class="text-blue-100 text-sm">Intelligent document processing & management</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a href="/upload" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center shadow-sm">
|
||
<i class="fas fa-upload mr-2" aria-hidden="true"></i> Upload
|
||
</a>
|
||
<a href="/files" class="bg-transparent border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center">
|
||
<i class="fas fa-list mr-2" aria-hidden="true"></i> Browse Files
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Row -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
|
||
<div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
|
||
<div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-file-alt text-blue-600 text-xl" aria-hidden="true"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl font-bold text-blue-600">{{ stats.processed_files | default(0) }}</p>
|
||
<p class="text-gray-500 text-sm">Documents Processed</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
|
||
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-plug text-green-600 text-xl" aria-hidden="true"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl font-bold text-green-600">{{ stats.active_integrations | default(0) }}</p>
|
||
<p class="text-gray-500 text-sm">Active Integrations</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
|
||
<div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-database text-indigo-600 text-xl" aria-hidden="true"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl font-bold text-indigo-600">{{ stats.storage_targets | default(0) }}</p>
|
||
<p class="text-gray-500 text-sm">Storage Targets</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Widget Grid -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||
|
||
<!-- Quick Actions Widget -->
|
||
<div class="bg-white rounded-xl shadow p-6">
|
||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||
<i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> Quick Actions
|
||
</h2>
|
||
<ul class="space-y-2">
|
||
<li>
|
||
<a href="/upload" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
|
||
<span class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 group-hover:bg-blue-200">
|
||
<i class="fas fa-upload text-blue-600 text-sm" aria-hidden="true"></i>
|
||
</span>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-800">Upload Document</p>
|
||
<p class="text-xs text-gray-400">Process a new file</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="/files" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
|
||
<span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 group-hover:bg-indigo-200">
|
||
<i class="fas fa-list text-indigo-600 text-sm" aria-hidden="true"></i>
|
||
</span>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-800">View All Files</p>
|
||
<p class="text-xs text-gray-400">Browse processed documents</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="/status" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
|
||
<span class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 group-hover:bg-green-200">
|
||
<i class="fas fa-heartbeat text-green-600 text-sm" aria-hidden="true"></i>
|
||
</span>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-800">System Status</p>
|
||
<p class="text-xs text-gray-400">Check integration health</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Capabilities Widget -->
|
||
<div class="bg-white rounded-xl shadow p-6">
|
||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||
<i class="fas fa-cubes text-blue-500" aria-hidden="true"></i> Capabilities
|
||
</h2>
|
||
<ul class="space-y-3 text-sm text-gray-600">
|
||
<li class="flex items-start gap-2">
|
||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||
<span>OCR & metadata extraction with AI</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||
<span>Cloud storage: Dropbox, OneDrive, Google Drive, NextCloud</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||
<span>Paperless-ngx integration for document management</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||
<span>Email & URL-based document ingestion</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
|
||
<span>Automated classification & routing workflows</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Getting Started / Help Widget -->
|
||
<div class="bg-white rounded-xl shadow p-6 flex flex-col justify-between">
|
||
<div>
|
||
<h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||
<i class="fas fa-compass text-indigo-500" aria-hidden="true"></i> Getting Started
|
||
</h2>
|
||
<ol class="space-y-3 text-sm text-gray-600 list-none">
|
||
<li class="flex items-start gap-2">
|
||
<span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">1</span>
|
||
Configure integrations via <a href="/status" class="text-blue-600 hover:underline">System Status</a>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">2</span>
|
||
<a href="/upload" class="text-blue-600 hover:underline">Upload</a> your first document
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">3</span>
|
||
Review results in <a href="/files" class="text-blue-600 hover:underline">Files</a>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<a href="/about" class="mt-6 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
|
||
Learn more about DocuElevate <i class="fas fa-arrow-right ml-1 text-xs" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
{% endblock %}
|
||
|