[TICKET-UI] Refactor the UI of ticket's page #103
Description
Problème / Contexte
La page de détail d'un ticket (/tickets/:id) présente un design incohérent avec le reste du site. Le header utilise un gradient bleu→violet qui ne correspond plus à la charte graphique actuelle (bleu → bleu ciel), les cards et sections ne suivent pas la même logique de design que les autres pages du projet, et plusieurs données ne s'affichent pas correctement (champs vides, "Invalid Date"). L'ensemble crée une rupture visuelle qui nuit à l'expérience utilisateur et donne un aspect inachevé.
Solution proposée
Refondre l'UI de la page /tickets/:id pour qu'elle soit visuellement cohérente avec le reste du site Edukai : même charte couleur (gradient bleu → bleu ciel), même style de cards, header, badges, et même logique de layout que les autres pages existantes.
Critères d'acceptation
Le header du ticket reprend le gradient bleu → bleu ciel cohérent avec le reste du site et affiche clairement : titre, ID, statut (badge), priorité, catégorie
Les cards d'information suivent le même style (border-radius, shadows, spacing) que celles utilisées sur les autres pages du projet
La section "Informations" affiche correctement le nom et email du créateur et une date de création formatée (plus de "Invalid Date")
La section "Contexte technique" affiche l'URL avec lien cliquable et bouton copier fonctionnel
La section "Description" affiche correctement le contenu du ticket
Le statut du ticket est modifiable par l'admin directement depuis la page
L'UI est responsive et suit la même logique de design que la page admin tickets (liste)
Tests couverts pour : le rendu des sections, le formatage de la date, les interactions admin (changement de statut)
Maquettes / Références
Se baser sur les pages existantes du site (page admin tickets liste, page profil, etc.) pour reprendre exactement les mêmes patterns de cards, header, typographie, et couleurs
Charte couleur de référence : gradient bleu → bleu ciel, pas de violet ni de rose
Impact estimé
Complexité: M
Pages concernées: /tickets/:id (détail ticket côté user et admin)
Notes techniques
Le "Invalid Date" vient probablement d'un mauvais parsing côté front — vérifier le format renvoyé par l'API et utiliser un formateur robuste (Intl.DateTimeFormat ou date-fns)
Les champs vides (créateur, URL) indiquent un problème de fetch ou de mapping — potentiellement lié au ticket [TICKET-FIX], coordonner les deux issues
Décomposer la page en composants réutilisables : , , ,
Réutiliser au maximum les composants et tokens de design déjà existants dans le projet (couleurs, shadows, radius, spacing) pour garantir la cohérence plutôt que de redéfinir des styles custom
Prévoir deux variantes d'affichage : vue user (lecture + envoi de message) et vue admin (lecture + envoi + changement de statut/priorité)