welton/RRBEC
1
0
Fork 0
mirror of https://github.com/welton89/RRBEC.git synced 2026-04-05 13:35:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: page home

Browse Source
This commit is contained in:
Welton Moura
2025-01-20 10:57:39 -03:00
parent dfc5072142
commit 203c7345fb
5 changed files with 128 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
gest Normal file
View File

BIN
gestaoRaul/db.sqlite3
View File

Binary file not shown.

77
gestaoRaul/home/templates/home.html
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 %}

150
gestaoRaul/templates/static/home/css/home.css
View File

@@ -1,83 +1,89 @@
.grid-container {
display: grid;
justify-content: center;
justify-items: center;
align-items: center;
grid-template-columns: repeat(3, 2fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}
display: grid;
justify-content: center;
justify-items: center;
align-items: center;
grid-template-columns: repeat(3, 2fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}
.card {
width: 420px;
height: 420px;
width: 420px;
height: 420px;
justify-items: center;
background: linear-gradient(135deg, #97cefa, #457bd1);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
line-height: 30px;
font-size: 20px;
font-weight: bold;
padding: 10px;
color: #333;
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.card-resumo {
display: grid;
grid-template-columns: 2fr 0.6fr ;
justify-content: space-between;
align-items: center;
width: 300px;
height: 130px;
background: linear-gradient(135deg, #1a237e, #3f51b5);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
}
.card-faturamento-anual {
justify-self: center;
align-items: center;
width: 80%;
max-height: 350px;
margin: 30px;
background: linear-gradient(135deg, #1a237e, #3f51b5);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
text-align: left;
line-height: 20px;
padding: 15px 30px 15px 30px;
}
.card-resumo h2 {
font-size: 35px;
margin: 0px;
color: #fff;
}
@media screen and (max-width: 730px) {
.grid-container {
justify-items: center;
background-color: #2b376e;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
display: grid;
width: 99%;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
margin: 5px;
}
.card {
width: 95%;
background: linear-gradient(135deg, #d3ebff, #a1c4fd);
text-align: center;
line-height: 30px;
font-size: 20px;
font-weight: bold;
padding: 10px;
color: #333;
transition: transform 0.2s;
}
.card-resumo {
display: grid;
grid-template-columns: 2fr 0.6fr ;
justify-content: space-between;
align-items: center;
width: 300px;
height: 130px;
background-color: #1a237e;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(156, 156, 156, 0.2);
text-align: left;
line-height: 20px;
/* scale: 0.9; */
/* font-size: 20px; */
/* font-weight: bold; */
padding: 15px 30px 15px 30px;
/* color: #333; */
/* transition: transform 0.2s; */
}
.card-resumo h2 {
/* color: #fff; */
font-size: 35px;
margin: 0px;
}
@media screen and (max-width: 730px) {
.grid-container {
justify-items: center;
display: grid;
width: 99%;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
margin: 5px;
}
.card {
width: 95%;
background-color: #2b376e;
text-align: center;
line-height: 30px;
font-size: 20px;
font-weight: bold;
padding: 10px;
color: #333;
transition: transform 0.2s;
}
transition: transform 0.2s, box-shadow 0.2s;
}
}

47
gestaoRaul/templates/static/home/js/home.js
View File

@@ -1,4 +1,3 @@
const barColors = ['rgba(252, 52, 95, 0.65)',
'rgba(253, 193, 53, 0.65)',
'rgba(54, 162, 235, 0.65)',
@@ -17,7 +16,6 @@ var chartVendas = new Chart("vendas", {
labels: [],
datasets: [{
fill: true,
// barPercentage: 1.0,
data: [],
backgroundColor: barColors,
borderColor: barColorsBorder,
@@ -26,30 +24,28 @@ var chartVendas = new Chart("vendas", {
}]
},
options: {
indexAxis: 'y',
scales: {
y: {
ticks: {
display: true,
// color: 'white'
// padding: 5,
callback: function(value, index, values) {
return chartVendas.data.labels[index].substring(0, 6); // Retorna o valor normal do label
return chartVendas.data.labels[index].substring(0, 6);
},
}
},
},
legend: {display: false},
legend: {
display: true,
labels: {
color: 'white'
}
},
title: {
display: false,
text: "Produtos mais vendidos"
},
},
});
var chartCuisine = new Chart("cuisine", {
@@ -62,7 +58,12 @@ var chartCuisine = new Chart("cuisine", {
}]
},
options: {
legend: {display: true},
legend: {
display: true,
labels: {
color: 'white' // Cor da legenda alterada para branca
}
},
title: {
display: true,
text: "Média (em minutos) do pedido em cada etapa."
@@ -70,8 +71,7 @@ var chartCuisine = new Chart("cuisine", {
}
});
function faturaMensal() {
// O restante do código permanece inalterado
const genericOptions = {
responsive: true,
hoverBackgroundColor: 'white',
@@ -79,11 +79,18 @@ function faturaMensal() {
hoverBorderWidth: 3,
onHover: { mode: ['dataset', 'tooltip'] },
scales: {
x: { grid: { display: true } },
x: { grid: { display: true },
ticks: {
display: true,
color: 'white'
} },
y: {
min: 0,
max: 200,
ticks: { stepSize: 50 },
ticks: { stepSize: 50 ,
display: true,
color: 'white'
},
grid: { borderDash: [5, 5] }
}
},
@@ -91,7 +98,7 @@ function faturaMensal() {
padding: {
bottom: 10,
left: 15,
right: 25
right: 25,
}
},
interaction: {
@@ -100,6 +107,8 @@ function faturaMensal() {
},
plugins: {
legend: { display: true },
labels:{
color: 'white'},
tooltip: {
padding: 16,
titleFont: {
@@ -107,7 +116,7 @@ function faturaMensal() {
size: 18,
weight: 'normal'
},
backgroundColor: 'rgba(8, 26, 81, 1)',
backgroundColor: 'rgba(8, 26, 81, 0.66)',
bodyColor: 'rgba(255, 255, 255, 0.7)',
bodyFont: {
family: "'Poppins', 'sans-serif'",
@@ -232,7 +241,7 @@ var faturamentoMensal = new Chart('mensal', {
});
}
function getDataAtualFormatada() {