Merge pull request #20 from chechojgb/responsive

chechojgb · web-flow · commit e3b8246c3085 · 2025-06-07T22:54:27.000-05:00
style: agregar detalles de colas por operaciones
diff --git a/app/Http/Controllers/PostProxyController.php b/app/Http/Controllers/PostProxyController.php
@@ -190,7 +190,7 @@ public function pauseExtension(Request $request): JsonResponse
         $interface = "SIP/{$extension}";
         $queues = [];
         for ($i = 1; $i <= 120; $i++) {
-            $queues[] = 'Q' . str_pad($i, 3, '0', STR_PAD_LEFT);
+            $queues[] = 'Q' . $i;
         }
         $paused = 1;
         $reason = 'ACW';
@@ -216,7 +216,7 @@ public function unpauseExtension(Request $request): JsonResponse
         $interface = "SIP/{$extension}";
         $queues = [];
         for ($i = 1; $i <= 120; $i++) {
-            $queues[] = 'Q' . str_pad($i, 3, '0', STR_PAD_LEFT);
+            $queues[] = 'Q' . $i;
         }
         $paused = 0;
         $reason = 'ACW';
@@ -353,7 +353,7 @@ public function rankingCalls()
         
         $baseUrl = $isOperationAR
         ? "http://98.85.112.126:13009"
-        : "http://10.57.251.181:13011";
+        : "http://10.57.251.181:3009";
         
         $response = Http::get("{$baseUrl}/api/llamadas/ranking?operation_id={$selectedOperation}");
         
@@ -388,6 +388,15 @@ public function operationState($area): JsonResponse
         $data = $response->json();
         return response()->json($data);
     }
+    public function operationQueueState($area): JsonResponse
+    {
+        $response = Http::get("http://10.57.251.181:3014/operacion/{$area}");
+        if (!$response->successful()) {
+            return response()->json(['error' => 'No se pudo obtener los datos'], 500);
+        }
+        $data = $response->json();
+        return response()->json($data);
+    }
 
 
 
