Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | 1x | 'use client';
import { Employe } from '@/types/employe/employe';
interface EmployesTableProps {
employes: Employe[];
loading: boolean;
searchTerm: string;
onRefresh: () => void;
error: string | null;
handleToggleActive: (employeId: number) => Promise<void>;
}
/**
* Composant de table pour afficher les employés
*/
export default function EmployesTable({
employes,
loading,
searchTerm,
onRefresh,
error,
handleToggleActive,
}: EmployesTableProps) {
// Filtrage des employés basé sur le terme de recherche
const filteredEmployes = employes.filter((employe) => {
Iif (!searchTerm) return true;
const searchLower = searchTerm.toLowerCase();
return (
employe.nom.toLowerCase().includes(searchLower) ||
employe.prenom.toLowerCase().includes(searchLower) ||
employe.user.email.toLowerCase().includes(searchLower) ||
employe.matricule.toLowerCase().includes(searchLower) ||
employe.identifiant_telephone.toLowerCase().includes(searchLower)
);
});
const handleToggleClick = async (employeId: number) => {
try {
await handleToggleActive(employeId);
} catch (error) {
console.error('Erreur lors du changement de statut:', error);
}
};
Iif (loading) {
return (
<div className="bg-white shadow rounded-lg p-6">
<div className="text-center py-8">
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<p className="mt-2 text-gray-600">Chargement des employés...</p>
</div>
</div>
);
}
Iif (error) {
return (
<div className="bg-white shadow rounded-lg p-6">
<div className="text-center py-8">
<div className="text-red-600 mb-4">
<svg className="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">Erreur de chargement</h3>
<p className="text-gray-600 mb-4">{error}</p>
<button
onClick={onRefresh}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Réessayer
</button>
</div>
</div>
);
}
return (
<div className="bg-white shadow rounded-lg overflow-hidden">
{/* En-tête */}
<div className="px-6 py-4 border-b border-gray-200">
<div className="flex items-center justify-between">
<h3 className="text-lg font-medium text-gray-900">
Liste des employés ({filteredEmployes.length})
</h3>
<button
onClick={onRefresh}
className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
<svg className="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Actualiser
</button>
</div>
</div>
{/* Table */}
{filteredEmployes.length === 0 ? (
<div className="text-center py-8">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun employé trouvé</h3>
<p className="mt-1 text-sm text-gray-500">
{searchTerm ? 'Aucun employé ne correspond à votre recherche.' : 'Aucun employé enregistré.'}
</p>
</div>
) : (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Employé
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Matricule
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Email
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Téléphone
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Statut
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{filteredEmployes.map((employe) => (
<tr key={employe.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
<span className="text-sm font-medium text-blue-600">
{employe.prenom?.charAt(0) || '?'}{employe.nom?.charAt(0) || '?'}
</span>
</div>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
{employe.prenom || 'N/A'} {employe.nom || 'N/A'}
</div>
<div className="text-sm text-gray-500">
ID: {employe.id}
</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{employe.matricule}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{employe.user.email}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{employe.identifiant_telephone}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
employe.user.is_active
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
}`}
>
{employe.user.is_active ? 'Actif' : 'Inactif'}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
onClick={() => handleToggleClick(employe.id)}
className={`inline-flex items-center px-3 py-1 rounded-md text-xs font-medium ${
employe.user.is_active
? 'bg-red-100 text-red-700 hover:bg-red-200'
: 'bg-green-100 text-green-700 hover:bg-green-200'
}`}
>
{employe.user.is_active ? 'Désactiver' : 'Activer'}
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
);
}
|