From 6b7bd1bbb29db6b4253a67af007a0801008725d1 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Sat, 18 Jan 2025 21:17:13 -0300 Subject: [PATCH] style: page home and page map --- gestaoRaul/db.sqlite3 | Bin 299008 -> 299008 bytes .../home/__pycache__/urls.cpython-310.pyc | Bin 360 -> 360 bytes .../home/__pycache__/views.cpython-310.pyc | Bin 2527 -> 2488 bytes gestaoRaul/home/templates/home.html | 77 ++++-- gestaoRaul/home/views.py | 3 +- gestaoRaul/mesas/templates/mesas_map.html | 28 ++- gestaoRaul/templates/static/base.css | 1 + gestaoRaul/templates/static/home/css/home.css | 29 +++ gestaoRaul/templates/static/home/js/home.js | 228 ++++++++++++++---- .../templates/static/midia/icons/cart.svg | 7 + .../static/midia/icons/money-bag.svg | 7 + .../templates/static/midia/icons/ticket.svg | 7 + 12 files changed, 313 insertions(+), 74 deletions(-) create mode 100644 gestaoRaul/templates/static/midia/icons/cart.svg create mode 100644 gestaoRaul/templates/static/midia/icons/money-bag.svg create mode 100644 gestaoRaul/templates/static/midia/icons/ticket.svg diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index 6ffc8d0004840498c2b9ca319a02b91686c4b708..b0f0c6050c2cb5cef5ea4faad5b6b6ce38d8ddda 100644 GIT binary patch delta 1515 zcmah|ZERCj7(VyhZf)7_c{gBmvaxn-BLrx<=YF)kjRA@*%(1ZnL6HQvvKCm^tzEl~ zb`VARfkejFi06mKApGEmhOZ88o9B*rP=V*DXOz>t^-O7V6@C5Yj^$$f6# z_c`Z%^4#~`ad_&E!&CQ{abpL{U*N`0wRX9%38lwe?=CL(IwZ-bsy-^YsOl9pX>fbj zhenpFKH11>E=^W6g{Hkxxq6N*uW{!Ze@|$WCzcF^J9^w&cT7nrG?)q~%GO}mv#G1E zziaToV7h+2cUiqJoT_!Ub-%P)Z0>*AAN4djyXsdoztRx*C&RT{dbj!;*DZ59Q!#n1 zf0ZOks#BDlB6U#7r?`Eh=5kA_?4jwshZ^vl(#h6+QYx`AtoFt^lxWCIlHMMd}`F~M6% zWD^y5fmJh^(R_>DZ(+A8uvD{{Gb7bn>9;HmMcTHsN8^rQ$k7yO?+dlZ175E~kv(oF zyJpAbCWH`Wd+gX*u?U+{m2t?tI?x+&tO>Oz0|`n!Dph5P$}DQf&spUqOGk|p2j1 z0uE8mCRtqzp2w*y(SjAbP=>72@(oH^?)`}9Rz=aNsG@$p1utoyv7LkO;bS-e5yOkw zq=q~o-;&d;;v{~aSdUn@3(LuXwJ;m3^(6M|$4=sq<#kezV#tp;E;kL-Npm|O`6SV$ zQkjaXU^hrB{+Fa^ZpkZ7lICPd_&+y^UY9Y?nn6M*s&@6~KgP2C(@-?_&gB-VCVF{v zLO(K$kMUL8Cb>^)6OF}n$yCuanYXdX2)>TV0Bbml{ndv5HBV8hN}K!VHUXp4Bm&`@Ftu#{t5s`?vu~SMJA5nikV~t zE|Z%55~|Hdx6)QY0{8R^idYWMN~$ zjeIB^j{b9rV-Af|8|QnIQkbjTAs@Q delta 1526 zcmah}eQZ-z6u3NF@Oov+X0G+hU6vZzVrDz zzjN;G-Iv$9FK3=o;u~YNN zk|6~QP4g;>u4sX@zfGAl&y`!XEfnl*m!k2GuEuC2-XN*Th?>wl!Zg;^(4i^q-D+EZ zUw?XeZBi;Xnwxu8=$n_(*p_%*a^2d>iVk19)>s+~udI=lHIf8y-}vJ zR!XH(Me@khP-H`uy*?VyH95WOol2NHb+WV)>5llf1pNL;N>zQ`tv!*bzgZ5nBz?a2 zWPNAm_)^Bb2Q7=6Tf%LgMP2nB8@rkwa3Sd)$!GA7 zF920FRnxs-MkQ8f(8BuMFfT{vzwB){l;TChJSjpx!HhJElU2K68jHJOdghKB3aC>d zXGjGZB4M(N^xz5NOgj@_V0PstcxJYv&}9j=MMges>}X5mi@B(%$XeCZS?{5WqR~>n zMp;E2%oix@tOM2UC_>hJQ`Rfr9rNCqcL(-cJw;1oje^Zz($UccnemI!6` zABTgYIc1vkWLvL+%S>gSmWV8R0xknWtnwrT#o5~zzxx@u*uZr#nW#qn0WovH^iV=OTYds*)=ZwgMqkbV9Jd&vGMaT zE{w2K7huW!(}>(8-;=NTA{{4t$Q&{QU&QAKBkz+POh delta 20 acmaFC^n!^ypO=@50SJutb#3I1Wdr~>_yq?5 diff --git a/gestaoRaul/home/__pycache__/views.cpython-310.pyc b/gestaoRaul/home/__pycache__/views.cpython-310.pyc index 18e0a4fd5c923e755874878b127a048ea7e852cc..19e395541a77e20df669e6aa09ce3d1e8502237e 100644 GIT binary patch delta 537 zcmYk2KabNe9ES7D(ZosYG)+tB=>$3f$Nk|{CI%#6fbAw07Bf^<9hIK!q}b_j3k=7| z4V6CyGXp2_Ay`~}i)FdwbSO}Jd&fA|gp z9`K$(GNFm*NTf2OndewwNhtA*L{4+tO+;T7wD2w!16k72b0&szL`R;nxGpPNK~Ptm z@caUJpBL|gbD%diX245pwt$Y;zYb%#!Y8_I%rSg}!a(?ply<5PZKPYO{PZIH971JK z?^QImPHme-?>D4o8r=e7-bP1|nUB#PVDmMaLf<@yAMNbfBF*3MZn|W1ChMkawYum2 z-Z$s*(eZ7EcU;_cQEXyh=?c$YGu1s`E%c(P$L4!{5k0Z~aN7uUV!ogQK;|dfoh7bZ z@l)2!+sUe12tDDftCvjaTDb>T2R3Mb)=JiJrYExHwa_Yamb8l3YU8kPF4>tIyRpQ` wWank>u5yo}+>HO$`rUpqdTj4riTWwnhTgS-0}KV=e+Py5+FwRt3aFRE9~iH8ng9R* delta 622 zcmYk3F>ezw7>3W+cS){ElU7I-P};O8Oduhl4zQpuNEr=MWyMyS%036%5n}29 z6H_plEWP*W{l2rm*Y`31mM1bv;=ny`e!rUCS|wM& z=he~e3jr|%0S#!KH${x&iX+|<2&0M{JP|2QD~3G7nd^nTjoa?st)-KrMzTx{aa zid(!V`nX>);#*>X2OwYrn$YwT(2TZU1}^{}Iw$*Ub!fM;wpZUry|6?lS{4(g7qZZ- zL=TNw*e>`AI`#*+pX4rt4xPjsDt~t;{1AdI`?K~q8ahvH+eh_ZyDf($q{J{Y7p!c0 zrHmU=ZWQvFN-d2J0kW^7J&@S<(J5%#UgPf04fh#NpHg$WATuIZVWd|3e%k{(Zyesd z=JC3hJujWLbRCswdPbCau$=38!G`uz<1#vS{%FTe;7O>UeG893(|&=w7yeI_eR@uc znH(?8oa?b4c0rV8$`7wbzN2>TE&^v$DM&$y9t-J0XoXx2CsI+S)?VVhY(bv;sn>4m z-QJ98L*#@k`Ixe)ROE?~N~_EjmA_5p$NVo%m8*&b@3|wFoE-z#p|3hY0RnBeP_ - - - - - - - - - - {% endblock %} {% block 'title' %} @@ -28,46 +18,85 @@ RRB&C - DashBoard -

DashBoard

- - - +

DashBoard

+
+ + +
+

+
+
+
+

Faturamento

+

Carregando...

+
+ +
+ +
+
+

Total de Vendas

+

Carregando...

+
+ +
+ +
+
+

Ticket médio

+

Carregando...

+
+ +
+ +
-

Valor de Pagamentos

-
R$ {{total_pagamentos |floatformat:2 }}
+
-

Quantidade de Pagamentos

-
{{ qdt_pagamentos }}
+

Quantidade de vendas

+
Carregando...

Ticket médio

-
R$ {{ ticekMedio |floatformat:2}}
+
Carregando...
-

Gráficos de vendas

+

Gráfico de vendas

-

Gráficos cozinha

-
- +

Gráfico cozinha

+
+
+
- +

Faturamento anual

+
+ +
+ + + diff --git a/gestaoRaul/home/views.py b/gestaoRaul/home/views.py index bb426b7..04d51cc 100644 --- a/gestaoRaul/home/views.py +++ b/gestaoRaul/home/views.py @@ -1,13 +1,12 @@ from django.shortcuts import render from django.db.models import Sum from django.db.models import Count, F -from django.http import JsonResponse, HttpResponse +from django.http import JsonResponse from django.contrib.admin.views.decorators import staff_member_required from django.contrib.auth.models import User from django.utils.dateparse import parse_datetime import datetime -import json diff --git a/gestaoRaul/mesas/templates/mesas_map.html b/gestaoRaul/mesas/templates/mesas_map.html index cf986c5..6ad360a 100644 --- a/gestaoRaul/mesas/templates/mesas_map.html +++ b/gestaoRaul/mesas/templates/mesas_map.html @@ -20,16 +20,37 @@ RRB&C - Mapa de Mesas width: 1400px; height: 800px; border-radius: 15px; - /* margin: 15; */ - + margin-left: 30px; background-image: url("{% static 'midia/mapMesa.webp' %}" ); background-size: cover; position: relative; + } + +#scroll { + display: grid; + position: relative; + scrollbar-width: thin; +} + +@media screen and (max-width: 730px) { + #scroll { + margin: 10px; + + overflow: scroll; +} + +#mapa { + margin: 0px; + +} + + } +

