gmao/app_new/templates/planning/index.html

{% extends "base.html" %}
{% block title %}Planning — GMAO Collège{% endblock %}

{% block extra_head %}
<style>
.cal-day { min-height: 90px; }
@media (max-width: 767px) { .cal-day { min-height: 60px; } }
.cal-day.is-today { background: rgba(13,110,253,0.08); }
.cal-day.is-closed { background: repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,.03) 4px,rgba(0,0,0,.03) 8px); }
.cal-day.is-weekend { background: rgba(0,0,0,.03); }
.cal-day.outside-month { opacity: 0.4; }
.interv-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
</style>
{% endblock %}

{% block content %}
<div class="py-2 py-md-3">
  <!-- En-tête -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="mb-0 h5"><i class="bi bi-calendar3"></i> Planning</h2>
    <div class="btn-group btn-group-sm">
      <a href="{{ url_for('planning.availability') }}" class="btn btn-outline-primary"><i class="bi bi-clock"></i> <span class="d-none d-sm-inline">Horaires</span></a>
      <a href="{{ url_for('planning.help_page') }}" class="btn btn-outline-secondary"><i class="bi bi-question-circle"></i> <span class="d-none d-sm-inline">Aide</span></a>
    </div>
  </div>

  <!-- Stats -->
  <div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm"><div class="card-body py-2 px-3 text-center">
        <div class="text-danger fw-bold fs-5">{{ overdue }}</div>
        <small class="text-muted">En retard</small>
      </div></div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm"><div class="card-body py-2 px-3 text-center">
        <div class="text-warning fw-bold fs-5">{{ due_this_week }}</div>
        <small class="text-muted">Cette semaine</small>
      </div></div>
    </div>
    <div class="col-6 col-md-3 d-none d-md-block">
      <div class="card border-0 shadow-sm"><div class="card-body py-2 px-3 text-center">
        <div class="text-muted">{{ closures|length }}</div>
        <small class="text-muted">Fermetures à venir</small>
      </div></div>
    </div>
    <div class="col-6 col-md-3 d-none d-md-block">
      <div class="card border-0 shadow-sm"><div class="card-body py-2 px-3 text-center">
        <div class="text-muted">{{ leaves|length }}</div>
        <small class="text-muted">Congés à venir</small>
      </div></div>
    </div>
  </div>

  <!-- Navigation mois -->
  <div class="d-flex justify-content-between align-items-center mb-2">
    <a href="{{ url_for('planning.index', start=prev_period.strftime('%Y-%m-%d')) }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-chevron-left"></i>
    </a>
    <h3 class="mb-0 h6 text-capitalize">{{ month_label }}</h3>
    <a href="{{ url_for('planning.index', start=next_period.strftime('%Y-%m-%d')) }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-chevron-right"></i>
    </a>
  </div>

  <!-- Calendrier desktop -->
  <div class="card border-0 shadow-sm d-none d-md-block">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-bordered mb-0" style="table-layout:fixed;">
          <thead class="table-light">
            <tr>
              <th class="text-center" style="width:14%">Lun</th>
              <th class="text-center" style="width:14%">Mar</th>
              <th class="text-center" style="width:14%">Mer</th>
              <th class="text-center" style="width:14%">Jeu</th>
              <th class="text-center" style="width:14%">Ven</th>
              <th class="text-center" style="width:14%">Sam</th>
              <th class="text-center" style="width:14%">Dim</th>
            </tr>
          </thead>
          <tbody>
          {% for week in weeks %}
          <tr>
            {% for day in week %}
            <td class="cal-day align-top p-1 {% if day.is_today %}is-today{% endif %} {% if day.is_closed and not day.is_weekend %}is-closed{% endif %} {% if day.is_weekend %}is-weekend{% endif %} {% if day.outside_month %}outside-month{% endif %}">
              <div class="d-flex justify-content-between">
                <small class="{% if day.is_today %}badge bg-primary rounded-pill{% endif %}">{{ day.date.day }}</small>
                {% if day.is_on_leave %}<span class="interv-dot bg-info" title="Congé"></span>{% endif %}
              </div>
              {% for cl in day.closures %}
              <div><small class="text-muted" style="font-size:0.65rem;">{{ cl.label[:20] }}</small></div>
              {% endfor %}
              {% for interv in day.interventions %}
              <a href="{{ url_for('interventions.detail', id=interv.id) }}" class="d-block mb-1" style="font-size:0.7rem;text-decoration:none;">
                <span class="interv-dot bg-primary"></span> {{ interv.title[:18] }}{% if interv.title|length > 18 %}…{% endif %}
              </a>
              {% endfor %}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Calendrier mobile : liste jours -->
  <div class="d-md-none">
    {% for week in weeks %}
    {% for day in week %}
    {% if not day.outside_month and (day.interventions or day.closures or day.is_today) %}
    <div class="card border-0 shadow-sm mb-1 {% if day.is_today %}border-start border-primary border-3{% endif %}">
      <div class="card-body py-2 px-3">
        <div class="d-flex justify-content-between align-items-start">
          <strong style="font-size:0.9rem;">
            {% if day.is_today %}<span class="badge bg-primary me-1">Auj.</span>{% endif %}
            {{ day.date|date_fmt }}
          </strong>
          {% if day.is_closed %}
          <span class="badge bg-secondary" style="font-size:0.65rem;">Fermé</span>
          {% elif day.is_on_leave %}
          <span class="badge bg-info" style="font-size:0.65rem;">Congé</span>
          {% endif %}
        </div>
        {% for cl in day.closures %}
        <small class="text-muted d-block" style="font-size:0.75rem;">🏖 {{ cl.label }}</small>
        {% endfor %}
        {% for interv in day.interventions %}
        <a href="{{ url_for('interventions.detail', id=interv.id) }}" class="d-block mt-1" style="font-size:0.8rem;text-decoration:none;">
          <i class="bi bi-wrench text-primary"></i> {{ interv.title }}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    {% endfor %}
    {% endfor %}
    {% if not weeks|length %}
    <div class="text-center py-4 text-muted">
      <i class="bi bi-calendar-x" style="font-size:2rem;"></i>
      <p class="mt-2 small">Aucun événement ce mois-ci</p>
    </div>
    {% endif %}
  </div>

</div>
{% endblock %}