Merge pull request #22 from chechojgb/responsive

chechojgb · web-flow · commit 44107ffaecd9 · 2025-06-21T22:13:54.000-05:00
Responsive
diff --git a/resources/js/components/welcome/agentRankingWidget.jsx b/resources/js/components/welcome/agentRankingWidget.jsx
@@ -22,11 +22,12 @@ export default function AgentRankingWidget() {
   const [agentes, setAgentes] = useState([]);
   const [loading, setLoading] = useState(true); 
   const { allLoaded, markLoaded } = useLoadStatus();
+  const [error, setError] = useState(false);
 
   useEffect(() => {
     const fetchRanking = async () => {
       try {
-        const res = await axios.get('/getAgentRanking');
+        const res = await axios.get('/getAgentRanking', {timeout: 5000});
 
         if (Array.isArray(res.data.data)) {
           const ordenados = res.data.data
@@ -41,6 +42,7 @@ export default function AgentRankingWidget() {
         }
       } catch (error) {
         console.error("Error al obtener ranking de agentes", error);
+        setError(true);
       } finally {
         setLoading(false); 
         markLoaded();  
@@ -54,7 +56,22 @@ export default function AgentRankingWidget() {
     <div className="p-0 sm:p-6 flex flex-col justify-between">
       {loading || !allLoaded ? ( // ⛳ doble condición: hasta que TODOS estén listos
         <DiscordLoader />
-      ) : (
+      ) : error ? (
+        <>
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Ranking de Agentes</h3>
+            <span className="text-sm text-gray-500">
+              <Link className={`${theme.text}`} href={route('showAgentRankingState')}>Hoy</Link>
+            </span>
+
+          </div>
+          <div>
+              <div className={`${theme.text} text-center mt-10`}>
+                😓 Ups, no pudimos obtener datos del servidor.
+              </div>
+          </div>
+        </>
+      ): (
         <>
           <div className="flex justify-between items-center mb-4">
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Ranking de Agentes</h3>
diff --git a/resources/js/components/welcome/agentStatusDount.jsx b/resources/js/components/welcome/agentStatusDount.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect,useRef  } from 'react';
 import { Doughnut } from 'react-chartjs-2';
 import { Link,usePage} from "@inertiajs/react";
 import axios from "axios";
@@ -31,9 +31,7 @@ export default function AgentStatusDonut() {
   const { props } = usePage();
   const proyecto = props?.auth?.user?.proyecto || 'AZZU';
   const theme = themeByProject[proyecto];
-
-  console.log(theme);
-  
+  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(true);
   const [callData, setCallData] = useState({
     atendidas: 0,
@@ -43,10 +41,13 @@ export default function AgentStatusDonut() {
   const [selectedOperation, setSelectedOperation] = useState('');
   const { allLoaded, markLoaded } = useLoadStatus();
 
+  console.log(theme);
+  
+
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const res = await axios.get('/getDonutCalls');
+        const res = await axios.get('/getDonutCalls', {timeout: 5000});
         const responseData = res.data;
 
         setCallData({
@@ -58,6 +59,7 @@ export default function AgentStatusDonut() {
         setSelectedOperation(responseData.selectedOperation || '');
       } catch (err) {
         console.error('Error al obtener overview:', err);
+        setError(true);
       } finally {
         setLoading(false);
         markLoaded(); // 🎯 indicamos que este componente terminó
@@ -97,6 +99,15 @@ export default function AgentStatusDonut() {
           <span className="text-sm text-gray-500">
             <Link className={`${theme.text}`} href={route('showCallState')}>Hoy</Link>
           </span>
+
+          
+        </div>
+        <div>
+          {error && (
+            <div className={`${theme.text} text-center mt-4`}>
+              😓 Ups, no pudimos obtener datos del servidor.
+            </div>
+          )}
         </div>
 
         {/* Donut Chart con espacio controlado */}
diff --git a/resources/js/components/welcome/callPerOperationChart.jsx b/resources/js/components/welcome/callPerOperationChart.jsx
@@ -9,7 +9,7 @@ import {
   Legend
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import DiscordLoader from '@/components/discordloader';
 import axios from "axios";
 import { useLoadStatus } from "../context/loadContext";
@@ -64,7 +64,9 @@ export default function CallsPerOperationChart() {
   const [loading, setLoading] = useState(true);
   const { allLoaded, markLoaded } = useLoadStatus();
   const chartColors = getChartColors(proyecto);
-  
+  const [error, setError] = useState(false);
+  const intervalRef = useRef(null);
+
   const [callData, setCallData] = useState({
     Soporte: 0,
     Tramites: 0,
@@ -76,7 +78,7 @@ export default function CallsPerOperationChart() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const res = await axios.get('/api/getCallsPerOperation');
+        const res = await axios.get('/api/getCallsPerOperation', { timeout: 5000 });
         const result = res.data;
 
         setCallData({
@@ -86,17 +88,28 @@ export default function CallsPerOperationChart() {
           Movil: result.Movil || 0,
           Pruebas: result.Pruebas || 0
         });
+
+        setError(false); // ✅ Limpia el error si todo salió bien
       } catch (err) {
         console.error('Error al obtener llamadas por operación:', err);
+        setError(true); // ✅ Marca que hay error
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current); // 🔥 Detiene el polling
+        }
       } finally {
         setLoading(false);
         markLoaded();
       }
     };
+
     fetchData();
+    intervalRef.current = setInterval(fetchData, 8000);
 
-    const interval = setInterval(fetchData, 8000);
-    return () => clearInterval(interval); 
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current); // 🧹 Limpieza segura
+      }
+    };
   }, []);
 
   console.log(callData);
@@ -133,6 +146,15 @@ export default function CallsPerOperationChart() {
               <Link className={`${theme.text}`} href={route('showOperationState')}>Hoy</Link>
             </span>
           </div>
+          <div>
+            <div>
+              {error && (
+                <div className={`${theme.text} text-center mt-4`}>
+                  😓 Ups, no pudimos obtener datos del servidor.
+                </div>
+              )}
+            </div>
+          </div>
           <Bar options={options} data={chartData} className="h-full w-full" />
         </>
       )}
diff --git a/resources/js/components/welcome/prevTable.jsx b/resources/js/components/welcome/prevTable.jsx
@@ -1,6 +1,6 @@
 import { Link, usePage } from "@inertiajs/react";
 import ButtonLarge from "@/components/button";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import axios from "axios";
 import ButtonPurple from "@/components/buttonPurple";
 import DiscordLoader from '@/components/discordloader';
@@ -14,29 +14,52 @@ function PrevTable() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const { allLoaded, markLoaded } = useLoadStatus();
-
+    const [error, setError] = useState(false);
+    const intervalRef = useRef(null);
     
     useEffect(() => {
         const fetchData = () => {
-            axios.get('/getOverview')
-                .then(res=> {setData(res.data); setLoading(false); markLoaded(); setLoading(false); markLoaded();})
-                .catch(err =>{console.error('Error al obtener overview:', err)});
-        }
+            axios.get('/getOverview', { timeout: 5000 })
+                .then(res => {
+                    setData(res.data);
+                    setLoading(false);
+                    setError(false);
+                    markLoaded();
+                })
+                .catch(err => {
+                    console.error('Error al obtener overview:', err);
+                    setError(true);
+                    setLoading(false);
+                    markLoaded();
+
+                    // 🛑 Detiene el intervalo si hay error
+                    if (intervalRef.current) {
+                        clearInterval(intervalRef.current);
+                    }
+                });
+        };
 
         fetchData();
+        intervalRef.current = setInterval(fetchData, 8000);
 
-        const interval = setInterval(fetchData, 8000);
-        
-        return () => clearInterval(interval);
-        
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
     }, []);
     // console.log(data);
 
     return (
         <div className="absolute inset-0 p-6 flex flex-col justify-between">
             {loading || !allLoaded ? (
                 <DiscordLoader />
-            ) : (
+            ) : error ? (
+                <div className={`${theme.text} text-center mt-10`}>
+                    😓 Ups, no pudimos obtener datos del servidor.
+                </div>
+            ) 
+            :(
                 <>
                     <div className="flex flex-col">
                         <div className="flex justify-between items-center mb-4">
diff --git a/routes/web.php b/routes/web.php
@@ -102,3 +102,4 @@
 Route::get('/mi-ip', function () {
     return request()->ip(); // o $_SERVER['REMOTE_ADDR']
 });
+
