Spaces:
Running
Running
File size: 7,652 Bytes
d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 bb59211 d646dd7 849e0ae d646dd7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | {% extends "base.html" %}
{% block title %}Home — EgoData{% endblock %}
{% block content %}
<div class="flex-1 overflow-y-auto hide-scrollbar p-6">
<!-- Header -->
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold text-gray-200" data-i18n="overview_title">{{ t('overview_title') }}</h2>
<button id="btn-refresh" onclick="refreshDashboard()"
class="bg-gray-800 hover:bg-gray-700 text-gray-300 text-xs px-3 py-1.5 rounded flex items-center gap-1.5 transition-colors">
<iconify-icon icon="ant-design:reload-outlined" class="icon-sm"></iconify-icon>
<span data-i18n="refresh">{{ t('refresh') }}</span>
</button>
</div>
<!-- ===== Row 1: 4 Stat Cards ===== -->
<div class="grid grid-cols-4 gap-4 mb-6" id="stat-cards">
<div class="stat-card-skeleton bg-gray-900 rounded-lg p-4 border border-gray-800 skeleton"><div class="h-3 bg-gray-700 rounded w-16 mb-2"></div><div class="h-7 bg-gray-700 rounded w-20 mb-1"></div><div class="h-2 bg-gray-700 rounded w-12"></div></div>
<div class="stat-card-skeleton bg-gray-900 rounded-lg p-4 border border-gray-800 skeleton"><div class="h-3 bg-gray-700 rounded w-16 mb-2"></div><div class="h-7 bg-gray-700 rounded w-20 mb-1"></div><div class="h-2 bg-gray-700 rounded w-12"></div></div>
<div class="stat-card-skeleton bg-gray-900 rounded-lg p-4 border border-gray-800 skeleton"><div class="h-3 bg-gray-700 rounded w-16 mb-2"></div><div class="h-7 bg-gray-700 rounded w-20 mb-1"></div><div class="h-2 bg-gray-700 rounded w-12"></div></div>
<div class="stat-card-skeleton bg-gray-900 rounded-lg p-4 border border-gray-800 skeleton"><div class="h-3 bg-gray-700 rounded w-16 mb-2"></div><div class="h-7 bg-gray-700 rounded w-20 mb-1"></div><div class="h-2 bg-gray-700 rounded w-12"></div></div>
</div>
<div id="stat-cards-real" class="hidden grid grid-cols-4 gap-4 mb-6">
<!-- All Episodes -->
<div class="bg-gray-900 rounded-lg p-4 border border-gray-800 border-b-2 border-b-slate-500">
<div class="flex items-center gap-2 text-slate-400 text-xs mb-2">
<iconify-icon icon="ant-design:database-outlined" class="icon-sm"></iconify-icon>
<span data-i18n="stat_total">{{ t('stat_total') }}</span>
</div>
<div class="text-2xl font-bold text-white" id="stat-total-total">-</div>
<div class="text-xs text-slate-400 mt-1 hidden" id="stat-total-today"></div>
</div>
<!-- To Review -->
<div class="bg-gray-900 rounded-lg p-4 border border-gray-800 border-b-2 border-b-yellow-500">
<div class="flex items-center gap-2 text-yellow-400 text-xs mb-2">
<iconify-icon icon="ant-design:eye-outlined" class="icon-sm"></iconify-icon>
<span data-i18n="stat_to_review">{{ t('stat_to_review') }}</span>
</div>
<div class="text-2xl font-bold text-white" id="stat-reviewing-total">-</div>
<div class="text-xs text-yellow-400 mt-1 hidden" id="stat-reviewing-today"></div>
</div>
<!-- Approved -->
<div class="bg-gray-900 rounded-lg p-4 border border-gray-800 border-b-2 border-b-green-500">
<div class="flex items-center gap-2 text-green-400 text-xs mb-2">
<iconify-icon icon="ant-design:check-circle-outlined" class="icon-sm"></iconify-icon>
<span data-i18n="stat_approved">{{ t('stat_approved') }}</span>
</div>
<div class="text-2xl font-bold text-white" id="stat-approved-total">-</div>
<div class="text-xs text-green-400 mt-1 hidden" id="stat-approved-today"></div>
</div>
<!-- Failed (current failed episodes; historical run failures stay in Exceptions) -->
<div class="bg-gray-900 rounded-lg p-4 border border-gray-800 border-b-2 border-b-red-500">
<div class="flex items-center gap-2 text-red-400 text-xs mb-2">
<iconify-icon icon="ant-design:warning-outlined" class="icon-sm"></iconify-icon>
<span data-i18n="stat_failed">{{ t('stat_failed') }}</span>
</div>
<div class="text-2xl font-bold text-white" id="stat-failed-total">-</div>
</div>
</div>
<!-- Error banner -->
<div id="stat-error" class="hidden bg-red-900/30 border border-red-800 rounded-lg p-4 mb-6 flex items-center justify-between">
<div class="flex items-center gap-2 text-red-300 text-sm">
<iconify-icon icon="ant-design:warning-outlined" class="icon-sm"></iconify-icon>
<span data-i18n="load_failed_stats">{{ t('load_failed_stats') }}</span>
</div>
<button onclick="refreshDashboard()" class="bg-red-800 hover:bg-red-700 text-red-200 text-xs px-3 py-1 rounded"><span data-i18n="retry">{{ t('retry') }}</span></button>
</div>
<!-- ===== Row 2: Charts ===== -->
<div class="grid grid-cols-2 gap-6 mb-6">
<!-- Donut: Status Distribution -->
<div class="bg-gray-900 rounded-lg border border-gray-800 p-5">
<h3 class="text-sm font-semibold text-gray-300 mb-4"><span data-i18n="stat_distribution">{{ t('stat_distribution') }}</span></h3>
<div id="donut-chart" class="flex items-center justify-center">
<div class="skeleton w-48 h-48 bg-gray-800 rounded-full"></div>
</div>
</div>
<!-- Bar: Daily Uploads -->
<div class="bg-gray-900 rounded-lg border border-gray-800 p-5">
<h3 class="text-sm font-semibold text-gray-300 mb-4"><span data-i18n="daily_uploads">{{ t('daily_uploads') }}</span> <span class="text-xs text-gray-600 font-normal" data-i18n="last_30_days">{{ t('last_30_days') }}</span></h3>
<div id="trend-chart">
<div class="flex items-end gap-0.5 h-40 skeleton">
<div class="flex-1 bg-gray-800 rounded-t h-full"></div>
</div>
</div>
</div>
</div>
<!-- ===== Row 3: Projects + Recent Episodes ===== -->
<div class="grid grid-cols-2 gap-6">
<!-- Projects -->
<div class="bg-gray-900 rounded-lg border border-gray-800 p-5">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-gray-300"><span data-i18n="projects_title">{{ t('projects_title') }}</span></h3>
<a href="/tasks" class="text-xs text-blue-400 hover:text-blue-300"><span data-i18n="view_all">{{ t('view_all') }}</span> →</a>
</div>
<div id="task-progress-list">
<div class="space-y-3 skeleton">
<div class="h-10 bg-gray-800 rounded"></div>
<div class="h-10 bg-gray-800 rounded"></div>
<div class="h-10 bg-gray-800 rounded"></div>
</div>
</div>
</div>
<!-- Recent Episodes -->
<div class="bg-gray-900 rounded-lg border border-gray-800 p-5">
<h3 class="text-sm font-semibold text-gray-300 mb-4"><span data-i18n="recent_episodes">{{ t('recent_episodes') }}</span></h3>
<div id="recent-list">
<div class="space-y-3 skeleton">
<div class="h-10 bg-gray-800 rounded"></div>
<div class="h-10 bg-gray-800 rounded"></div>
<div class="h-10 bg-gray-800 rounded"></div>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/dashboard.js?v={{ asset_version }}"></script>
{% endblock %}
|