466 lines
17 KiB
TypeScript
466 lines
17 KiB
TypeScript
import { useState } from "react";
|
|
import { trpc } from "@/lib/trpc";
|
|
import { useLocalAuth } from "@/contexts/LocalAuthContext";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { toast } from "sonner";
|
|
import {
|
|
Lightbulb,
|
|
Plus,
|
|
MessageSquare,
|
|
Calendar,
|
|
User,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Send,
|
|
Clock,
|
|
CheckCircle2,
|
|
XCircle,
|
|
AlertCircle,
|
|
} from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import { fr } from "date-fns/locale";
|
|
|
|
type Statut = "ouvert" | "en_cours" | "resolu" | "ferme";
|
|
|
|
const STATUT_CONFIG: Record<Statut, { label: string; color: string; icon: React.ReactNode }> = {
|
|
ouvert: {
|
|
label: "Ouvert",
|
|
color: "bg-blue-100 text-blue-700 border-blue-200",
|
|
icon: <AlertCircle className="h-3 w-3" />,
|
|
},
|
|
en_cours: {
|
|
label: "En cours",
|
|
color: "bg-amber-100 text-amber-700 border-amber-200",
|
|
icon: <Clock className="h-3 w-3" />,
|
|
},
|
|
resolu: {
|
|
label: "Résolu",
|
|
color: "bg-emerald-100 text-emerald-700 border-emerald-200",
|
|
icon: <CheckCircle2 className="h-3 w-3" />,
|
|
},
|
|
ferme: {
|
|
label: "Fermé",
|
|
color: "bg-slate-100 text-slate-600 border-slate-200",
|
|
icon: <XCircle className="h-3 w-3" />,
|
|
},
|
|
};
|
|
|
|
type Idea = {
|
|
id: number;
|
|
userId: number;
|
|
userName: string;
|
|
titre: string;
|
|
message: string;
|
|
statut: Statut;
|
|
reponseAdmin: string | null;
|
|
reponduPar: string | null;
|
|
reponduAt: Date | null;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
};
|
|
|
|
export default function BoiteAIdees() {
|
|
const { user } = useLocalAuth();
|
|
const isAdmin = user?.role === "admin";
|
|
|
|
const { data: ideas = [], refetch } = trpc.ideas.list.useQuery();
|
|
const createMutation = trpc.ideas.create.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Votre demande a été envoyée avec succès !");
|
|
setNewDialogOpen(false);
|
|
setNewTitre("");
|
|
setNewMessage("");
|
|
refetch();
|
|
},
|
|
onError: (e) => toast.error(e.message),
|
|
});
|
|
const reponseMutation = trpc.ideas.repondre.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Réponse enregistrée !");
|
|
setReponseDialogOpen(false);
|
|
setReponseText("");
|
|
setSelectedIdea(null);
|
|
refetch();
|
|
},
|
|
onError: (e) => toast.error(e.message),
|
|
});
|
|
|
|
// État nouvelle demande
|
|
const [newDialogOpen, setNewDialogOpen] = useState(false);
|
|
const [newTitre, setNewTitre] = useState("");
|
|
const [newMessage, setNewMessage] = useState("");
|
|
|
|
// État réponse admin
|
|
const [reponseDialogOpen, setReponseDialogOpen] = useState(false);
|
|
const [selectedIdea, setSelectedIdea] = useState<Idea | null>(null);
|
|
const [reponseText, setReponseText] = useState("");
|
|
const [reponseStatut, setReponseStatut] = useState<Statut>("resolu");
|
|
|
|
// État expansion des cartes
|
|
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
|
|
|
|
// Filtre statut
|
|
const [filtreStatut, setFiltreStatut] = useState<string>("tous");
|
|
const [filtreRecherche, setFiltreRecherche] = useState("");
|
|
|
|
const toggleExpand = (id: number) => {
|
|
setExpandedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleRepondre = (idea: Idea) => {
|
|
setSelectedIdea(idea);
|
|
setReponseText(idea.reponseAdmin ?? "");
|
|
setReponseStatut(idea.statut === "ouvert" ? "en_cours" : idea.statut);
|
|
setReponseDialogOpen(true);
|
|
};
|
|
|
|
const filteredIdeas = (ideas as Idea[]).filter((idea) => {
|
|
const matchStatut = filtreStatut === "tous" || idea.statut === filtreStatut;
|
|
const matchRecherche =
|
|
!filtreRecherche ||
|
|
idea.titre.toLowerCase().includes(filtreRecherche.toLowerCase()) ||
|
|
idea.message.toLowerCase().includes(filtreRecherche.toLowerCase()) ||
|
|
idea.userName.toLowerCase().includes(filtreRecherche.toLowerCase());
|
|
return matchStatut && matchRecherche;
|
|
});
|
|
|
|
const counts = {
|
|
tous: (ideas as Idea[]).length,
|
|
ouvert: (ideas as Idea[]).filter((i) => i.statut === "ouvert").length,
|
|
en_cours: (ideas as Idea[]).filter((i) => i.statut === "en_cours").length,
|
|
resolu: (ideas as Idea[]).filter((i) => i.statut === "resolu").length,
|
|
ferme: (ideas as Idea[]).filter((i) => i.statut === "ferme").length,
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 max-w-5xl mx-auto">
|
|
{/* En-tête */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-amber-100 rounded-xl">
|
|
<Lightbulb className="h-6 w-6 text-amber-600" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-800">Boîte à idées</h1>
|
|
<p className="text-sm text-slate-500">
|
|
{isAdmin
|
|
? "Gérez les questions et suggestions des utilisateurs"
|
|
: "Posez vos questions et partagez vos suggestions"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() => setNewDialogOpen(true)}
|
|
className="bg-[#0a2463] hover:bg-[#0a2463]/90 text-white gap-2 shadow-md"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Nouvelle demande
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Filtres */}
|
|
<div className="flex flex-wrap gap-3 mb-6">
|
|
<div className="flex-1 min-w-[200px]">
|
|
<Input
|
|
placeholder="Rechercher par titre, message ou demandeur..."
|
|
value={filtreRecherche}
|
|
onChange={(e) => setFiltreRecherche(e.target.value)}
|
|
className="bg-white border-slate-200"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{(["tous", "ouvert", "en_cours", "resolu", "ferme"] as const).map((s) => (
|
|
<button
|
|
key={s}
|
|
onClick={() => setFiltreStatut(s)}
|
|
className={`px-3 py-1.5 rounded-full text-xs font-medium border transition-all ${
|
|
filtreStatut === s
|
|
? "bg-[#0a2463] text-white border-[#0a2463]"
|
|
: "bg-white text-slate-600 border-slate-200 hover:border-[#0a2463]/40"
|
|
}`}
|
|
>
|
|
{s === "tous" ? "Tous" : STATUT_CONFIG[s].label}{" "}
|
|
<span className="opacity-70">({counts[s]})</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Liste des demandes */}
|
|
{filteredIdeas.length === 0 ? (
|
|
<div className="text-center py-16 text-slate-400">
|
|
<MessageSquare className="h-12 w-12 mx-auto mb-3 opacity-30" />
|
|
<p className="text-lg font-medium">Aucune demande pour le moment</p>
|
|
<p className="text-sm mt-1">Soyez le premier à soumettre une question ou une suggestion.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{filteredIdeas.map((idea) => {
|
|
const isExpanded = expandedIds.has(idea.id);
|
|
const cfg = STATUT_CONFIG[idea.statut];
|
|
return (
|
|
<div
|
|
key={idea.id}
|
|
className="bg-white rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
|
>
|
|
{/* En-tête de la carte */}
|
|
<div
|
|
className="flex items-start gap-4 p-4 cursor-pointer"
|
|
onClick={() => toggleExpand(idea.id)}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap mb-1">
|
|
<span
|
|
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${cfg.color}`}
|
|
>
|
|
{cfg.icon}
|
|
{cfg.label}
|
|
</span>
|
|
<h3 className="font-semibold text-slate-800 text-sm truncate">
|
|
{idea.titre}
|
|
</h3>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-xs text-slate-400 mt-1">
|
|
<span className="flex items-center gap-1">
|
|
<User className="h-3 w-3" />
|
|
{idea.userName}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="h-3 w-3" />
|
|
{format(new Date(idea.createdAt), "d MMM yyyy à HH:mm", { locale: fr })}
|
|
</span>
|
|
{idea.reponseAdmin && (
|
|
<span className="flex items-center gap-1 text-emerald-600">
|
|
<MessageSquare className="h-3 w-3" />
|
|
Réponse disponible
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{isAdmin && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-xs h-7 px-2 border-[#0a2463]/30 text-[#0a2463] hover:bg-[#0a2463]/5"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleRepondre(idea);
|
|
}}
|
|
>
|
|
<Send className="h-3 w-3 mr-1" />
|
|
Répondre
|
|
</Button>
|
|
)}
|
|
{isExpanded ? (
|
|
<ChevronUp className="h-4 w-4 text-slate-400" />
|
|
) : (
|
|
<ChevronDown className="h-4 w-4 text-slate-400" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contenu développé */}
|
|
{isExpanded && (
|
|
<div className="border-t border-slate-100 px-4 pb-4 pt-3 space-y-3">
|
|
{/* Message */}
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs font-medium text-slate-500 mb-1.5 uppercase tracking-wide">
|
|
Message
|
|
</p>
|
|
<p className="text-sm text-slate-700 whitespace-pre-wrap">{idea.message}</p>
|
|
</div>
|
|
|
|
{/* Réponse admin */}
|
|
{idea.reponseAdmin && (
|
|
<div className="bg-emerald-50 rounded-lg p-3 border border-emerald-100">
|
|
<p className="text-xs font-medium text-emerald-600 mb-1.5 uppercase tracking-wide flex items-center gap-1">
|
|
<MessageSquare className="h-3 w-3" />
|
|
Réponse de l'équipe
|
|
{idea.reponduPar && (
|
|
<span className="text-emerald-500 normal-case ml-1">
|
|
— {idea.reponduPar}
|
|
</span>
|
|
)}
|
|
{idea.reponduAt && (
|
|
<span className="text-emerald-400 normal-case ml-1">
|
|
({format(new Date(idea.reponduAt), "d MMM yyyy", { locale: fr })})
|
|
</span>
|
|
)}
|
|
</p>
|
|
<p className="text-sm text-emerald-800 whitespace-pre-wrap">
|
|
{idea.reponseAdmin}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Dialog : Nouvelle demande */}
|
|
<Dialog open={newDialogOpen} onOpenChange={setNewDialogOpen}>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<Lightbulb className="h-5 w-5 text-amber-500" />
|
|
Nouvelle demande
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-2">
|
|
<div>
|
|
<Label htmlFor="titre" className="text-sm font-medium">
|
|
Titre <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="titre"
|
|
placeholder="Résumez votre demande en quelques mots..."
|
|
value={newTitre}
|
|
onChange={(e) => setNewTitre(e.target.value)}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="message" className="text-sm font-medium">
|
|
Message <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Textarea
|
|
id="message"
|
|
placeholder="Décrivez votre question, suggestion ou remarque en détail..."
|
|
value={newMessage}
|
|
onChange={(e) => setNewMessage(e.target.value)}
|
|
rows={5}
|
|
className="mt-1 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setNewDialogOpen(false)}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (!newTitre.trim() || !newMessage.trim()) {
|
|
toast.error("Veuillez remplir tous les champs");
|
|
return;
|
|
}
|
|
createMutation.mutate({ titre: newTitre.trim(), message: newMessage.trim() });
|
|
}}
|
|
disabled={createMutation.isPending}
|
|
className="bg-[#0a2463] hover:bg-[#0a2463]/90 text-white gap-2"
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
{createMutation.isPending ? "Envoi..." : "Envoyer"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Dialog : Réponse admin */}
|
|
<Dialog open={reponseDialogOpen} onOpenChange={setReponseDialogOpen}>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<MessageSquare className="h-5 w-5 text-[#0a2463]" />
|
|
Répondre à la demande
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
{selectedIdea && (
|
|
<div className="space-y-4 py-2">
|
|
{/* Rappel de la demande */}
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs font-medium text-slate-500 mb-1">Demande de {selectedIdea.userName}</p>
|
|
<p className="text-sm font-semibold text-slate-800">{selectedIdea.titre}</p>
|
|
<p className="text-xs text-slate-600 mt-1 line-clamp-2">{selectedIdea.message}</p>
|
|
</div>
|
|
|
|
{/* Statut */}
|
|
<div>
|
|
<Label className="text-sm font-medium">Statut</Label>
|
|
<Select
|
|
value={reponseStatut}
|
|
onValueChange={(v) => setReponseStatut(v as Statut)}
|
|
>
|
|
<SelectTrigger className="mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ouvert">Ouvert</SelectItem>
|
|
<SelectItem value="en_cours">En cours</SelectItem>
|
|
<SelectItem value="resolu">Résolu</SelectItem>
|
|
<SelectItem value="ferme">Fermé</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Réponse */}
|
|
<div>
|
|
<Label htmlFor="reponse" className="text-sm font-medium">
|
|
Réponse <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Textarea
|
|
id="reponse"
|
|
placeholder="Rédigez votre réponse..."
|
|
value={reponseText}
|
|
onChange={(e) => setReponseText(e.target.value)}
|
|
rows={5}
|
|
className="mt-1 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setReponseDialogOpen(false)}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (!reponseText.trim()) {
|
|
toast.error("Veuillez rédiger une réponse");
|
|
return;
|
|
}
|
|
reponseMutation.mutate({
|
|
id: selectedIdea!.id,
|
|
reponseAdmin: reponseText.trim(),
|
|
statut: reponseStatut,
|
|
});
|
|
}}
|
|
disabled={reponseMutation.isPending}
|
|
className="bg-[#0a2463] hover:bg-[#0a2463]/90 text-white gap-2"
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
{reponseMutation.isPending ? "Envoi..." : "Enregistrer la réponse"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|