style: page home and page map

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

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'