Checkpoint: Système de questionnaires de satisfaction et d'évaluation - Complet et fonctionnel
✅ **Schéma de base de données** (Phase 1) : - Table questionnaires (satisfaction, evaluation_pre, evaluation_post) - Table questions (choix_multiple, echelle, texte_libre, oui_non) - Table reponsesQuestionnaires - Table reponsesQuestions - Table envoisQuestionnaires ✅ **Backend complet** (Phase 2) : - Fichier questionnaireDb.ts avec toutes les fonctions CRUD - Procédures tRPC pour questionnaires (list, getById, create, update, delete, getStats, getReponsesDetaillees) - Procédures tRPC pour questions (list, create, update, delete) - Procédures tRPC publiques pour réponses (getByToken, submit) - Fonctions de statistiques (taux de réponse, réponses détaillées) ✅ **Interfaces d'administration** (Phase 3) : - AdminQuestionnaires : Liste et gestion des questionnaires - AdminQuestionnaireEdit : Création/édition d'un questionnaire avec ses questions - QuestionnaireReponse : Page publique pour répondre aux questionnaires - Routes ajoutées dans App.tsx - Lien "Questionnaires" ajouté dans le menu de navigation ✅ **Envoi automatique post-formation** (Phase 4) : - Fichier questionnaireScheduler.ts - Fonction processEnvoisAutomatiques() pour envoyer les questionnaires - Génération de tokens uniques pour chaque envoi - Emails personnalisés avec lien vers le questionnaire - Procédure tRPC pour déclencher manuellement l'envoi - Scheduler quotidien à 9h00 ✅ **Tableaux de bord d'analyse** (Phase 5) : - AdminQuestionnaireAnalyse : Page d'analyse avec graphiques - Statistiques globales (envois, réponses, taux de réponse) - Graphiques par question (barres, camemberts) - Analyse des réponses numériques (moyennes, distributions) - Affichage des réponses textuelles 🚧 **À faire** : - Exports Excel/PDF des feedbacks - Tests complets du système - Déploiement sur le serveur VPS Le système est maintenant pleinement fonctionnel et prêt à être testé !
This commit is contained in:
Manus Sandbox
233
client/src/pages/AdminQuestionnaireAnalyse.tsx
Normal file
233
client/src/pages/AdminQuestionnaireAnalyse.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
import { useRoute } from "wouter";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import DashboardLayout from "@/components/DashboardLayout";
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
|
||||
import { FileText, Users, CheckCircle2, TrendingUp } from "lucide-react";
|
||||
|
||||
const COLORS = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
|
||||
|
||||
export default function AdminQuestionnaireAnalyse() {
|
||||
const [, params] = useRoute("/admin/questionnaires/:id/analyse");
|
||||
const questionnaireId = parseInt(params?.id || "0");
|
||||
|
||||
const { data: questionnaire } = trpc.questionnaires.getById.useQuery({ id: questionnaireId });
|
||||
const { data: stats } = trpc.questionnaires.getStats.useQuery({ id: questionnaireId });
|
||||
const { data: questions } = trpc.questions.list.useQuery({ questionnaireId });
|
||||
const { data: reponsesDetaillees } = trpc.questionnaires.getReponsesDetaillees.useQuery({ id: questionnaireId });
|
||||
|
||||
if (!questionnaire) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="container mx-auto py-8">
|
||||
<p className="text-center text-muted-foreground">Chargement...</p>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// Analyser les réponses par question
|
||||
const analyseParQuestion = questions?.map((question) => {
|
||||
const reponsesQuestion = reponsesDetaillees?.filter((r) => r.questionId === question.id) || [];
|
||||
|
||||
if (question.typeQuestion === "echelle" || question.typeQuestion === "oui_non") {
|
||||
// Calculer la moyenne et la distribution
|
||||
const valeurs = reponsesQuestion
|
||||
.map((r) => r.reponseNumerique)
|
||||
.filter((v): v is number => v !== null);
|
||||
|
||||
const moyenne = valeurs.length > 0 ? valeurs.reduce((a, b) => a + b, 0) / valeurs.length : 0;
|
||||
|
||||
// Distribution des réponses
|
||||
const distribution: Record<number, number> = {};
|
||||
valeurs.forEach((v) => {
|
||||
distribution[v] = (distribution[v] || 0) + 1;
|
||||
});
|
||||
|
||||
const distributionData = Object.entries(distribution).map(([valeur, count]) => ({
|
||||
valeur: parseInt(valeur),
|
||||
count,
|
||||
label: question.typeQuestion === "oui_non" ? (valeur === "1" ? "Oui" : "Non") : valeur,
|
||||
}));
|
||||
|
||||
return {
|
||||
question,
|
||||
type: "numerique",
|
||||
moyenne: Math.round(moyenne * 10) / 10,
|
||||
totalReponses: valeurs.length,
|
||||
distribution: distributionData,
|
||||
};
|
||||
} else if (question.typeQuestion === "choix_multiple") {
|
||||
// Distribution des choix
|
||||
const choix: Record<string, number> = {};
|
||||
reponsesQuestion.forEach((r) => {
|
||||
if (r.reponseTexte) {
|
||||
choix[r.reponseTexte] = (choix[r.reponseTexte] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
const distributionData = Object.entries(choix).map(([label, count]) => ({
|
||||
label,
|
||||
count,
|
||||
}));
|
||||
|
||||
return {
|
||||
question,
|
||||
type: "choix",
|
||||
totalReponses: reponsesQuestion.length,
|
||||
distribution: distributionData,
|
||||
};
|
||||
} else {
|
||||
// Texte libre - afficher les réponses
|
||||
const reponses = reponsesQuestion
|
||||
.map((r) => r.reponseTexte)
|
||||
.filter((t): t is string => !!t);
|
||||
|
||||
return {
|
||||
question,
|
||||
type: "texte",
|
||||
totalReponses: reponses.length,
|
||||
reponses: reponses.slice(0, 10), // Limiter à 10 réponses
|
||||
};
|
||||
}
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="container mx-auto py-8">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold">{questionnaire.nom}</h1>
|
||||
<p className="text-muted-foreground mt-1">Analyse des réponses</p>
|
||||
</div>
|
||||
|
||||
{/* Statistiques globales */}
|
||||
<div className="grid gap-4 md:grid-cols-4 mb-8">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Envois</CardTitle>
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats?.totalEnvois || 0}</div>
|
||||
<p className="text-xs text-muted-foreground">Questionnaires envoyés</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Réponses</CardTitle>
|
||||
<CheckCircle2 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats?.totalReponses || 0}</div>
|
||||
<p className="text-xs text-muted-foreground">Questionnaires complétés</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Taux de réponse</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats?.tauxReponse || 0}%</div>
|
||||
<Progress value={stats?.tauxReponse || 0} className="mt-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Questions</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{questions?.length || 0}</div>
|
||||
<p className="text-xs text-muted-foreground">Questions au total</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Analyse par question */}
|
||||
<div className="space-y-6">
|
||||
{analyseParQuestion.map((analyse, index) => (
|
||||
<Card key={index}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">
|
||||
Question {index + 1} : {analyse.question.texte}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{analyse.totalReponses} réponse(s)
|
||||
{analyse.type === "numerique" && ` - Moyenne: ${analyse.moyenne}`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{analyse.type === "numerique" && analyse.distribution && (
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={analyse.distribution}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="label" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="count" fill="#3b82f6" name="Nombre de réponses" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{analyse.type === "choix" && analyse.distribution && (
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={analyse.distribution}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={({ label, percent }) => `${label} (${(percent * 100).toFixed(0)}%)`}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="count"
|
||||
>
|
||||
{analyse.distribution.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{analyse.type === "texte" && analyse.reponses && (
|
||||
<div className="space-y-2">
|
||||
{analyse.reponses.map((reponse, i) => (
|
||||
<div key={i} className="p-3 bg-muted rounded-md">
|
||||
<p className="text-sm">{reponse}</p>
|
||||
</div>
|
||||
))}
|
||||
{analyse.totalReponses > 10 && (
|
||||
<p className="text-sm text-muted-foreground text-center mt-4">
|
||||
... et {analyse.totalReponses - 10} autre(s) réponse(s)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{analyseParQuestion.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<p className="text-muted-foreground">Aucune réponse pour le moment</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user