GTARH_Modif_anno27
This commit is contained in:
@@ -0,0 +1,366 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Calendar, ArrowLeft, Search, CheckCircle, XCircle, Edit,
|
||||
Trash2, ClipboardList
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
|
||||
interface HistoriqueAction {
|
||||
Id: number;
|
||||
collaborateur: string;
|
||||
realisePar: string;
|
||||
Action: string;
|
||||
Details: string;
|
||||
DateAction: string;
|
||||
AdresseIP: string;
|
||||
DemandeCongeId: number;
|
||||
}
|
||||
|
||||
const Historique = () => {
|
||||
const navigate = useNavigate();
|
||||
const [historique, setHistorique] = useState<HistoriqueAction[]>([]);
|
||||
const [recherche, setRecherche] = useState("");
|
||||
const [filtreAction, setFiltreAction] = useState("all");
|
||||
const [dateDebut, setDateDebut] = useState("");
|
||||
const [dateFin, setDateFin] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
chargerHistorique();
|
||||
}, [filtreAction, dateDebut, dateFin]);
|
||||
|
||||
const chargerHistorique = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (dateDebut) params.append('dateDebut', dateDebut);
|
||||
if (dateFin) params.append('dateFin', dateFin);
|
||||
if (filtreAction !== 'all') params.append('action', filtreAction);
|
||||
|
||||
const response = await fetch(
|
||||
`/api/historique?${params.toString()}`,
|
||||
{ headers: { 'Authorization': `Bearer ${token}` } }
|
||||
);
|
||||
|
||||
// ⭐ VÉRIFICATION
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// ⭐ SÉCURITÉ : Vérifier que c'est un tableau
|
||||
if (Array.isArray(data)) {
|
||||
setHistorique(data);
|
||||
} else {
|
||||
console.error('❌ Format historique invalide:', data);
|
||||
setHistorique([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur chargement historique:', error);
|
||||
toast.error("Erreur lors du chargement de l'historique");
|
||||
setHistorique([]); // ⭐ Toujours mettre un tableau vide en cas d'erreur
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ⭐ SÉCURITÉ : Vérifier que historique est un tableau avant filter
|
||||
const historiqueFiltré = Array.isArray(historique)
|
||||
? historique.filter(h => {
|
||||
const matchRecherche = h.collaborateur?.toLowerCase().includes(recherche.toLowerCase()) ||
|
||||
h.realisePar?.toLowerCase().includes(recherche.toLowerCase()) ||
|
||||
h.Details?.toLowerCase().includes(recherche.toLowerCase());
|
||||
return matchRecherche;
|
||||
})
|
||||
: [];
|
||||
|
||||
const getActionIcon = (action: string) => {
|
||||
if (action.includes('Validation')) return <CheckCircle className="w-4 h-4 text-success" />;
|
||||
if (action.includes('Refus')) return <XCircle className="w-4 h-4 text-destructive" />;
|
||||
if (action.includes('Modification')) return <Edit className="w-4 h-4 text-warning" />;
|
||||
if (action.includes('Suppression')) return <Trash2 className="w-4 h-4 text-destructive" />;
|
||||
return <ClipboardList className="w-4 h-4 text-primary" />;
|
||||
};
|
||||
|
||||
const getActionBadge = (action: string) => {
|
||||
if (action.includes('Validation')) {
|
||||
return <Badge variant="outline" className="bg-success/10 text-success border-success/20">
|
||||
{action}
|
||||
</Badge>;
|
||||
}
|
||||
if (action.includes('Refus')) {
|
||||
return <Badge variant="outline" className="bg-destructive/10 text-destructive border-destructive/20">
|
||||
{action}
|
||||
</Badge>;
|
||||
}
|
||||
if (action.includes('Modification')) {
|
||||
return <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
|
||||
{action}
|
||||
</Badge>;
|
||||
}
|
||||
return <Badge variant="secondary">{action}</Badge>;
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString('fr-FR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const exporterHistorique = () => {
|
||||
if (historiqueFiltré.length === 0) {
|
||||
toast.error("Aucune donnée à exporter");
|
||||
return;
|
||||
}
|
||||
|
||||
const headers = ['Date et heure', 'Collaborateur concerné', 'Action réalisée par', 'Action', 'Détails', 'Demande ID'];
|
||||
const csvContent = [
|
||||
headers.join(';'),
|
||||
...historiqueFiltré.map(row => [
|
||||
formatDateTime(row.DateAction),
|
||||
row.collaborateur,
|
||||
row.realisePar,
|
||||
row.Action,
|
||||
row.Details,
|
||||
row.DemandeCongeId || ''
|
||||
].join(';'))
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `historique_actions_${new Date().toISOString().split('T')[0]}.csv`;
|
||||
link.click();
|
||||
toast.success("Export réussi");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-subtle">
|
||||
<header className="bg-card border-b border-border shadow-card">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
className="transition-smooth"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: "#7e5aa2" }}>
|
||||
<ClipboardList className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Historique des actions</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={exporterHistorique}
|
||||
disabled={historiqueFiltré.length === 0}
|
||||
>
|
||||
Exporter CSV
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-card border-0 mb-8">
|
||||
<CardContent className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher..."
|
||||
value={recherche}
|
||||
onChange={(e) => setRecherche(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={filtreAction} onValueChange={setFiltreAction}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Type d'action" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Toutes les actions</SelectItem>
|
||||
<SelectItem value="Validation congé">Validations</SelectItem>
|
||||
<SelectItem value="Refus congé">Refus</SelectItem>
|
||||
<SelectItem value="Création demande">Créations</SelectItem>
|
||||
<SelectItem value="Modification demande">Modifications</SelectItem>
|
||||
<SelectItem value="Suppression demande">Suppressions</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
value={dateDebut}
|
||||
onChange={(e) => setDateDebut(e.target.value)}
|
||||
placeholder="Date début"
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
value={dateFin}
|
||||
onChange={(e) => setDateFin(e.target.value)}
|
||||
placeholder="Date fin"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total actions</p>
|
||||
<p className="text-2xl font-bold">{historiqueFiltré.length}</p>
|
||||
</div>
|
||||
<ClipboardList className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Validations</p>
|
||||
<p className="text-2xl font-bold text-success">
|
||||
{historique.filter(h => h.Action.includes('Validation')).length}
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircle className="w-8 h-8 text-success" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Refus</p>
|
||||
<p className="text-2xl font-bold text-destructive">
|
||||
{historique.filter(h => h.Action.includes('Refus')).length}
|
||||
</p>
|
||||
</div>
|
||||
<XCircle className="w-8 h-8 text-destructive" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Modifications</p>
|
||||
<p className="text-2xl font-bold text-warning">
|
||||
{historique.filter(h => h.Action.includes('Modification')).length}
|
||||
</p>
|
||||
</div>
|
||||
<Edit className="w-8 h-8 text-warning" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-card border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Journal des actions</CardTitle>
|
||||
<CardDescription>
|
||||
Traçabilité complète de toutes les actions effectuées
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Chargement...</p>
|
||||
</div>
|
||||
) : historiqueFiltré.length > 0 ? (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Date et heure</TableHead>
|
||||
<TableHead>Collaborateur concerné</TableHead>
|
||||
<TableHead>Action réalisée par</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
<TableHead>Détails</TableHead>
|
||||
<TableHead className="text-center">Demande</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{historiqueFiltré.map((action) => (
|
||||
<TableRow key={action.Id}>
|
||||
<TableCell className="font-medium">
|
||||
{formatDateTime(action.DateAction)}
|
||||
</TableCell>
|
||||
<TableCell>{action.collaborateur}</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-muted-foreground">
|
||||
{action.realisePar || '-'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
{getActionIcon(action.Action)}
|
||||
{getActionBadge(action.Action)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="max-w-md">
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{action.Details}
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{action.DemandeCongeId ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/demandes/${action.DemandeCongeId}`)}
|
||||
>
|
||||
#{action.DemandeCongeId}
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<ClipboardList className="w-16 h-16 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<p className="text-muted-foreground text-lg">Aucune action trouvée</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Historique;
|
||||
Reference in New Issue
Block a user