cambios en el feedback

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-fde070c5'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "/offline.html",
-    "revision": "0.qs3c8mesmbo"
+    "revision": "0.v36qbo87sfo"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/offline.html"), {

src/App.jsx

@@ -61,7 +61,7 @@ import PaginaSuccess from './views/Lente/SuccessPage'//cuando se realiza el pago
 import Stripe from './views/Metodopago/stripe'
 
 import Noencontrados from "./views/bus/noencontrados";
-import Reporte from "./views/Admin/reportes";
+import Reporte from "./views/Admin/report/inicio";
 
 
 

src/views/Admin/report/inicio.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import Fot from "../../../components/Footer";
+
+import Barra from "../../../components/Navegacion/barraAdmin";
+import Web from "../reportes";
+import Movil from "../reportemovil";
+
+function App() {
+  return (
+    <>
+      <Barra />
+
+      <div className="flex-center text-center mt-8">
+        <div className="my-16">
+          <br />
+          <Web />
+
+          <Movil />
+
+          <br />
+        </div>
+      </div>
+
+      <Fot />
+    </>
+  );
+}
+
+export default App;

src/views/Admin/reportemovil.jsx

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from "react";
+import { Pie } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+} from "chart.js";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale,
+  LinearScale
+);
+
+function ResultadosEncuestas() {
+  const [resultados, setResultados] = useState([]);
+  const [cargando, setCargando] = useState(true);
+
+  useEffect(() => {
+    const obtenerResultados = async () => {
+      try {
+        const response = await fetch(
+          "https://backopt-production.up.railway.app/resultadosM",
+          {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+
+          if (data && data.data && Array.isArray(data.data)) {
+            setResultados(data.data);
+          } else {
+            console.error("La respuesta no contiene un arreglo de resultados");
+            setResultados([]);
+          }
+        } else {
+          alert("Error al obtener los resultados");
+        }
+      } catch (error) {
+        console.error("Error al obtener los resultados:", error);
+        alert("Hubo un error al obtener los resultados");
+      } finally {
+        setCargando(false);
+      }
+    };
+
+    obtenerResultados();
+  }, []);
+
+  if (cargando) {
+    return <div>Cargando resultados...</div>;
+  }
+
+  const procesarDatos = () => {
+    const respuestasPorPregunta = {};
+
+    resultados.forEach((encuesta) => {
+      const { pregunta, respuestas } = encuesta;
+
+      if (!respuestasPorPregunta[pregunta]) {
+        respuestasPorPregunta[pregunta] = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
+      }
+
+      Object.entries(respuestas).forEach(([calificacion, cantidad]) => {
+        respuestasPorPregunta[pregunta][calificacion] += cantidad;
+      });
+    });
+
+    const labels = Object.keys(respuestasPorPregunta);
+    const datasets = labels.map((pregunta) => {
+      return {
+        label: pregunta,
+        data: Object.values(respuestasPorPregunta[pregunta]),
+        backgroundColor: [
+          "#FF6F61",
+          "#6B5B95",
+          "#88B04B",
+          "#F7CAC9",
+          "#92A8D1",
+        ],
+      };
+    });
+
+    return {
+      labels: ["1", "2", "3", "4", "5"], // Mantenemos las etiquetas originales (números)
+      datasets,
+    };
+  };
+
+  const estrellas = ["⭐", "⭐⭐", "⭐⭐⭐", "⭐⭐⭐⭐", "⭐⭐⭐⭐⭐"]; // Representación de estrellas
+
+  const data = procesarDatos();
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-3xl font-bold mb-4">Resultados de Encuesta Movil</h1>
+      {resultados.length === 0 ? (
+        <p>No se han completado encuestas aún.</p>
+      ) : (
+        <div className="flex flex-wrap gap-4 justify-center">
+          {data.datasets.map((dataset, index) => (
+            <div
+              key={index}
+              className="flex-1 max-w-sm p-6 bg-white rounded-lg shadow"
+            >
+              <h3 className="text-xl font-semibold mb-2">{`${dataset.label}`}</h3>
+              <div className="w-full h-[400px]">
+                <Pie
+                  data={{
+                    labels: data.labels,
+                    datasets: [dataset],
+                  }}
+                  options={{
+                    responsive: true,
+                    plugins: {
+                      tooltip: {
+                        callbacks: {
+                          label: (tooltipItem) => {
+                            const calificacion =
+                              estrellas[tooltipItem.dataIndex]; // Convertir índice a estrellas
+                            const value = dataset.data[tooltipItem.dataIndex];
+                            return `${calificacion}: Personas que han respondido: ${value}`;
+                          },
+                        },
+                      },
+                      title: {
+                        display: true,
+                        text: `Respuestas por calificación`,
+                      },
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ResultadosEncuestas;

src/views/Admin/reportes.jsx

@@ -1,16 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { Pie } from "react-chartjs-2"; // Importamos el componente de gráfico de pastel
-import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale } from 'chart.js';
+import { Pie } from "react-chartjs-2";
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale } from "chart.js";
 
-// Registramos los componentes necesarios de Chart.js para el gráfico de pastel
 ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
 
 function ResultadosEncuestas() {
   const [resultados, setResultados] = useState([]);
   const [cargando, setCargando] = useState(true);
 
   useEffect(() => {
-    // Obtener los resultados de las encuestas completadas
     const obtenerResultados = async () => {
       try {
         const response = await fetch("https://backopt-production.up.railway.app/resultados", {
@@ -21,12 +19,11 @@ function ResultadosEncuestas() {
         if (response.ok) {
           const data = await response.json();
 
-          // Verificar que data contiene los resultados
           if (data && data.data && Array.isArray(data.data)) {
-            setResultados(data.data); // Almacenar los resultados de las encuestas
+            setResultados(data.data);
           } else {
             console.error("La respuesta no contiene un arreglo de resultados");
-            setResultados([]); // Manejo de error si la respuesta no es válida
+            setResultados([]);
           }
         } else {
           alert("Error al obtener los resultados");
@@ -35,7 +32,7 @@ function ResultadosEncuestas() {
         console.error("Error al obtener los resultados:", error);
         alert("Hubo un error al obtener los resultados");
       } finally {
-        setCargando(false); // Finalizar el estado de carga
+        setCargando(false);
       }
     };
 
@@ -46,66 +43,71 @@ function ResultadosEncuestas() {
     return <div>Cargando resultados...</div>;
   }
 
-  // Procesar las respuestas para construir los datos de la gráfica
   const procesarDatos = () => {
     const respuestasPorPregunta = {};
 
-    // Contamos las respuestas por pregunta
     resultados.forEach((encuesta) => {
       const { pregunta, respuestas } = encuesta;
 
-      // Si la pregunta no existe en el objeto, la inicializamos
       if (!respuestasPorPregunta[pregunta]) {
         respuestasPorPregunta[pregunta] = { "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 };
       }
 
-      // Contamos las respuestas de la calificación para cada pregunta
       Object.entries(respuestas).forEach(([calificacion, cantidad]) => {
-        respuestasPorPregunta[pregunta][calificacion] += cantidad; // Incrementamos el contador
+        respuestasPorPregunta[pregunta][calificacion] += cantidad;
       });
     });
 
-    // Creamos los datos para el gráfico de pastel
-    const labels = Object.keys(respuestasPorPregunta); // Las preguntas
+    const labels = Object.keys(respuestasPorPregunta);
     const datasets = labels.map((pregunta) => {
-      const totalRespuestas = Object.values(respuestasPorPregunta[pregunta]).reduce((a, b) => a + b, 0); // Total de respuestas por pregunta
       return {
         label: pregunta,
-        data: Object.values(respuestasPorPregunta[pregunta]), // Los valores de cada calificación
-        backgroundColor: ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1'], // Colores para el gráfico
+        data: Object.values(respuestasPorPregunta[pregunta]),
+        backgroundColor: ["#FF6F61", "#6B5B95", "#88B04B", "#F7CAC9", "#92A8D1"],
       };
     });
 
     return {
-      labels: ['1', '2', '3', '4', '5'], // Respuestas posibles
+      labels: ["1", "2", "3", "4", "5"], // Mantenemos las etiquetas originales (números)
       datasets,
     };
   };
 
+  const estrellas = ["⭐", "⭐⭐", "⭐⭐⭐", "⭐⭐⭐⭐", "⭐⭐⭐⭐⭐"]; // Representación de estrellas
+
   const data = procesarDatos();
 
   return (
     <div className="container mx-auto p-4">
-      <h1 className="text-3xl font-bold mb-4">Resultados de Encuestas</h1>
+      <h1 className="text-3xl font-bold mb-4">Resultados de Encuestas Web</h1>
       {resultados.length === 0 ? (
         <p>No se han completado encuestas aún.</p>
       ) : (
         <div className="flex flex-wrap gap-4 justify-center">
           {data.datasets.map((dataset, index) => (
             <div key={index} className="flex-1 max-w-sm p-6 bg-white rounded-lg shadow">
-              <h3 className="text-xl font-semibold mb-2">{`Pregunta: ${dataset.label}`}</h3>
-              <div className="w-full h-[400px]"> {/* Altura ajustada */}
+              <h3 className="text-xl font-semibold mb-2">{`${dataset.label}`}</h3>
+              <div className="w-full h-[400px]">
                 <Pie
                   data={{
-                    labels: data.labels, // Respuestas posibles
+                    labels: data.labels,
                     datasets: [dataset],
                   }}
                   options={{
                     responsive: true,
                     plugins: {
+                      tooltip: {
+                        callbacks: {
+                          label: (tooltipItem) => {
+                            const calificacion = estrellas[tooltipItem.dataIndex]; // Convertir índice a estrellas
+                            const value = dataset.data[tooltipItem.dataIndex];
+                            return `${calificacion}: Personas que han respondido: ${value}`;
+                          },
+                        },
+                      },
                       title: {
                         display: true,
-                        text: "Distribución de Respuestas",
+                        text: `Respuestas por calificación`,
                       },
                     },
                   }}

src/views/feedback/encuesta.jsx

@@ -52,32 +52,36 @@ function EncuestaCitas() {
     e.preventDefault();
 
     if (Object.keys(respuestas).length !== preguntas.length) {
-      alert("Por favor responde todas las preguntas antes de enviar.");
-      return;
+        alert("Por favor responde todas las preguntas antes de enviar.");
+        return;
     }
 
     try {
-      const response = await fetch("https://backopt-production.up.railway.app/Encuesta", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ idUsuario: 1, respuestas }), // Ajusta idUsuario
-      });
-
-      if (response.ok) {
-        setEnviada(true);
-
-        // Redirigir al inicio después de 3 segundos
-        setTimeout(() => {
-          navigate("/ver-cita");
-        }, 3000); // Retrasar la redirección 3 segundos
-      } else {
-        alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
-      }
+        const response = await fetch("https://backopt-production.up.railway.app/Encuesta", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ 
+                idUsuario: 1, // Ajusta el ID del usuario
+                respuestas,
+                preguntas // Envía las preguntas al backend
+            }),
+        });
+
+        if (response.ok) {
+            setEnviada(true);
+
+            // Redirigir al inicio después de 3 segundos
+            setTimeout(() => {
+                navigate("/ver-cita");
+            }, 3000);
+        } else {
+            alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
+        }
     } catch (error) {
-      console.error("Error:", error);
-      alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
+        console.error("Error:", error);
+        alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
     }
-  };
+};
 
   if (cargando) {
     return (