SMTP-to-Pushover/views/dashboard.ejs

<div class="container-fluid">
  <h1 class="h3 mb-4">Tableau de bord</h1>
  
  <div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                Emails totaux</div>
              <div class="h5 mb-0 font-weight-bold text-gray-800" id="total-count"><%= totalCount %></div>
            </div>
            <div class="col-auto">
              <i class="fas fa-envelope fa-2x text-gray-300"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
      <div class="card border-left-warning shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                Emails non lus</div>
              <div class="h5 mb-0 font-weight-bold text-gray-800" id="unread-count"><%= unreadCount %></div>
            </div>
            <div class="col-auto">
              <i class="fas fa-envelope-open fa-2x text-gray-300"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
          <h6 class="m-0 font-weight-bold text-primary">Derniers emails reçus</h6>
          <a href="/emails" class="btn btn-sm btn-primary">Voir tous les emails</a>
        </div>
        <div class="card-body">
          <% if(latestEmails && latestEmails.length > 0) { %>
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th scope="col">Date</th>
                    <th scope="col">De</th>
                    <th scope="col">Sujet</th>
                    <th scope="col">Statut</th>
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody id="latest-emails">
                  <% latestEmails.forEach(email => { %>
                    <tr>
                      <td><%= new Date(email.receivedAt).toLocaleString() %></td>
                      <td><%= email.from %></td>
                      <td><%= email.subject %></td>
                      <td>
                        <% if(email.read) { %>
                          <span class="badge bg-success">Lu</span>
                        <% } else { %>
                          <span class="badge bg-warning">Non lu</span>
                        <% } %>
                      </td>
                      <td>
                        <a href="/emails/<%= email.id %>" class="btn btn-sm btn-info">
                          <i class="fas fa-eye"></i>
                        </a>
                      </td>
                    </tr>
                  <% }); %>
                </tbody>
              </table>
            </div>
          <% } else { %>
            <div class="text-center py-4">
              <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
              <p>Aucun email reçu pour le moment.</p>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-12">
      <div class="card shadow mb-4">
        <div class="card-header py-3">
          <h6 class="m-0 font-weight-bold text-primary">Statut du serveur</h6>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <p><strong>Serveur SMTP :</strong> <span class="text-success">Actif sur <%= settings.smtp?.host || '0.0.0.0' %>:<%= settings.smtp?.port || '2525' %></span></p>
              <p><strong>Mode TLS :</strong> 
                <% if(settings.smtp?.secure) { %>
                <span class="text-success">Activé</span>
                <% } else { %>
                <span class="text-warning">Désactivé</span>
                <% } %>
              </p>
            </div>
            <div class="col-md-6">
              <p><strong>Notifications Pushover :</strong> 
                <% if(settings.pushover?.user && settings.pushover?.token) { %>
                  <span class="text-success">Configurées</span>
                <% } else { %>
                  <span class="text-danger">Non configurées</span>
                <% } %>
              </p>
              <p><strong>Priorité des notifications :</strong> 
                <% 
                  let priorityText = "Normale";
                  let priorityClass = "text-info";
                  
                  if(settings.pushover?.priority === -2) {
                    priorityText = "Très basse";
                    priorityClass = "text-muted";
                  } else if(settings.pushover?.priority === -1) {
                    priorityText = "Basse";
                    priorityClass = "text-secondary";
                  } else if(settings.pushover?.priority === 1) {
                    priorityText = "Haute";
                    priorityClass = "text-warning";
                  } else if(settings.pushover?.priority === 2) {
                    priorityText = "Urgente";
                    priorityClass = "text-danger";
                  }
                %>
                <span class="<%= priorityClass %>"><%= priorityText %></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>