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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
import { useState } from 'react';
import { useSessionExpiry } from '@/hooks/useSessionExpiry';
import { useEmployesManagement } from '@/hooks/useEmployesManagement';
import { CreateEmployeRequest } from '@/types/employe/employe';
import Notification from '@/components/notification';
import EmployesHeader from './EmployesHeader';
import EmployesSearchAndFilters from './EmployesSearchAndFilters';
import EmployesTable from './EmployesTable';
import CreateEmployeForm from './CreateEmployeForm';
/**
* Composant EmployesManagement - Gestion complète des employés
*
* Fonctionnalités :
* - Affichage de la liste des employés avec recherche
* - Création de nouveaux employés
* - Interface responsive avec design moderne
*/
export default function EmployesManagement() {
useSessionExpiry();
const {
employes,
loading,
error,
searchTerm,
statusFilter,
isCreating,
loadEmployes,
createEmploye,
handleSearch,
handleStatusFilter,
toggleEmployeActive
} = useEmployesManagement();
// États pour l'UI
const [notification, setNotification] = useState<{
message: string;
type: 'success' | 'error' | 'info';
} | null>(null);
const [showCreateForm, setShowCreateForm] = useState(false);
const handleCreateEmploye = async (employeData: CreateEmployeRequest): Promise<boolean> => {
const success = await createEmploye(employeData);
if (success) {
setNotification({
message: 'Employé créé avec succès !',
type: 'success'
});
setShowCreateForm(false);
} else {
setNotification({
message: 'Erreur lors de la création de l\'employé',
type: 'error'
});
}
return success;
};
return (
<div className="min-h-screen bg-base-200">
<EmployesHeader onAddEmploye={() => setShowCreateForm(true)} />
<main className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 space-y-6">
<EmployesSearchAndFilters
searchTerm={searchTerm}
onSearchChange={handleSearch}
statusFilter={statusFilter}
onStatusFilterChange={handleStatusFilter}
/>
<EmployesTable
employes={employes}
loading={loading}
searchTerm={searchTerm}
onRefresh={loadEmployes}
error={error}
handleToggleActive={toggleEmployeActive}
/>
</main>
{/* Formulaire de création */}
{showCreateForm && (
<CreateEmployeForm
onSubmit={handleCreateEmploye}
onCancel={() => setShowCreateForm(false)}
isLoading={isCreating}
/>
)}
{/* Notifications */}
{notification && (
<Notification
message={notification.message}
type={notification.type}
onClose={() => setNotification(null)}
/>
)}
</div>
);
}
|