style: page home and page map

2026-04-05 13:35:42 +00:00 · 2025-01-18 21:17:13 -03:00
parent 89a4d0e4be
commit 6b7bd1bbb2
12 changed files with 313 additions and 74 deletions
--- a/gestaoRaul/db.sqlite3
+++ b/gestaoRaul/db.sqlite3
--- a/gestaoRaul/home/pycache/urls.cpython-310.pyc
+++ b/gestaoRaul/home/pycache/urls.cpython-310.pyc
--- a/gestaoRaul/home/pycache/views.cpython-310.pyc
+++ b/gestaoRaul/home/pycache/views.cpython-310.pyc
--- a/gestaoRaul/home/templates/home.html
+++ b/gestaoRaul/home/templates/home.html
@@ -8,16 +8,6 @@
 <link rel="stylesheet" href="{% static 'home/css/home.css' %}">


-
-
-
-
-
-
-
-
-
-
 {% endblock %}

 {% block 'title' %}
@@ -28,46 +18,85 @@ RRB&C - DashBoard

 <body>

-  <h1>DashBoard</h1>
  <div class="grid-container">
-      <input id="data-start" name="data-start" oninput="mediaCuisine()" type="date">
-      <input id="data-end" name="data-end" oninput="mediaCuisine()" type="date">
-       <!-- <button onclick="mediaCuisine()" >Filtrar</button> -->
+    <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>
  </div>
+  

  <div class="grid-container">

+    <div class="card-resumo">
+      <div >
+        <p> Faturamento </p>
+        <h2 id="total-pagamentos">Carregando... </h2>
+      </div>
+        <img src="{% static 'midia/icons/money-bag.svg' %}" >
+    </div>
+
+    <div class="card-resumo">
+      <div >
+        <p>Total de Vendas</p>
+        <h2 id="qtd-pagamentos">Carregando... </h2>
+      </div>
+        <img src="{% static 'midia/icons/cart.svg' %}" >
+    </div>
+
+    <div class="card-resumo">
+      <div >
+        <p>Ticket médio</p>
+        <h2 id="ticket-medio">Carregando... </h2>
+      </div>
+        <img src="{% static 'midia/icons/ticket.svg' %}" >
+    </div>
+
+
    <div class="card">
-      <h4> Valor de Pagamentos </h4>
-      <h5 id="total-pagamentos">R$ {{total_pagamentos |floatformat:2 }} </h5>
+
      <hr>
-      <h4> Quantidade de Pagamentos </h4>
-      <h5 id="qtd-pagamentos"> {{ qdt_pagamentos }} </h5>
+      <h4> Quantidade de vendas</h4>
+      <h5 id="qtd-pagamentos"> Carregando... </h5>
      <hr>
      <h4> Ticket médio </h4>
-      <h5 id="ticket-medio">R$ {{ ticekMedio |floatformat:2}} </h5>
+      <h5 id="ticket-medio">Carregando...</h5>
      <hr>
    </div>

    <div class="card">
-      <h4> Gráficos de vendas </h4>
+      <h4> Gráfico de vendas </h4>
      <canvas id="vendas" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
      </canvas>
    </div>

    <div class="card">
-      <h4> Gráficos cozinha </h4>
-      <div></div>
-      <canvas id="cuisine" style="width:100%;height: 85%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
+      <h4> Gráfico cozinha </h4>
+      <div style="
+            width:95%;
+            max-width:100%;
+            background-color: rgb(191, 225, 255);
+            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>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+  <h4>Faturamento anual</h4>
+<div style="height: 350px;margin: 30px;">
+  <canvas id="mensal" style="width:100%;height: 100%;max-width:100%; background-color: rgb(191, 225, 255);border-radius: 5px;">
+</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="{% static 'home/js/home.js' %}"></script>


--- 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



--- 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;
+
+}
+
+    }
+
 </style>

 <h1>Mapa de Mesas</h1>
-
+<div id="scroll">
 <div id="mapa" >

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

 </div>
 <h2>Depósito</h2>
--- 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 {
--- 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;
+  }
+



--- 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 = 'Últimos 30 dias'
--- a/gestaoRaul/templates/static/midia/icons/cart.svg
+++ b/gestaoRaul/templates/static/midia/icons/cart.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#e0e0e0" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve" stroke="#e0e0e0">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
--- a/gestaoRaul/templates/static/midia/icons/money-bag.svg
+++ b/gestaoRaul/templates/static/midia/icons/money-bag.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#e0e0e0" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.009 512.009" xml:space="preserve">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
--- a/gestaoRaul/templates/static/midia/icons/ticket.svg
+++ b/gestaoRaul/templates/static/midia/icons/ticket.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 13.236 13.236" xml:space="preserve" fill="#e0e0e0">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+