add ticketing system
Deploy Nexus Portal to HestiaCP (FTP) / build-and-deploy (push) Successful in 14s
Deploy Nexus Portal to HestiaCP (FTP) / build-and-deploy (push) Successful in 14s
This commit is contained in:
maximus
@@ -0,0 +1,374 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { getClientTickets, createTicket, getHelpdesks, getTicketDetails, replyTicket } from '../../services/api'; // Ajout des routes de détails et réponses
|
||||||
|
import { LifeBuoy, Plus, MessageSquare, Clock, CheckCircle2, Send, AlertCircle, Loader, Lock } from 'lucide-react';
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// COMPOSANT 0 : MODAL DE NOTIFICATION (Design System)
|
||||||
|
// ============================================================================
|
||||||
|
const NotificationModal = ({ notification, onClose }) => {
|
||||||
|
if (!notification) return null;
|
||||||
|
const isError = notification.type === 'error';
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
|
||||||
|
<div className={`bg-gray-900 border ${isError ? 'border-red-500/50 shadow-red-500/10' : 'border-cyan-500/50 shadow-cyan-500/10'} rounded-lg shadow-2xl max-w-sm w-full p-6 text-gray-200`}>
|
||||||
|
<h4 className={`text-lg font-mono font-bold tracking-wider mb-2 ${isError ? 'text-red-400' : 'text-cyan-400'}`}>
|
||||||
|
{notification.title.toUpperCase()}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-400 mb-6">{notification.message}</p>
|
||||||
|
<button onClick={onClose} className={`w-full font-mono py-2 rounded text-xs font-bold transition ${isError ? 'bg-red-600 hover:bg-red-500 text-white' : 'bg-cyan-500 hover:bg-cyan-400 text-gray-950'}`}>
|
||||||
|
COMPRIS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================================================
|
||||||
|
// COMPOSANT PRINCIPAL : SUPPORT TICKETS
|
||||||
|
// ============================================================================
|
||||||
|
export default function Support() {
|
||||||
|
const [tickets, setTickets] = useState([]);
|
||||||
|
const [helpdesks, setHelpdesks] = useState([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [isLoadingConversation, setIsLoadingConversation] = useState(false); // Loader spécifique pour le fil de discussion
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
// États pour les formulaires
|
||||||
|
const [subject, setSubject] = useState('');
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
const [replyMessage, setReplyMessage] = useState(''); // Stocke le texte de la réponse
|
||||||
|
const [selectedHelpdesk, setSelectedHelpdesk] = useState('');
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
// États pour les modaux
|
||||||
|
const [customAlert, setCustomAlert] = useState(null);
|
||||||
|
const [isCreatingTicket, setIsCreatingTicket] = useState(false);
|
||||||
|
const [activeTicket, setActiveTicket] = useState(null);
|
||||||
|
|
||||||
|
const triggerAlert = (title, message, type = "info") => {
|
||||||
|
setCustomAlert({ title, message, type });
|
||||||
|
};
|
||||||
|
|
||||||
|
// Chargement synchrone des tickets et des helpdesks
|
||||||
|
const loadSupportData = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const ticketsData = await getClientTickets();
|
||||||
|
if (ticketsData && ticketsData.list) {
|
||||||
|
setTickets(ticketsData.list.map(tkt => ({
|
||||||
|
id: `TKT-${tkt.id}`,
|
||||||
|
db_id: tkt.id,
|
||||||
|
subject: tkt.subject,
|
||||||
|
department: tkt.helpdesk?.name || 'Support Technique',
|
||||||
|
status: (tkt.status === 'open' || tkt.status === 'closed') ? tkt.status : 'pending',
|
||||||
|
lastUpdate: tkt.updated_at || tkt.created_at || 'Récemment',
|
||||||
|
messages: []
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
|
||||||
|
const hdeskPairs = await getHelpdesks();
|
||||||
|
if (hdeskPairs) {
|
||||||
|
const formattedDesks = Object.entries(hdeskPairs).map(([id, name]) => ({ id, name }));
|
||||||
|
setHelpdesks(formattedDesks);
|
||||||
|
const nexusDesk = formattedDesks.find(hd => hd.name.toLowerCase().includes('nexus'));
|
||||||
|
if (nexusDesk) {
|
||||||
|
setSelectedHelpdesk(nexusDesk.id);
|
||||||
|
} else if (formattedDesks.length > 0) {
|
||||||
|
setSelectedHelpdesk(formattedDesks[0].id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message || "Impossible de synchroniser le centre de support.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadSupportData();
|
||||||
|
}, [loadSupportData]);
|
||||||
|
|
||||||
|
// ACTION CLIC : Charger les messages du ticket depuis FOSSBilling
|
||||||
|
const handleOpenTicket = async (ticket) => {
|
||||||
|
try {
|
||||||
|
setIsLoadingConversation(true);
|
||||||
|
// On ouvre immédiatement le modal avec une liste de messages vide pour la fluidité
|
||||||
|
setActiveTicket({ ...ticket, messages: [] });
|
||||||
|
|
||||||
|
const details = await getTicketDetails(ticket.db_id);
|
||||||
|
|
||||||
|
if (details && details.messages) {
|
||||||
|
// FOSSBilling renvoie l'auteur dans msg.author.role ('client', 'staff', 'admin')
|
||||||
|
const formattedMessages = details.messages.map(msg => ({
|
||||||
|
sender: msg.author?.role === 'client' ? 'client' : 'staff',
|
||||||
|
text: msg.content,
|
||||||
|
date: msg.created_at || 'Récemment'
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Injection dynamique des messages dans le modal actif
|
||||||
|
setActiveTicket(prev => prev ? { ...prev, messages: formattedMessages } : null);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
triggerAlert("Erreur Réseau", "Impossible de récupérer l'historique : " + err.message, "error");
|
||||||
|
} finally {
|
||||||
|
setIsLoadingConversation(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ACTION RÉPONSE : Envoyer un message dans le thread actuel
|
||||||
|
const handleReplySubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!replyMessage.trim() || !activeTicket) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await replyTicket(activeTicket.db_id, replyMessage);
|
||||||
|
setReplyMessage(''); // Nettoyer l'input
|
||||||
|
|
||||||
|
// Rechargement instantané du fil de discussion pour afficher le message soumis
|
||||||
|
const details = await getTicketDetails(activeTicket.db_id);
|
||||||
|
if (details && details.messages) {
|
||||||
|
const formattedMessages = details.messages.map(msg => ({
|
||||||
|
sender: msg.author?.role === 'client' ? 'client' : 'staff',
|
||||||
|
text: msg.content,
|
||||||
|
date: msg.created_at || 'Récemment'
|
||||||
|
}));
|
||||||
|
setActiveTicket(prev => prev ? { ...prev, messages: formattedMessages } : null);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
triggerAlert("Échec d'envoi", "Votre réponse n'a pas pu être transmise : " + err.message, "error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Soumission du nouveau ticket
|
||||||
|
const handleCreateTicket = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!subject.trim() || !message.trim() || !selectedHelpdesk) return;
|
||||||
|
|
||||||
|
setIsSubmitting(true);
|
||||||
|
try {
|
||||||
|
await createTicket(subject, message, selectedHelpdesk);
|
||||||
|
setIsCreatingTicket(false);
|
||||||
|
setSubject('');
|
||||||
|
setMessage('');
|
||||||
|
loadSupportData();
|
||||||
|
triggerAlert("Ticket Ouvert", "Votre demande a bien été enregistrée sur le Service Desk.", "success");
|
||||||
|
} catch (err) {
|
||||||
|
triggerAlert("Échec", "Erreur lors de la création du ticket : " + err.message, "error");
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusConfig = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'open': return { color: 'text-cyan-400', bg: 'bg-cyan-500/10', border: 'border-cyan-500/20', label: 'SUPPORT', icon: <MessageSquare className="w-3 h-3 mr-1" /> };
|
||||||
|
case 'pending': return { color: 'text-orange-400', bg: 'bg-orange-500/10', border: 'border-orange-500/20', label: 'EN ATTENTE', icon: <Clock className="w-3 h-3 mr-1" /> };
|
||||||
|
case 'closed': return { color: 'text-gray-400', bg: 'bg-gray-500/10', border: 'border-gray-500/20', label: 'RÉSOLU', icon: <CheckCircle2 className="w-3 h-3 mr-1" /> };
|
||||||
|
default: return { color: 'text-gray-400', bg: 'bg-gray-800', border: 'border-gray-700', label: status.toUpperCase() };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-6xl p-6 mx-auto">
|
||||||
|
|
||||||
|
{/* HEADER */}
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-4">
|
||||||
|
<div>
|
||||||
|
<header>
|
||||||
|
<h1 className="text-3xl font-black text-white tracking-wider flex items-center gap-3">
|
||||||
|
<LifeBuoy className="w-8 h-8 text-cyan-400" />
|
||||||
|
CENTRE DE <span className="text-cyan-400">SUPPORT</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-400 mt-2">Canal de communication sécurisé avec les ingénieurs GISE.</p>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setIsCreatingTicket(true)}
|
||||||
|
className="bg-cyan-500 hover:bg-cyan-400 text-gray-900 px-5 py-2.5 rounded-lg font-bold text-sm transition flex items-center font-mono tracking-widest shadow-[0_0_15px_rgba(0,229,255,0.2)]"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 mr-2" /> NOUVEAU TICKET
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CHARGEMENT & ERREURS GLOBALES */}
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex items-center space-x-3 text-cyan-400 mb-8 font-mono">
|
||||||
|
<Loader className="w-6 h-6 animate-spin" />
|
||||||
|
<span>Déchiffrement de la matrice de support...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center space-x-3 text-red-400 bg-red-400/10 border border-red-400 p-4 rounded-lg mb-8">
|
||||||
|
<AlertCircle className="w-6 h-6" />
|
||||||
|
<span>{error}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* GRILLE DES TICKETS */}
|
||||||
|
{!isLoading && !error && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{tickets.length === 0 ? (
|
||||||
|
<div className="col-span-full text-gray-600 text-sm border border-dashed border-gray-800 rounded-xl p-10 text-center font-mono">
|
||||||
|
Aucun ticket de support actif. L'infrastructure est nominale.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
tickets.map(ticket => {
|
||||||
|
const conf = getStatusConfig(ticket.status);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={ticket.id}
|
||||||
|
onClick={() => handleOpenTicket(ticket)} // Modification ici : Appel de la fonction de chargement au lieu du setter direct
|
||||||
|
className="bg-gray-900 border border-gray-800 rounded-xl p-5 hover:border-cyan-400/50 hover:bg-gray-800/50 transition-all cursor-pointer group flex flex-col justify-between min-h-[160px]"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-start mb-3">
|
||||||
|
<span className="text-gray-500 font-mono text-xs">{ticket.id}</span>
|
||||||
|
<span className={`flex items-center px-2 py-1 rounded text-[10px] font-bold border tracking-wider ${conf.color} ${conf.bg} ${conf.border}`}>
|
||||||
|
{conf.icon} {conf.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white font-bold text-lg mb-1 group-hover:text-cyan-400 transition-colors line-clamp-2">
|
||||||
|
{ticket.subject}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center text-xs text-gray-500 font-mono border-t border-gray-800 pt-3 mt-4">
|
||||||
|
<span>Département: {ticket.department}</span>
|
||||||
|
<span className="truncate max-w-[120px]">MàJ: {ticket.lastUpdate}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* MODAL 1 : CRÉATION DE TICKET */}
|
||||||
|
{isCreatingTicket && (
|
||||||
|
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||||
|
<div className="bg-gray-900 border border-cyan-500/30 rounded-lg shadow-2xl max-w-lg w-full p-6 text-gray-200">
|
||||||
|
<div className="flex justify-between items-center mb-6 border-b border-gray-800 pb-4">
|
||||||
|
<h3 className="text-xl font-bold text-white tracking-wider flex items-center gap-2">
|
||||||
|
<Plus className="w-5 h-5 text-cyan-400" /> OUVRIR UNE REQUÊTE
|
||||||
|
</h3>
|
||||||
|
<button onClick={() => setIsCreatingTicket(false)} className="text-gray-400 hover:text-white transition text-xl">✖</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleCreateTicket} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs uppercase tracking-widest text-cyan-500 mb-1">Sujet de la demande</label>
|
||||||
|
<input type="text" value={subject} onChange={(e) => setSubject(e.target.value)} required placeholder="Ex: Problème d'accès sur l'API" className="w-full bg-black border border-gray-800 text-white p-3 rounded text-sm focus:border-cyan-500 outline-none transition" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs uppercase tracking-widest text-cyan-500 mb-1">
|
||||||
|
Département (Cible Réseau)
|
||||||
|
</label>
|
||||||
|
{/* CHAMP VERROUILLÉ (Read-Only) */}
|
||||||
|
<div className="w-full bg-gray-950 border border-gray-800 text-gray-500 p-3 rounded text-sm font-mono flex items-center justify-between select-none">
|
||||||
|
<span>
|
||||||
|
{helpdesks.find(h => h.id === selectedHelpdesk)?.name || 'Service Desk Nexus'}
|
||||||
|
</span>
|
||||||
|
<Lock className="w-4 h-4 text-gray-700" />
|
||||||
|
</div>
|
||||||
|
<p className="text-[10px] text-gray-600 mt-1">
|
||||||
|
Routage automatique vers les ingénieurs d'infrastructure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs uppercase tracking-widest text-cyan-500 mb-1">Description détaillée</label>
|
||||||
|
<textarea value={message} onChange={(e) => setMessage(e.target.value)} required rows="4" placeholder="Décrivez votre problème technique ici..." className="w-full bg-black border border-gray-800 text-white p-3 rounded text-sm focus:border-cyan-500 outline-none transition resize-none"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" disabled={isSubmitting} className="w-full bg-cyan-600 hover:bg-cyan-500 text-white font-bold font-mono tracking-widest uppercase py-3 rounded mt-2 transition shadow-lg shadow-cyan-500/20 disabled:opacity-50">
|
||||||
|
{isSubmitting ? 'CHIFFREMENT ET TRANSMISSION...' : 'TRANSMETTRE AU SUPPORT NEXUS'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* MODAL 2 : FIL DE DISCUSSION INTERACTIF (THREAD NATIVE) */}
|
||||||
|
{activeTicket && (
|
||||||
|
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-2 sm:p-4">
|
||||||
|
<div className="bg-gray-950 border border-gray-800 rounded-lg shadow-2xl max-w-3xl w-full h-[85vh] flex flex-col">
|
||||||
|
|
||||||
|
{/* Thread Header */}
|
||||||
|
<div className="bg-gray-900 border-b border-gray-800 p-4 sm:p-6 flex justify-between items-start rounded-t-lg">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-1">
|
||||||
|
<span className="text-cyan-500 font-mono text-sm">{activeTicket.id}</span>
|
||||||
|
<span className="bg-gray-800 text-gray-300 text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded border border-gray-700">
|
||||||
|
{activeTicket.department}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-white line-clamp-1">{activeTicket.subject}</h3>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => setActiveTicket(null)} className="text-gray-400 hover:text-white transition text-xl bg-black/50 p-2 rounded-lg">✖</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Thread Body (Messages avec état de chargement) */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-6 scrollbar-thin scrollbar-thumb-gray-800">
|
||||||
|
{isLoadingConversation ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full text-cyan-400 gap-2 font-mono text-xs">
|
||||||
|
<Loader className="w-6 h-6 animate-spin" />
|
||||||
|
<span>Téléchargement des paquets de discussion sécurisés...</span>
|
||||||
|
</div>
|
||||||
|
) : activeTicket.messages.length === 0 ? (
|
||||||
|
<div className="text-center text-gray-600 font-mono text-xs pt-10">
|
||||||
|
Aucun message trouvé dans ce fil.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
activeTicket.messages.map((msg, idx) => (
|
||||||
|
<div key={idx} className={`flex flex-col ${msg.sender === 'client' ? 'items-end' : 'items-start'}`}>
|
||||||
|
<div className="flex items-baseline gap-2 mb-1 px-1">
|
||||||
|
<span className={`text-[10px] font-bold uppercase tracking-widest ${msg.sender === 'client' ? 'text-gray-500' : 'text-cyan-400'}`}>
|
||||||
|
{msg.sender === 'client' ? 'VOUS' : 'INGÉNIEUR GISE'}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-gray-600 font-mono">{msg.date}</span>
|
||||||
|
</div>
|
||||||
|
<div className={`p-4 rounded-xl max-w-[85%] text-sm leading-relaxed ${msg.sender === 'client'
|
||||||
|
? 'bg-gray-800 text-gray-200 rounded-tr-none'
|
||||||
|
: 'bg-cyan-900/20 border border-cyan-800/30 text-cyan-50 rounded-tl-none'
|
||||||
|
}`}>
|
||||||
|
{msg.text}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Thread Footer (Formulaire de réponse branché) */}
|
||||||
|
{activeTicket.status !== 'closed' ? (
|
||||||
|
<form onSubmit={handleReplySubmit} className="bg-gray-900 border-t border-gray-800 p-4 rounded-b-lg">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<textarea
|
||||||
|
rows="2"
|
||||||
|
value={replyMessage}
|
||||||
|
onChange={(e) => setReplyMessage(e.target.value)}
|
||||||
|
required
|
||||||
|
placeholder="Taper une réponse sécurisée..."
|
||||||
|
className="flex-1 bg-black border border-gray-800 text-white p-3 rounded-lg text-sm focus:border-cyan-500 outline-none transition resize-none"
|
||||||
|
></textarea>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="bg-cyan-600 hover:bg-cyan-500 text-white px-6 rounded-lg font-bold font-mono tracking-widest transition flex flex-col items-center justify-center gap-1 shadow-lg shadow-cyan-500/20"
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4" />
|
||||||
|
<span className="text-[10px]">ENVOYER</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<div className="bg-gray-900 border-t border-gray-800 p-4 rounded-b-lg text-center font-mono text-sm text-gray-500">
|
||||||
|
[ CE TICKET EST VERROUILLÉ ET ARCHIVÉ ]
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* VRAI MODAL DE NOTIFICATION */}
|
||||||
|
<NotificationModal notification={customAlert} onClose={() => setCustomAlert(null)} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user