style: page home

This commit is contained in:
2025-01-20 10:57:39 -03:00
parent dfc5072142
commit 203c7345fb
5 changed files with 128 additions and 148 deletions

View File

@@ -1,13 +1,8 @@
{% extends "base.html" %}
{% load static %}
{% block 'head' %}
<link rel="stylesheet" href="{% static 'home/css/home.css' %}">
{% endblock %}
{% block 'title' %}
@@ -15,92 +10,62 @@ RRB&C - DashBoard
{% endblock %}
{% block 'body' %}
<body>
<div class="grid-container">
<h1>DashBoard</h1>
<div class="grid-container" style="grid-template-columns: repeat(2, 2fr);">
<input id="data-start" name="data-start" oninput="mediaCuisine()" type="date">
<input id="data-end" name="data-end" oninput="mediaCuisine()" type="date">
</div>
<h4 id="30-days"></h4>
<h4 id="30-days"></h4>
</div>
<div class="grid-container">
<div class="card-resumo">
<div >
<div>
<p> Faturamento </p>
<h2 id="total-pagamentos">Carregando... </h2>
</div>
<img src="{% static 'midia/icons/money-bag.svg' %}" >
<img src="{% static 'midia/icons/money-bag.svg' %}" >
</div>
<div class="card-resumo">
<div >
<div>
<p>Total de Vendas</p>
<h2 id="qtd-pagamentos">Carregando... </h2>
</div>
<img src="{% static 'midia/icons/cart.svg' %}" >
<img src="{% static 'midia/icons/cart.svg' %}" >
</div>
<div class="card-resumo">
<div >
<div>
<p>Ticket médio</p>
<h2 id="ticket-medio">Carregando... </h2>
</div>
<img src="{% static 'midia/icons/ticket.svg' %}" >
<img src="{% static 'midia/icons/ticket.svg' %}" >
</div>
<div class="card">
<hr>
<h4> Quantidade de vendas</h4>
<h5 id="qtd-pagamentos"> Carregando... </h5>
<hr>
<h4> Ticket médio </h4>
<h5 id="ticket-medio">Carregando...</h5>
<hr>
</div>
<div class="card">
<h4> Mais vendidos </h4>
<canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: #d3ebff;border-radius: 5px;">
</canvas>
<canvas id="vendas" style="width:100%;height: 85%;max-width:100%;"></canvas>
</div>
<div class="card">
<h4>Tempo médio na cozinha</h4>
<div style="
width:95%;
max-width:100%;
background-color: #d3ebff;
border-radius: 5px;
padding: 10px 30px 10px 30px;">
<canvas id="cuisine" style="width:80%;height: 65%;max-width:100%; border-radius: 5px;">
</canvas>
<div style="width:95%;max-width:100%;padding: 10px 30px 10px 30px;">
<canvas id="cuisine" style="width:80%;height: 65%;max-width:100%;"></canvas>
</div>
</div>
<div class="card">
<h4>Ranking atendente</h4>
<hr>
<p>1º - Atendente 1</p><p>2º - Atendente 2</p>
<p>3º - Atendente 3</p><p>4º - Atendente 4</p>
</div>
</div>
</div>
<h4>Faturamento anual</h4>
<div style="height: 350px;margin: 30px;">
<canvas id="mensal" style="width:100%;height: 100%;max-width:100%; background-color: #d3ebff;border-radius: 5px;">
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->
<!-- <div class="card-faturamento-anual"> -->
<canvas class="card-faturamento-anual" id="mensal" ></canvas>
<!-- </div> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<script src="{% static 'home/js/home.js' %}"></script>
</body>
{% endblock %}
{% endblock %}