# Service Management Módulo de gestión de servicios: catálogo de ítems, solicitudes de colaboradores y workspace de agentes para gestión y seguimiento de tickets. --- ## Pantallas y flujos | Pantalla / flujo | Descripción | Entrada | |---|---|---| | Service Items (catálogo) | Listado del catálogo de servicios disponibles para el colaborador | `servicePortal/serviceItems/ServiceItems.tsx` | | Service Item (detalle) | Detalle de un ítem del catálogo con formulario de solicitud | `servicePortal/serviceItem/ServiceItem.tsx` | | Requests (mis solicitudes) | Listado de solicitudes del colaborador (user side) | `servicePortal/Requests.tsx` | | Requested Details | Detalle de una solicitud: info, comentarios, actividad, aprobaciones, subtareas | `servicePortal/requestedDetails/ServiceItemDetails.tsx` | | Approvals Portal | Portal de aprobaciones para el colaborador | `servicePortal/approvals/ApprovalsPortal.tsx` | | Agent Workspace | Shell principal del workspace de agentes (tabs: Tickets, Subtasks, Approvals, CoordinatorPanel) | `agentWorkspace/AgentWorkspace.tsx` | | Tickets | Listado de tickets del agente con filtros, vistas y descarga de reportes | `agentWorkspace/Tickets.tsx` | | Ticket Detail | Detalle de un ticket (misma vista que Requested Details, side agente) | `servicePortal/requestedDetails/ServiceItemDetails.tsx` | | Coordinator Panel | Panel del coordinador con tareas y métricas | `agentWorkspace/CoordinatorPanel.tsx` | | Subtasks | Listado de subtareas del agente | `agentWorkspace/Subtasks.tsx` | | Approvals (agent side) | Listado de aprobaciones del agente | `agentWorkspace/Approvals.tsx` | --- ## Componentes y hooks clave | Nombre | Descripción | Ubicación | |---|---|---| | `useStateTransition` | Lógica de transición de estados de un ticket (modal de confirmación para terminales) | `servicePortal/requestedDetails/hooks/useStateTransition.tsx` | | `useServiceItems` | Lógica del catálogo: categorías, búsqueda, paginación infinita, navegación | `servicePortal/serviceItems/hooks/useServiceItems.ts` | | `useReportDownload` | Lógica del drawer de descarga de reportes (filtros locales, mutaciones de descarga) | `agentWorkspace/hooks/useReportDownload.ts` | | `useTicketViews` | Lógica del listado de tickets: vistas, filtros, query de tareas, reasignación | `agentWorkspace/hooks/useTicketViews.tsx` | | `useHelpDeskSelector` | Selección de helpdesk activo (URL state, opciones, menu) | `agentWorkspace/hooks/useHelpDeskSelector.ts` | | `useCoordinatorFilters` | Filtros del panel coordinador: dos forms, URL state, apply/reset/close | `agentWorkspace/hooks/useCoordinatorFilters.ts` | | `useAgentReassignment` | Reasignación de agente (single y múltiple) con modales de confirmación extraídos | `hooks/useAgentReassignment.tsx` | | `RequestInfoDetail` | Detalle de la solicitud: número, fecha, solicitante, SLA, agente asignado | `servicePortal/requestedDetails/components/Information/RequestInfoDetail.tsx` | | `TasksTable` | Tabla de tickets del workspace de agentes | `agentWorkspace/components/TasksTable.tsx` | | `ViewSidebar` | Sidebar de vistas guardadas del workspace | `agentWorkspace/components/ViewSidebar.tsx` | | `FiltersDrawer` | Drawer de filtros del workspace de agentes | `agentWorkspace/components/FiltersDrawer.tsx` | | `DownloadTasksReportDrawer` | Drawer de configuración y descarga de reportes | `agentWorkspace/components/DownloadTasksReportDrawer.tsx` | | `Comments` | Chat de comentarios de un ticket con soporte de adjuntos y encuesta CSAT | `servicePortal/requestedDetails/components/Comments.tsx` | | `useViews` | CRUD de vistas guardadas del workspace | `hooks/useViews.tsx` | | `ModuleConfigurationContext` | Contexto con la configuración del módulo (SLA, permisos, etc.) | `contexts/ModuleConfigurationContext.tsx` | --- ## Archivos compartidos del módulo | Archivo | Contenido | |---|---| | `routes.ts` | Rutas del módulo (servicePortal y agentWorkspace) | | `queries.ts` | Query keys de React Query para todo el módulo | | `constants.ts` | Constantes compartidas (paginación, valores default de filtros, etc.) — sólo en `agentWorkspace/constants.ts` | | `utils.ts` | Utilidades del módulo (parseo de filtros, URLs, fechas) — en raíz y en `agentWorkspace/utils.ts` | | `general/` | Componentes visuales reutilizables entre servicePortal y agentWorkspace | | `hooks/` | Hooks compartidos entre agentWorkspace y servicePortal | | `contexts/` | `ModuleConfigurationContext` — proveído desde `AgentWorkspace.tsx` y consumido en toda la feature | --- ## Estructura de directorios ``` serviceManagement/ ├── agentWorkspace/ # Workspace del agente (Tickets, CoordinatorPanel, Subtasks, Approvals) │ ├── components/ │ │ ├── modals/ # Modales extraídos: useConfirmSaveViewModal │ │ └── … # TasksTable, FiltersDrawer, ViewSidebar… │ ├── hooks/ # useTicketViews, useReportDownload, useHelpDeskSelector, useCoordinatorFilters… │ ├── form/ # Schemas y field definitions para filtros y reportes │ └── Tickets.tsx / CoordinatorPanel.tsx / Subtasks.tsx / Approvals.tsx ├── servicePortal/ # Portal del colaborador (catálogo, mis solicitudes, detalle) │ ├── requestedDetails/ # Detalle de una solicitud (info, comentarios, actividad, subtareas) │ │ ├── components/ # ServiceInformation, Comments, Activities, FormAnswer… │ │ └── hooks/ # useStateTransition │ ├── serviceItems/ │ │ ├── hooks/ # useServiceItems │ │ └── … # Componentes del catálogo │ └── serviceItem/ # Detalle de ítem + formulario de solicitud ├── general/ # Componentes visuales compartidos (StatusBadge, EmptyCard…) ├── hooks/ │ ├── modals/ # Modales extraídos: useSingleAssignmentConfirmModal, useMultipleAssignmentConfirmModal │ └── … # useAgentReassignment, useViews, useTablePagination… ├── contexts/ # ModuleConfigurationContext ├── routes.ts ├── queries.ts └── utils.ts ``` --- > Actualizar este README cuando se agreguen pantallas, flujos principales o se reorganicen carpetas.