diff --git a/resources/js/components/agentsModalWrapper.jsx b/resources/js/components/agentsModalWrapper.jsx
@@ -32,7 +32,7 @@ const AgentModalWrapper = ({ children, closeModal }) => {
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className={`transform transition-all duration-300 ease-out ${
+        className={`mx-2 transform transition-all duration-300 ease-out ${
           show ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
         } bg-white dark:bg-gray-800 border rounded-xl p-4 shadow max-w-sm w-full`}
       >
diff --git a/resources/js/components/buttonPurple.jsx b/resources/js/components/buttonPurple.jsx
@@ -1,8 +1,16 @@
+import { useLoadStatus } from "./context/loadContext";
+import { themeByProject } from "./utils/theme";
+import { usePage } from "@inertiajs/react";
+
 function ButtonPurple({ content, onClick }) {
+    const { props } = usePage();
+    const proyecto = props?.auth?.user?.proyecto || 'AZZU';
+    const theme = themeByProject[proyecto];
+
     return (
         <button
             onClick={onClick} // ← esto lo hace funcional
-            className="text-sm font-medium text-purple-light-20 hover:underline dark:text-cyan-400 cursor-pointer"
+            className={`text-sm font-medium ${theme.text}  hover:underline  cursor-pointer`}
         >
             {content}
         </button>
diff --git a/resources/js/components/contentTableAgents.jsx b/resources/js/components/contentTableAgents.jsx
@@ -91,7 +91,7 @@ function ContentTableAgents({ data, search, openModal, getStatusClass }) {
     <div className="overflow-x-auto">
 
       <table className="min-w-[600px] w-full text-sm text-left text-gray-500 dark:text-gray-400 ">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800 dark:text-gray-400">
           {table.getHeaderGroups().map(headerGroup => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map(header => (
@@ -108,7 +108,7 @@ function ContentTableAgents({ data, search, openModal, getStatusClass }) {
         </thead>
         <tbody>
           {table.getRowModel().rows.map(row => (
-            <tr key={row.id} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+            <tr key={row.id} className="bg-white dark:bg-[#011111]  border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
               {row.getVisibleCells().map(cell => (
                 <td key={cell.id} className="px-6 py-4">
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/resources/js/components/tableAgents.jsx b/resources/js/components/tableAgents.jsx
@@ -1,12 +1,19 @@
 import React, { useState, useEffect } from 'react';
+import { usePage } from "@inertiajs/react";
 import { Dropdown, DropdownDivider, DropdownItem } from "flowbite-react";
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "flowbite-react";
 import AgentModalWrapper from '@/components/agentsModalWrapper';
 import AgentModalContent from '@/components/agentsModalContent';
 import ContentTableAgents from '@/components/contentTableAgents';
+import { useLoadStatus } from './context/loadContext';
+import { themeByProject } from './utils/theme';
+
 import axios from 'axios';
 
 const AgentPanel = () => {
+    const { props } = usePage();
+    const proyecto = props?.auth?.user?.proyecto || 'AZZU';
+    const theme = themeByProject[proyecto];
     const [modalOpen, setModalOpen] = useState(false);
     const [activeExtension, setActiveExtension] = useState(null);
     const [search, setSearch] = useState('');
@@ -94,7 +101,7 @@ const AgentPanel = () => {
             base: 'relative inline-block text-left',
         },
         floating: {
-            target: 'bg-blue-400 hover:bg-blue-500/80 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-400 dark:border-gray-600 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center z-50',
+            target: `${theme.bgHard} ${theme.bgHover}/80 focus:ring-none dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-400 dark:border-gray-600 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center z-50`,
             item: {
                 base: 'block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white w-full text-left z-50',
             },
@@ -114,21 +121,21 @@ const AgentPanel = () => {
     return (
         <div className="rounded-lg mt-4 relative shadow-md sm:rounded-lg px-4 mb-16">
             
-            <div className="flex flex-wrap items-center px-4 py-2 text-sm dark:bg-gray-800 break-words max-w-full">
-                <a href="/table/agents" className="text-purple-light-20">Tablas</a>
+            <div className="flex flex-wrap items-center px-4 py-2 text-sm dark:bg-gray-900 break-words max-w-full">
+                <a href="/table/agents" className={`${theme.text} `}>Tablas</a>
                 <span className="mx-2 text-gray-500">/</span>
                 <span>Agentes</span>
                 <span className="mx-2 text-gray-500">{operation ? `/` : ''}</span>
                 <span>{operation ? ` ${operation}` : ''}</span>
             </div>
 
-            <div className=" overflow-hidden shadow-sm pb-60">
-                <div className="flex flex-col lg:flex-row flex-wrap items-start lg:items-center justify-between gap-4 px-4 pb-4 pt-2 bg-white dark:bg-gray-900">
+            <div className="overflow-hidden shadow-sm pb-60">
+                <div className="flex flex-col lg:flex-row flex-wrap items-start lg:items-center justify-between gap-4 px-4 pb-4 pt-2 ">
                     <div className="w-full lg:w-auto mb-2 relative [&_.dropdown-menu]:w-auto [&_.dropdown-menu]:max-w-xs [&_.dropdown-menu]:mx-auto [&_.dropdown-menu]:z-50">
                         <Dropdown
                             label="Selecciona la operación"
                             theme={customTheme}
-                            className="w-full"
+                            className={`w-full dark:bg-gray-900 `}
                         >
                             {userOps.map((op) => (
                             <DropdownItem
@@ -137,7 +144,7 @@ const AgentPanel = () => {
                                 startPolling(op);
                                 setOperation(op);
                                 }}
-                                className='z-99'
+                                className='z-99 '
                             >
                                 {op}
                             </DropdownItem>
@@ -149,7 +156,7 @@ const AgentPanel = () => {
                             {Object.entries(stats).map(([key, value]) => (
                             <div
                                 key={key}
-                                className="text-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 
+                                className="text-center  border border-gray-200 dark:border-gray-700 
                                         rounded-xl px-4 py-2 shadow"
                             >
                                 <p className="text-xs text-gray-500 dark:text-gray-400">{key}</p>
@@ -169,7 +176,7 @@ const AgentPanel = () => {
                             type="text"
                             value={search}
                             onChange={(e) => setSearch(e.target.value)}
-                            className="w-full sm:w-64 block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+                            className="w-full sm:w-64 block p-2 pl-10 text-sm text-gray-900 border border-gray-200 rounded-xl bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-900 dark:border-gray-700 dark:placeholder-gray-400 dark:text-white shadow"
                             placeholder="Buscar agente..."
                         />
                     </div>
diff --git a/resources/js/components/utils/theme.jsx b/resources/js/components/utils/theme.jsx
@@ -4,6 +4,7 @@ export const themeByProject = {
     textSafe: 'text-purple-400',
     bg: 'bg-purple-light-20',
     bgSafe: 'bg-purple-100',
+    bgHard: 'bg-purple-400',
     bgHover: 'hover-bg-purple-light-20',
     border: 'border-purple-light-20',
   },
@@ -12,6 +13,7 @@ export const themeByProject = {
     textSafe: 'text-green-400',
     bg: 'bg-green-200',
     bgSafe: 'bg-green-100',
+    bgHard: 'bg-green-400',
     bgHover: 'hover:bg-green-300',
     border: 'border-green-500',
   },
@@ -20,6 +22,7 @@ export const themeByProject = {
     textSafe: 'text-red-400',
     bg: 'bg-red-200',
     bgSafe: 'bg-red-100',
+    bgHard: 'bg-red-400',
     bgHover: 'hover:bg-red-300',
     border: 'border-red-500',
   },
diff --git a/resources/js/components/welcome/callPerOperationChart.jsx b/resources/js/components/welcome/callPerOperationChart.jsx
@@ -1,4 +1,4 @@
-import { Link } from "@inertiajs/react";
+import { Link,usePage } from "@inertiajs/react";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -10,10 +10,10 @@ import {
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 import { useEffect, useState } from 'react';
-import { useLoadStatus } from "../context/loadContext";
 import DiscordLoader from '@/components/discordloader';
 import axios from "axios";
-
+import { useLoadStatus } from "../context/loadContext";
+import { themeByProject } from "../utils/theme";
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -58,6 +58,9 @@ const options = {
 const labels = ['Soporte', 'Trámites', 'Retención', 'Móvil', 'Pruebas'];
 
 export default function CallsPerOperationChart() {
+  const { props } = usePage();
+  const proyecto = props?.auth?.user?.proyecto || 'AZZU';
+  const theme = themeByProject[proyecto];
   const [loading, setLoading] = useState(true);
   const { allLoaded, markLoaded } = useLoadStatus();
   const [callData, setCallData] = useState({
@@ -117,15 +120,15 @@ export default function CallsPerOperationChart() {
   };
 
   return (
-    <div className="absolute inset-0 p-6 flex flex-col justify-between">
+    <div className="absolute inset-0 p-6 flex flex-col justify-between ">
       {!allLoaded ? (
         <DiscordLoader />
       ) : (
         <>
           <div className="flex justify-between items-center mb-4">
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Llamadas por operación</h3>
             <span className="text-sm text-gray-500">
-              <Link className='text-purple-light-20' href={route('showOperationState')}>Hoy</Link>
+              <Link className={`${theme.text}`} href={route('showOperationState')}>Hoy</Link>
             </span>
           </div>
           <Bar options={options} data={chartData} className="h-full w-full" />
diff --git a/resources/js/components/welcome/dashboard.jsx b/resources/js/components/welcome/dashboard.jsx
@@ -40,7 +40,7 @@ export default function Dashboard() {
                         <AgentRankingWidget/>
                     </div>
                     <div className="border-sidebar-border/70 dark:border-sidebar-border relative overflow-hidden rounded-xl border ">
-                        {/* <CallsPerOperationChart/> */}
+                        <CallsPerOperationChart/>
                     </div>
                 </div>
 
diff --git a/resources/js/components/welcome/prevTable.jsx b/resources/js/components/welcome/prevTable.jsx
@@ -66,8 +66,9 @@ function PrevTable() {
                                             <td className="px-4 py-2 text-gray-700 dark:text-gray-300">{p.extension}</td>
                                             <td className="px-4 py-2 text-gray-700 dark:text-gray-300">{p.accountcode}</td>
                                             <td className="px-4 py-2">
-                                                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
-                                                    ● Activo ({p.member?.estado || 'Desconocido'})
+                                                <span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100 whitespace-nowrap">
+                                                    <span className="text-sm">●</span>
+                                                    Activo ({p.member?.estado || 'Desconocido'})
                                                 </span>
                                             </td>
                                         </tr>
diff --git a/resources/js/pages/agentState.jsx b/resources/js/pages/agentState.jsx
@@ -34,15 +34,15 @@ export default function TableAgents() {
                 </div>
 
                 <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
-                    <div className="xl:col-span-2 bg-white dark:bg-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-6 flex flex-col">
+                    <div className="xl:col-span-2 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-6 flex flex-col">
                         <h2 className="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-4">Tabla de Ranking</h2>
                         <div className="flex-1">
-                            <LoadProvider total={1}>
+                            {/* <LoadProvider total={1}>
                                 <AgentRankingWidget />
-                            </LoadProvider>
+                            </LoadProvider> */}
                         </div>
                     </div>
-                    <div className="bg-gradient-to-br from-purple-100 via-white to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-6 flex flex-col justify-between">
+                    <div className=" from-purple-100 via-white to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-6 flex flex-col justify-between">
                         <h3 className="text-lg font-bold text-purple-700 dark:text-purple-300 mb-2">Resumen del Día</h3>
                         <ul className="space-y-3 text-base text-gray-700 dark:text-gray-200">
                             <li>
@@ -64,7 +64,7 @@ export default function TableAgents() {
                     </div>
                 </div>
 
-                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-8 mt-8">
+                <div className=" rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800 p-8 mt-8">
                     <h2 className="text-xl font-semibold text-indigo-700 dark:text-indigo-300 mb-4">📈 Evolución Horaria</h2>
                     <p className="text-base text-gray-700 dark:text-gray-300 mb-4">
                         Visualiza el comportamiento de las llamadas a lo largo del día para identificar tendencias y optimizar recursos.
diff --git a/resources/js/pages/dashboard.jsx b/resources/js/pages/dashboard.jsx
@@ -3,7 +3,7 @@ import Dashboard from '@/components/welcome/dashboard';
 
 export default function MainApp() {
   return (
-    <LoadProvider total={4}>
+    <LoadProvider total={5}>
       <Dashboard />
     </LoadProvider>
   );
diff --git a/resources/js/pages/operationState.jsx b/resources/js/pages/operationState.jsx
diff --git a/routes/api.php b/routes/api.php

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ const AgentModalWrapper = ({ children, closeModal }) => {`
`32`	`32`	`>`
`33`	`33`	`<div`
`34`	`34`	`onClick={(e) => e.stopPropagation()}`
`35`		- className={`transform transition-all duration-300 ease-out ${
	`35`	+ className={`mx-2 transform transition-all duration-300 ease-out ${
`36`	`36`	`show ? 'opacity-100 scale-100' : 'opacity-0 scale-95'`
`37`	`37`	} bg-white dark:bg-gray-800 border rounded-xl p-4 shadow max-w-sm w-full`}
`38`	`38`	`>`