76 lines
4.3 KiB
HTML
76 lines
4.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1">Panel general</h1>
|
|
<p class="text-muted mb-0">Vista rápida del equipo, la operación diaria y la agenda de esta semana.</p>
|
|
</div>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<a class="btn btn-outline-primary" href="{{ url_for('admin_calendar') }}">Abrir calendario semanal</a>
|
|
<a class="btn btn-primary" href="{{ url_for('admin_appointments') }}">Gestionar turnos</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Próximos</div><div class="metric-number">{{ stats.upcoming }}</div></div></div></div>
|
|
<div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Hoy</div><div class="metric-number">{{ stats.today }}</div></div></div></div>
|
|
<div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Completados</div><div class="metric-number">{{ stats.completed }}</div></div></div></div>
|
|
<div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Cancelados</div><div class="metric-number">{{ stats.cancelled }}</div></div></div></div>
|
|
<div class="col-md-6 col-xl"><div class="card metric-card emphasis"><div class="card-body"><div class="metric-label">Recordatorios pendientes</div><div class="metric-number">{{ stats.due_reminders }}</div></div></div></div>
|
|
</div>
|
|
|
|
<div class="card table-panel tabbed-card">
|
|
<ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
|
|
<li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-upcoming" type="button">Próximos turnos</button></li>
|
|
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-week" type="button">Semana en curso</button></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="tab-upcoming">
|
|
<div class="card-header d-flex justify-content-between align-items-center"><span class="fw-bold">Próximos turnos</span><a class="small text-decoration-none" href="{{ url_for('admin_appointments') }}">Ver todos</a></div>
|
|
<div class="table-responsive wide-table">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead><tr><th>Fecha</th><th>Hora</th><th>Cliente</th><th>Servicio</th><th>Profesional</th><th>Estado</th></tr></thead>
|
|
<tbody>
|
|
{% for item in upcoming %}
|
|
<tr>
|
|
<td>{{ item.appointment_date.strftime('%d/%m/%Y') }}</td>
|
|
<td>{{ item.start_time.strftime('%H:%M') }}</td>
|
|
<td>{{ item.client_name }}<br><span class="small text-muted">{{ item.client_email }}</span></td>
|
|
<td>{{ item.service.name }}</td>
|
|
<td>{{ item.professional.display_name }}</td>
|
|
<td><span class="badge rounded-pill text-bg-secondary">{{ item.status }}</span></td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="6" class="text-center text-muted py-4">No hay turnos para mostrar.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab-week">
|
|
<div class="card-header fw-bold">Semana en curso</div>
|
|
<div class="card-body p-0">
|
|
<div class="week-strip">
|
|
{% for day in week_dates %}
|
|
<div class="week-day-card">
|
|
<div class="week-day-header">{{ weekday_labels[day.weekday()] }}<span>{{ day.strftime('%d/%m') }}</span></div>
|
|
<div class="week-day-body">
|
|
{% for item in week_map[day.isoformat()] %}
|
|
<div class="mini-appointment" style="border-left-color: {{ item.professional.color or '#0d6efd' }};">
|
|
<strong>{{ item.start_time.strftime('%H:%M') }}</strong>
|
|
<div>{{ item.client_name }}</div>
|
|
<small>{{ item.professional.display_name }}</small>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-muted small">Sin turnos</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|