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.

67
gestaoRaul/home/templates/home.html
View File

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

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

@@ -1,5 +1,3 @@
.grid-container { .grid-container {
display: grid; display: grid;
justify-content: center; justify-content: center;
@@ -10,23 +8,28 @@
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 10px; padding: 10px;
} }
.card { .card {
width: 420px; width: 420px;
height: 420px; height: 420px;
justify-items: center; justify-items: center;
background-color: #2b376e; background: linear-gradient(135deg, #97cefa, #457bd1);
border-radius: 10px; border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px;
color: #333; color: #333;
transition: transform 0.2s; 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 { .card-resumo {
display: grid; display: grid;
@@ -35,29 +38,34 @@
align-items: center; align-items: center;
width: 300px; width: 300px;
height: 130px; height: 130px;
background-color: #1a237e; background: linear-gradient(135deg, #1a237e, #3f51b5);
border-radius: 10px; border-radius: 10px;
box-shadow: 5px 5px 10px rgba(156, 156, 156, 0.2); box-shadow: 0 4px 20px rgba(156, 156, 156, 0.2);
text-align: left; text-align: left;
line-height: 20px; line-height: 20px;
/* scale: 0.9; */
/* font-size: 20px; */
/* font-weight: bold; */
padding: 15px 30px 15px 30px; padding: 15px 30px 15px 30px;
/* color: #333; */ }
/* transition: transform 0.2s; */ .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 { .card-resumo h2 {
/* color: #fff; */
font-size: 35px; font-size: 35px;
margin: 0px; margin: 0px;
} color: #fff;
}
@media screen and (max-width: 730px) {
@media screen and (max-width: 730px) {
.grid-container { .grid-container {
justify-items: center; justify-items: center;
display: grid; display: grid;
@@ -69,15 +77,13 @@
.card { .card {
width: 95%; width: 95%;
background-color: #2b376e; background: linear-gradient(135deg, #d3ebff, #a1c4fd);
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 10px;
color: #333; 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)', const barColors = ['rgba(252, 52, 95, 0.65)',
'rgba(253, 193, 53, 0.65)', 'rgba(253, 193, 53, 0.65)',
'rgba(54, 162, 235, 0.65)', 'rgba(54, 162, 235, 0.65)',
@@ -17,7 +16,6 @@ var chartVendas = new Chart("vendas", {
labels: [], labels: [],
datasets: [{ datasets: [{
fill: true, fill: true,
// barPercentage: 1.0,
data: [], data: [],
backgroundColor: barColors, backgroundColor: barColors,
borderColor: barColorsBorder, borderColor: barColorsBorder,
@@ -26,30 +24,28 @@ var chartVendas = new Chart("vendas", {
}] }]
}, },
options: { options: {
indexAxis: 'y', indexAxis: 'y',
scales: { scales: {
y: { y: {
ticks: { ticks: {
display: true, display: true,
// color: 'white'
// padding: 5,
callback: function(value, index, values) { 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: { title: {
display: false, display: false,
text: "Produtos mais vendidos" text: "Produtos mais vendidos"
}, },
}, },
}); });
var chartCuisine = new Chart("cuisine", { var chartCuisine = new Chart("cuisine", {
@@ -62,7 +58,12 @@ var chartCuisine = new Chart("cuisine", {
}] }]
}, },
options: { options: {
legend: {display: true}, legend: {
display: true,
labels: {
color: 'white' // Cor da legenda alterada para branca
}
},
title: { title: {
display: true, display: true,
text: "Média (em minutos) do pedido em cada etapa." 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 = { const genericOptions = {
responsive: true, responsive: true,
hoverBackgroundColor: 'white', hoverBackgroundColor: 'white',
@@ -79,11 +79,18 @@ function faturaMensal() {
hoverBorderWidth: 3, hoverBorderWidth: 3,
onHover: { mode: ['dataset', 'tooltip'] }, onHover: { mode: ['dataset', 'tooltip'] },
scales: { scales: {
x: { grid: { display: true } }, x: { grid: { display: true },
ticks: {
display: true,
color: 'white'
} },
y: { y: {
min: 0, min: 0,
max: 200, max: 200,
ticks: { stepSize: 50 }, ticks: { stepSize: 50 ,
display: true,
color: 'white'
},
grid: { borderDash: [5, 5] } grid: { borderDash: [5, 5] }
} }
}, },
@@ -91,7 +98,7 @@ function faturaMensal() {
padding: { padding: {
bottom: 10, bottom: 10,
left: 15, left: 15,
right: 25 right: 25,
} }
}, },
interaction: { interaction: {
@@ -100,6 +107,8 @@ function faturaMensal() {
}, },
plugins: { plugins: {
legend: { display: true }, legend: { display: true },
labels:{
color: 'white'},
tooltip: { tooltip: {
padding: 16, padding: 16,
titleFont: { titleFont: {
@@ -107,7 +116,7 @@ function faturaMensal() {
size: 18, size: 18,
weight: 'normal' weight: 'normal'
}, },
backgroundColor: 'rgba(8, 26, 81, 1)', backgroundColor: 'rgba(8, 26, 81, 0.66)',
bodyColor: 'rgba(255, 255, 255, 0.7)', bodyColor: 'rgba(255, 255, 255, 0.7)',
bodyFont: { bodyFont: {
family: "'Poppins', 'sans-serif'", family: "'Poppins', 'sans-serif'",
@@ -232,7 +241,7 @@ var faturamentoMensal = new Chart('mensal', {
}); });
}
function getDataAtualFormatada() { function getDataAtualFormatada() {