Mapa de Mesas

- +
{% for eixo in eixosXY %} @@ -43,6 +64,7 @@ RRB&C - Mapa de Mesas top: {{eixo.x}}px;position: absolute" >
{% endfor %} +

Depósito

diff --git a/gestaoRaul/templates/static/base.css b/gestaoRaul/templates/static/base.css index bacb379..fc50a31 100644 --- a/gestaoRaul/templates/static/base.css +++ b/gestaoRaul/templates/static/base.css @@ -20,6 +20,7 @@ text-align: center; position: fixed; top: 0; width: 100%; + z-index: 100; } .nav-bar { diff --git a/gestaoRaul/templates/static/home/css/home.css b/gestaoRaul/templates/static/home/css/home.css index 33124ff..e83f187 100644 --- a/gestaoRaul/templates/static/home/css/home.css +++ b/gestaoRaul/templates/static/home/css/home.css @@ -3,6 +3,8 @@ .grid-container { display: grid; justify-content: center; + justify-items: center; + align-items: center; grid-template-columns: repeat(3, 2fr); gap: 20px; max-width: 1200px; @@ -13,6 +15,7 @@ .card { width: 420px; height: 420px; + justify-items: center; background-color: #2b376e; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); @@ -25,6 +28,32 @@ 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: #2b376e; + 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; + } + diff --git a/gestaoRaul/templates/static/home/js/home.js b/gestaoRaul/templates/static/home/js/home.js index 2255571..85996e6 100644 --- a/gestaoRaul/templates/static/home/js/home.js +++ b/gestaoRaul/templates/static/home/js/home.js @@ -33,64 +33,200 @@ var chartCuisine = new Chart("cuisine", { legend: {display: true}, title: { display: true, - text: "Tempo médio (em minutos) do pedido em cada etapa." + text: "Média (em minutos) do pedido em cada etapa." }, } }); +function faturaMensal() { + + const genericOptions = { + responsive: true, + hoverBackgroundColor: 'white', + hoverRadius: 7, + hoverBorderWidth: 3, + onHover: { mode: ['dataset', 'tooltip'] }, + scales: { + x: { grid: { display: true } }, + y: { + min: 0, + max: 200, + ticks: { stepSize: 50 }, + grid: { borderDash: [5, 5] } + } + }, + layout: { + padding: { + bottom: 10, + left: 15, + right: 25 + } + }, + interaction: { + mode: 'index', + intersect: false + }, + plugins: { + legend: { display: true }, + tooltip: { + padding: 16, + titleFont: { + family: "'Poppins', 'sans-serif'", + size: 18, + weight: 'normal' + }, + backgroundColor: 'rgba(8, 26, 81, 1)', + bodyColor: 'rgba(255, 255, 255, 0.7)', + bodyFont: { + family: "'Poppins', 'sans-serif'", + size: 15 + }, + bodySpacing: 8, + boxHeight: 6, + boxPadding: 8, + usePointStyle: true, + callbacks: { + title: ctx => { + + var titulo + + switch (ctx[0].label) { + case 'Jan': + titulo = 'Janeiro' + break; + case 'Fev': + titulo = 'Fevereiro' + break; + case 'Mar': + titulo = 'Março' + break; + case 'Abr': + titulo = 'Abril' + break; + case 'Mai': + titulo = 'Maio' + break; + case 'Jun': + titulo = 'Junho' + break; + case 'Jul': + titulo = 'Julho' + break; + case 'Ago': + titulo = 'Agosto' + break; + case 'Set': + titulo = 'Setembro' + break; + case 'Out': + titulo = 'Outubro' + break; + case 'Nov': + titulo = 'Novembro' + break; + case 'Dez': + titulo = 'Dezembro' + break; + // ... outros dias + default: + console.log("Dia inválido"); + } + + return titulo + }, + label: ctx => { + return `${ctx.dataset.label}: R$ ${ctx.raw}` + } + } + } + } + } + + const lineDash = { + id: 'lineDash', + beforeDraw: chart => { + if (chart.tooltip._active && chart.tooltip._active.length) { + const ctx = chart.ctx + ctx.save() + const activePoint = chart.tooltip._active[0] + + ctx.beginPath() + ctx.setLineDash([5, 5]) + ctx.moveTo(activePoint.element.x, chart.chartArea.top) + ctx.lineTo(activePoint.element.x, chart.chartArea.bottom) + ctx.lineWidth = 1 + ctx.strokeStyle = 'rgba(1, 126, 250, 0.8)' + ctx.stroke() + ctx.restore() + } + } + } + + + +var faturamentoMensal = new Chart('mensal', { + type: "line", + data: { + labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], + datasets: [ + { + label: 'Ano Anterior', + backgroundColor: 'rgba(255, 136, 0, 0.8)', + borderColor: 'rgba(255, 136, 0, 0.8)', + borderWidth: 2, + data: [22, 48, 41, 53, 82, 64, 55, 47, 50, 62, 58, 84], + }, + + { + label: 'Ano Atual', + backgroundColor: 'rgba(1, 126, 250, 1)', + borderColor: 'rgba(1, 126, 250, 1)', + borderWidth: 2, + data: [100, 150,80,85,90,70,120,90,100, ] + }, + + { + label: 'Projeção', + backgroundColor: 'rgb(1, 250, 13)', + borderColor: 'rgb(9, 250, 1)', + borderWidth: 2, + data: [, ,,,,,,,100, 89, 138, 110 ] + }, + + ] + }, + options: genericOptions, + plugins: [ lineDash] + +}); + +} + function getDataAtualFormatada() { + const data = new Date(); - const ano = data.getFullYear(); - const mes = String(data.getMonth() + 1).padStart(2, '0'); // Mês começa em 0 + const mes = String(data.getMonth() + 1).padStart(2, '0'); const dia = String(data.getDate()).padStart(2, '0'); - const dataFormatada = `${ano}-${mes}-${dia}`; + + const dataAnterior = new Date(data.setDate(data.getDate() - 30)); + const anoAnterior = dataAnterior.getFullYear(); + const mesAnterior = String(dataAnterior.getMonth() + 1).padStart(2, '0'); + const diaAnterior = String(dataAnterior.getDate()).padStart(2, '0'); + const dataFormatadaAnterior = `${anoAnterior}-${mesAnterior}-${diaAnterior}`; - return dataFormatada; + datas = [dataFormatadaAnterior, dataFormatada] + + return datas; } -function productsPlus(){ - -var xValues = [document.getElementById('n-0').innerText, - document.getElementById('n-1').innerText, - document.getElementById('n-2').innerText, - document.getElementById('n-3').innerText, - document.getElementById('n-4').innerText - ]; -var yValues = [document.getElementById('q-0').innerText, - document.getElementById('q-1').innerText, - document.getElementById('q-2').innerText, - document.getElementById('q-3').innerText, - document.getElementById('q-4').innerText -]; -var barColors = ["red", "green","blue","orange","brown"]; - -// new Chart("vendas", { -// type: "bar", -// data: { -// labels: xValues, -// datasets: [{ -// backgroundColor: barColors, -// data: yValues -// }] -// }, -// options: { -// legend: {display: false}, -// title: { -// display: true, -// text: "Produtos mais vendidos" -// }, - -// } -// }); -} function mediaCuisine(){ var dateStart = document.getElementById('data-start').value == '' ? '2025-01-01' :document.getElementById('data-start').value; -var dateEnd = document.getElementById('data-end').value == '' ? getDataAtualFormatada() :document.getElementById('data-end').value;; +var dateEnd = document.getElementById('data-end').value == '' ? getDataAtualFormatada()[1] :document.getElementById('data-end').value;; var yValues = []; var xValues = ['Fila', 'Preparando', 'Entregar']; var totalPagamenstos = document.getElementById('total-pagamentos') @@ -129,6 +265,8 @@ var resposta = fetch(`/chartCuisine/${dateStart}/${dateEnd}`, {method: 'GET', chartCuisine.data.labels = xValues chartCuisine.update(); + document.getElementById('30-days').innerText = '' + }) .catch(error => { alert('Erro ao trazer dados da cozinha:', error) @@ -137,8 +275,8 @@ var resposta = fetch(`/chartCuisine/${dateStart}/${dateEnd}`, {method: 'GET', } -function deleyGraficos(){ - setTimeout(function() { - mediaCuisine();}, 20000); -} +document.getElementById('data-start').value = getDataAtualFormatada()[0]; +document.getElementById('data-end').value = getDataAtualFormatada()[1]; mediaCuisine() +faturaMensal() +document.getElementById('30-days').innerText = 'Últimos 30 dias' diff --git a/gestaoRaul/templates/static/midia/icons/cart.svg b/gestaoRaul/templates/static/midia/icons/cart.svg new file mode 100644 index 0000000..d7e13fd --- /dev/null +++ b/gestaoRaul/templates/static/midia/icons/cart.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/gestaoRaul/templates/static/midia/icons/money-bag.svg b/gestaoRaul/templates/static/midia/icons/money-bag.svg new file mode 100644 index 0000000..6f2e23c --- /dev/null +++ b/gestaoRaul/templates/static/midia/icons/money-bag.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/gestaoRaul/templates/static/midia/icons/ticket.svg b/gestaoRaul/templates/static/midia/icons/ticket.svg new file mode 100644 index 0000000..ad58251 --- /dev/null +++ b/gestaoRaul/templates/static/midia/icons/ticket.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file