dashboard.html

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Dashboard | ROMME_Net</title>
    <link rel="icon" href="/imagens/icone.svg" type="image/svg+xml" />

    <!-- CSS do Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />

    <!-- Ícones do Bootstrap -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
    />

    <!-- CSS da página -->
    <link href="/styles/dashboard.css" rel="stylesheet" />

    <!-- CSS do footer-->
    <link rel="stylesheet" href="/styles/footer.css" />
  </head>

  <body class="bg-light">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
      <div class="container-xl">
        <button
          class="navbar-toggler me-3 border-white shadow-none ps-2 pe-0"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#navbar-menu"
        >
          <span class="navbar-toggler-icon fs-6"></span>
        </button>

        <a class="navbar-brand me-auto" href="#">
          <img src="/imagens/logo.svg" alt="Logo da ROMME_Net" height="27" />
        </a>

        <div class="offcanvas offcanvas-start" id="navbar-menu" tabindex="-1">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title">ROMME_net</h5>
            <button
              type="button"
              class="btn-close text-reset"
              data-bs-dismiss="offcanvas"
            ></button>
          </div>

          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 me-3">
              <li class="nav-item">
                <a class="nav-link active" href="/dashboard.html">Dashboard</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="/ocorrencias.html">
                  Ocorrências
                </a>
              </li>

              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  role="button"
                  data-bs-toggle="dropdown"
                >
                  Outros
                </a>

                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="/materiais.html">Materiais</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="/maquinas.html">Máquinas</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="/prestadores.html">
                      Prestadores
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="/servicos.html">Serviços</a>
                  </li>
                  <li><hr class="dropdown-divider" /></li>
                  <li>
                    <a class="dropdown-item" href="/usuarios.html">Usuários</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>

        <a class="btn btn-primary" href="/nova-ocorrencia.html">
          Nova ocorrência
        </a>

        <div class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle py-0"
            href="#"
            role="button"
            data-bs-toggle="dropdown"
          >
            <div class="btn btn-primary rounded-circle">
              <strong>C</strong>
            </div>
          </a>

          <div class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">Sair</a></li>
          </div>
        </div>
      </div>
    </nav>

    <main>
      <!-- Visão Geral das Ocorrências - Cards -->
      <section id="cards-resumo">
        <div class="container-xl">
          <div class="row gy-3">
            <div class="col-sm-6 col-lg-3">
              <div class="card shadow-sm text-center py-2">
                <div class="card-body">
                  <p class="text-primary fs-1 fw-bold mb-1">29</p>
                  <p class="mb-2 fw-bold">Ocorrências este mês</p>
                </div>
              </div>
            </div>

            <div class="col-sm-6 col-lg-3">
              <div class="card shadow-sm text-center py-2">
                <div class="card-body">
                  <p class="text-primary fs-1 fw-bold mb-1">08</p>
                  <p class="mb-2 fw-bold">Ocorrências esta semana</p>
                </div>
              </div>
            </div>

            <div class="col-sm-6 col-lg-3">
              <div class="card shadow-sm text-center py-2">
                <div class="card-body">
                  <p class="text-primary fs-1 fw-bold mb-1">03</p>
                  <p class="mb-2 fw-bold">Ocorrências hoje</p>
                </div>
              </div>
            </div>

            <div class="col-sm-6 col-lg-3">
              <div class="card shadow-sm text-center py-2">
                <div class="card-body">
                  <p class="text-primary fs-1 fw-bold mb-1">R$ 3521,45</p>
                  <p class="mb-2 fw-bold">Total gasto no último mês</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Lista de máquinas com mais despesa e das últimas ocorrências -->
      <section class="container-xl mt-4 mb-4">
        <div class="row gy-4">
          <div class="col-md-6">
            <div class="card" id="maquinas-com-mais-despesas">
              <div class="card-body">
                <h5 class="card-title">Máquinas com maior aumento de gastos</h5>
                <h6 class="card-subtitle text-muted">
                  Registros no último mês
                </h6>
              </div>

              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <span class="text-truncate me-2">Fresadora CNC</span>
                  <span class="badge rounded-pill bg-danger">&uarr; 53%</span>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">Compressor</span>
                  <span class="badge rounded-pill bg-danger">&uarr; 45%</span>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">Pulverizador</span>
                  <span class="badge rounded-pill bg-danger">&uarr; 40%</span>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">Forno de Indução</span>
                  <span class="badge rounded-pill bg-warning text-dark"
                    >&uarr; 20%</span
                  >
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">Torno Mecânico </span>
                  <span class="badge rounded-pill bg-warning text-dark"
                    >&uarr; 15%</span
                  >
                </li>
              </ul>
            </div>
          </div>

          <!-- Últimas Ocorrências -->
          <div class="col-md-6">
            <div class="card" id="ultimas-ocorrencias">
              <div class="card-body">
                <h5 class="card-title">Últimas ocorrências</h5>
                <h6 class="card-subtitle text-muted">
                  Ocorrências registradas nas últimas 24 horas
                </h6>
              </div>

              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <span class="text-truncate me-2">
                    Compressores: Manutenção preventiva - troca dos filtros de
                    ar
                  </span>
                  <small class="text-muted text-nowrap">20 minutos atrás</small>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">
                    Torno Mecânico: Manutenção corretiva - ajuste cabeçote móvel
                  </span>
                  <small class="text-muted text-nowrap">4 horas atrás</small>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">
                    Fresadora: Manutenção preventiva - lubrificação
                  </span>
                  <small class="text-muted text-nowrap">5 horas atrás</small>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">
                    Fresadora: Manutenção preventiva - lubrificação
                  </span>
                  <small class="text-muted text-nowrap">5 horas atrás</small>
                </li>

                <li class="list-group-item">
                  <span class="text-truncate me-2">
                    Fresadora: Manutenção preventiva - lubrificação
                  </span>
                  <small class="text-muted text-nowrap">5 horas atrás</small>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- Gráfico sobre o gasto mensal -->
      <div class="container-xl mb-4">
        <div class="card" id="grafico-gasto-mensal">
          <div class="card-body">
            <canvas></canvas>
          </div>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer>
      <div class="flex py-2 bg-primary text-light">
        <div class="container-lg d-flex align-items-center">
          <span class="fw-bold me-auto">Entre em contato com a gente!</span>

          <i class="bi bi-facebook ms-4"></i>
          <i class="bi bi-twitter ms-4"></i>
          <i class="bi bi-instagram ms-4"></i>
          <i class="bi bi-github ms-4"></i>
        </div>
      </div>

      <div class="bg-dark text-white py-4">
        <div class="container-lg my-3">
          <div class="row gy-4">
            <section class="col-sm-5">
              <h1>ROMME_Net</h1>

              <p class="text-white">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
                auctor eleifend nisl, ut pellentesque urna. Suspendisse rutrum
                augue ultrices, cursus libero sed, tincidunt erat. Ut aliquet
                rhoncus tristique.
              </p>

              <p style="color: #ddd">&copy;2021</p>
            </section>

            <section class="col-sm">
              <h1>Serviços e Suporte</h1>

              <ul>
                <li><a href="#">Visão Geral</a></li>
                <li><a href="#">Perguntas frequentes</a></li>
                <li><a href="#">Suporte especializado</a></li>
                <li><a href="#">Ajuda</a></li>
              </ul>
            </section>

            <section class="col-sm">
              <h1>Privacidade</h1>

              <ul>
                <li><a href="#">Termos de uso</a></li>
                <li><a href="#">Política de privacidade</a></li>
              </ul>
            </section>

            <section class="col-sm">
              <h1>Sobre</h1>

              <ul>
                <li><a href="#">Sobre a empresa</a></li>
                <li><a href="#">Quem somos?</a></li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </footer>

    <!-- JS do Bootstrap -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
      crossorigin="anonymous"
    ></script>

    <!-- JS do Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>

    <!-- Gráfico de linhas - Quantidade ocorrências corretivas mensais -->
    <script src="/scripts/dashboard.js"></script>
  </body>
</html>