diff --git a/src/components/admin/SupportTab.tsx b/src/components/admin/SupportTab.tsx index ed85e63..c52bbc8 100644 --- a/src/components/admin/SupportTab.tsx +++ b/src/components/admin/SupportTab.tsx @@ -1,35 +1,392 @@ -import React from 'react'; -import { Phone, MessageSquare, HeadphonesIcon } from 'lucide-react'; +import React, { useState } from 'react'; +import { + Phone, + MessageSquare, + HeadphonesIcon, + Ticket, + BookOpen, + BarChart3, + Plus, + Clock, + CheckCircle, + AlertCircle, + Users, + Star +} from 'lucide-react'; +import { useSupport } from '@/hooks/useSupport'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Input } from '@/components/ui/input'; +import { Textarea } from '@/components/ui/textarea'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; interface SupportTabProps { isAdmin: boolean; isSuperAdmin: boolean; } -const SupportTab: React.FC = ({ }) => { +const SupportTab: React.FC = ({ isAdmin, isSuperAdmin }) => { + const { + tickets, + metrics, + knowledgeBase, + chatSessions, + loading, + error, + createTicket, + updateTicketStatus, + clearError + } = useSupport(); + + const [showCreateTicket, setShowCreateTicket] = useState(false); + const [newTicket, setNewTicket] = useState({ + subject: '', + description: '', + priority: 'medium' as const, + category: '' + }); + + const handleCreateTicket = async () => { + if (!newTicket.subject || !newTicket.description) return; + + try { + await createTicket({ + ...newTicket, + status: 'open', + userId: 'current-user' // This should come from auth context + }); + + setNewTicket({ + subject: '', + description: '', + priority: 'medium', + category: '' + }); + setShowCreateTicket(false); + } catch (error) { + console.error('Error creating ticket:', error); + } + }; + + const getPriorityColor = (priority: string) => { + switch (priority) { + case 'urgent': return 'destructive'; + case 'high': return 'destructive'; + case 'medium': return 'default'; + case 'low': return 'secondary'; + default: return 'default'; + } + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'open': return 'destructive'; + case 'in_progress': return 'default'; + case 'resolved': return 'default'; + case 'closed': return 'secondary'; + default: return 'default'; + } + }; + return (
-

Centro de Soporte y Tickets

- -
- -

- Centro de Soporte y Tickets -

-

- Esta sección está en desarrollo y se implementará según las especificaciones del informe. -

-
- Funcionalidades pendientes: -
    -
  • • Sistema de tickets de soporte
    • -
  • • Chat en vivo
    • -
  • • Base de conocimientos
    • -
  • • Métricas de soporte
    • -
  • • Escalación automática
    • -
-
+
+

Centro de Soporte y Tickets

+
+ + {error && ( + + +
+

{error}

+ +
+ + + )} + + + + Resumen + Tickets + Chat en Vivo + Base de Conocimientos + Métricas + + + +
+ + + Total Tickets + + + +
{metrics?.totalTickets || 0}
+ + + + + + Tickets Abiertos + + + +
{metrics?.openTickets || 0}
+ + + + + + Tiempo Promedio + + + +
{metrics?.averageResponseTime || 0}h
+ + + + + + Satisfacción + + + +
{metrics?.customerSatisfaction || 0}/5
+ + +
+ + + +
+ {loading ? ( + + +
+

Cargando tickets...

+ + + ) : tickets.length === 0 ? ( + + + +

No hay tickets disponibles

+ + + ) : ( + tickets.map((ticket) => ( + + +
+
+ {ticket.subject} + + Ticket #{ticket.id} • {new Date(ticket.createdAt).toLocaleDateString()} + +
+
+ + {ticket.priority} + + + {ticket.status} + +
+
+ + +

{ticket.description}

+
+ + Categoría: {ticket.category} + + {(isAdmin || isSuperAdmin) && ( +
+ + +
+ )} +
+ + + )) + )} +
+ + + + + + + + Chat en Vivo + + + Sistema de chat en tiempo real para soporte inmediato + + + +
+ +

+ {chatSessions.length === 0 + ? "No hay sesiones de chat activas" + : `${chatSessions.length} sesiones activas` + } +

+
+ + + + + +
+ {knowledgeBase.length === 0 ? ( + + + +

No hay artículos disponibles

+ + + ) : ( + knowledgeBase.map((article) => ( + + + {article.title} + + Categoría: {article.category} • {article.views} vistas • {article.helpful} útiles + + + +

{article.content}

+
+ {article.tags.map((tag) => ( + + {tag} + + ))} +
+ + + )) + )} +
+ + + + + + + + Métricas de Soporte + + + +
+
+

Resumen de Tickets

+
+
+ Total: + {metrics?.totalTickets || 0} +
+
+ Abiertos: + {metrics?.openTickets || 0} +
+
+ Resueltos: + {metrics?.resolvedTickets || 0} +
+
+
+
+

Rendimiento

+
+
+ Tiempo Promedio: + {metrics?.averageResponseTime || 0} horas +
+
+ Satisfacción: + {metrics?.customerSatisfaction || 0}/5 ⭐ +
+
+
+
+ + + + + + {showCreateTicket && ( + + + Crear Nuevo Ticket + + + setNewTicket(prev => ({ ...prev, subject: e.target.value }))} + /> +