modification concernant l'affichage de type de congés dans la pagedemande+Affichage du service du collabrateur et son rôle+ version mobile de la page demande
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { Calendar as CalendarIcon, Clock, Plus, Settings, RefreshCw, Search, Filter, Eye, Edit, Trash2, Menu, X } from 'lucide-react';
|
||||
import { Plus, Search, Filter, Eye, Menu, X } from 'lucide-react';
|
||||
import NewLeaveRequestModal from '../components/NewLeaveRequestModal';
|
||||
|
||||
const Requests = () => {
|
||||
@@ -17,12 +17,11 @@ const Requests = () => {
|
||||
});
|
||||
|
||||
const [showNewRequestModal, setShowNewRequestModal] = useState(false);
|
||||
const [showAdminPanel, setShowAdminPanel] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const [allRequests, setAllRequests] = useState([]);
|
||||
const [filteredRequests, setFilteredRequests] = useState([]);
|
||||
const [selectedRequest, setSelectedRequest] = useState(null); // 👈 Nouveau
|
||||
const [selectedRequest, setSelectedRequest] = useState(null);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
@@ -31,6 +30,8 @@ const Requests = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [requestsPerPage] = useState(10);
|
||||
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.id) {
|
||||
fetchLeaveCounters();
|
||||
@@ -70,14 +71,12 @@ const Requests = () => {
|
||||
try {
|
||||
const response = await fetch(`http://localhost/GTA/project/public/getLeaveCounters.php?user_id=${user.id}`);
|
||||
const text = await response.text();
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(text);
|
||||
} catch {
|
||||
throw new Error('Le serveur PHP ne répond pas correctement');
|
||||
}
|
||||
|
||||
if (data.success) {
|
||||
setLeaveCounters(data.counters);
|
||||
} else {
|
||||
@@ -93,8 +92,12 @@ const Requests = () => {
|
||||
const url = `http://localhost/GTA/project/public/getRequests.php?user_id=${user.id}`;
|
||||
const response = await fetch(url);
|
||||
const text = await response.text();
|
||||
const data = JSON.parse(text);
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(text);
|
||||
} catch {
|
||||
throw new Error('Le serveur PHP ne répond pas correctement');
|
||||
}
|
||||
if (data.success) {
|
||||
setAllRequests(data.requests || []);
|
||||
} else {
|
||||
@@ -107,33 +110,6 @@ const Requests = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetCounters = async () => {
|
||||
if (!confirm('Réinitialiser les compteurs ? Cette action est irréversible.')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost/GTA/project/public/resetLeaveCounters.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ manual_reset: true }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
alert('Réinitialisation réussie.');
|
||||
fetchLeaveCounters();
|
||||
} else {
|
||||
alert(`Erreur : ${data.message}`);
|
||||
}
|
||||
} catch {
|
||||
alert('Erreur de connexion au serveur');
|
||||
}
|
||||
};
|
||||
|
||||
const openManualResetPage = () => {
|
||||
window.open('http://localhost/GTA/project/public/manualResetCounters.php', '_blank');
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'Approuvé':
|
||||
@@ -157,7 +133,6 @@ const Requests = () => {
|
||||
const indexOfFirstRequest = indexOfLastRequest - requestsPerPage;
|
||||
const currentRequests = filteredRequests.slice(indexOfFirstRequest, indexOfLastRequest);
|
||||
const totalPages = Math.ceil(filteredRequests.length / requestsPerPage);
|
||||
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -178,33 +153,37 @@ const Requests = () => {
|
||||
<Sidebar isOpen={sidebarOpen} onToggle={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="flex-1 lg:ml-60 p-4 lg:p-8">
|
||||
{/* Bouton mobile */}
|
||||
<div className="lg:hidden mb-4">
|
||||
{/* Mobile top bar */}
|
||||
<div className="lg:hidden flex justify-between items-center mb-4">
|
||||
<button onClick={() => setSidebarOpen(true)} className="p-2 rounded-lg bg-white shadow-sm border border-gray-200">
|
||||
<Menu className="w-6 h-6" />
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => setShowFilters(!showFilters)} className="p-2 rounded-lg bg-white shadow-sm border border-gray-200 flex items-center gap-2">
|
||||
<Filter className="w-4 h-4" /> <span className="text-sm">Filtres</span>
|
||||
</button>
|
||||
<button onClick={() => setShowNewRequestModal(true)} className="p-2 rounded-lg bg-blue-600 text-white">
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div className="flex justify-between items-center mb-4 lg:mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-2">
|
||||
Mes Demandes de Congés
|
||||
</h1>
|
||||
<p className="text-sm lg:text-base text-gray-600">Gérez toutes vos demandes de congés</p>
|
||||
<h1 className="text-2xl lg:text-3xl font-bold text-gray-900 mb-1">Mes Demandes de Congés</h1>
|
||||
<p className="text-sm text-gray-600">Gérez toutes vos demandes de congés</p>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:flex items-center gap-3">
|
||||
<button onClick={() => setShowNewRequestModal(true)} className="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" /> Nouvelle demande
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNewRequestModal(true)}
|
||||
className="bg-blue-600 text-white px-3 lg:px-6 py-2 lg:py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
<span className="hidden sm:inline">Nouvelle demande</span>
|
||||
<span className="sm:hidden">Nouveau</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 lg:p-6 mb-6">
|
||||
{/* Filters panel (mobile toggle + desktop always visible) */}
|
||||
<div className={`${showFilters ? 'block' : 'hidden'} lg:block bg-white rounded-xl shadow-sm border border-gray-100 p-4 lg:p-6 mb-6`}>
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
@@ -217,30 +196,20 @@ const Requests = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
>
|
||||
<option value="all">Tous les statuts</option>
|
||||
<option value="En attente">En attente</option>
|
||||
<option value="Validée">Validée</option>
|
||||
<option value="Refusée">Refusée</option>
|
||||
</select>
|
||||
<select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
||||
<option value="all">Tous les statuts</option>
|
||||
<option value="En attente">En attente</option>
|
||||
<option value="Validée">Validée</option>
|
||||
<option value="Refusée">Refusée</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
>
|
||||
<option value="all">Tous les types</option>
|
||||
<option value="Congés payés">Congés payés</option>
|
||||
<option value="RTT">RTT</option>
|
||||
<option value="Congé maladie">Congé maladie</option>
|
||||
<option value="Autres">Autres types</option>
|
||||
</select>
|
||||
</div>
|
||||
<select value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
||||
<option value="all">Tous les types</option>
|
||||
<option value="Congés payés">Congés payés</option>
|
||||
<option value="RTT">RTT</option>
|
||||
<option value="Congé maladie">Congé maladie</option>
|
||||
<option value="Autres">Autres types</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-sm text-gray-600">
|
||||
@@ -249,17 +218,15 @@ const Requests = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tableau + Détails */}
|
||||
{/* Main content: left = list/table, right = details (desktop) */}
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Tableau des demandes */}
|
||||
{/* Left: table (desktop) + cards (mobile) */}
|
||||
<div className="flex-1 bg-white rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900">Toutes mes demandes</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Filter className="w-4 h-4" />
|
||||
Page {currentPage} sur {totalPages || 1}
|
||||
</div>
|
||||
<div className="p-6 border-b border-gray-100 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900">Toutes mes demandes</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<Filter className="w-4 h-4" />
|
||||
<span>Page {currentPage} / {totalPages || 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -267,102 +234,193 @@ const Requests = () => {
|
||||
{currentRequests.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-600">Aucune demande à afficher.</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-4 text-gray-700">Type</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Dates</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Jours</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Statut</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Soumis</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentRequests.map(request => (
|
||||
<tr key={request.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-4 px-4">{request.type}</td>
|
||||
<td className="py-4 px-4">{request.dateDisplay}</td>
|
||||
<td className="py-4 px-4">{request.days}</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(request.status)}`}>
|
||||
<>
|
||||
{/* Desktop table */}
|
||||
<div className="hidden lg:block overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-4 text-gray-700">Type</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Dates</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Jours</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Statut</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Soumis</th>
|
||||
<th className="text-left py-3 px-4 text-gray-700">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentRequests.map(request => (
|
||||
<tr key={request.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-4 px-4">
|
||||
{request.type.split(',').map((t, i) => (
|
||||
<span key={i} className="inline-block bg-gray-100 text-gray-800 text-[11px] px-2 py-0.5 rounded-full mr-1">
|
||||
{t.trim()}
|
||||
</span>
|
||||
))}
|
||||
</td>
|
||||
<td className="py-4 px-4">{request.dateDisplay}</td>
|
||||
<td className="py-4 px-4">{request.days}</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${getStatusColor(request.status)}`}>
|
||||
{request.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4">{request.submittedDisplay}</td>
|
||||
<td className="py-4 px-4">
|
||||
<button onClick={() => handleViewRequest(request)} className="text-blue-600 hover:underline text-sm flex items-center gap-1">
|
||||
<Eye className="w-4 h-4" /> Voir
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile cards */}
|
||||
<div className="lg:hidden space-y-4">
|
||||
{currentRequests.map(request => (
|
||||
<div key={request.id} className="bg-white rounded-lg shadow-sm p-4 border border-gray-200">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap gap-1 mb-2">
|
||||
{request.type.split(',').map((t, i) => (
|
||||
<span key={i} className="bg-gray-100 text-gray-800 text-[11px] px-2 py-0.5 rounded-full">
|
||||
{t.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{request.dateDisplay}</p>
|
||||
<p className="text-sm font-medium mt-1">{request.days} jour{request.days > 1 ? 's' : ''}</p>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${getStatusColor(request.status)}`}>
|
||||
{request.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4">{request.submittedDisplay}</td>
|
||||
<td className="py-4 px-4">
|
||||
<button onClick={() => handleViewRequest(request)} className="text-blue-600 hover:underline text-sm flex items-center gap-1">
|
||||
<Eye className="w-4 h-4" /> Voir
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex justify-between items-center text-sm">
|
||||
<span className="text-gray-500">{request.submittedDisplay}</span>
|
||||
<button onClick={() => handleViewRequest(request)} className="text-blue-600 flex items-center gap-1">
|
||||
<Eye className="w-4 h-4" /> Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Détails */}
|
||||
{selectedRequest && (
|
||||
<div className="w-full lg:max-w-sm bg-white rounded-xl shadow-md border border-gray-100 p-6 h-fit sticky top-20 self-start">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<h3 className="text-lg font-semibold">Détails de la demande</h3>
|
||||
<button onClick={handleCloseDetails} className="text-gray-500 hover:text-gray-800 p-2">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{/* Right: details (desktop) */}
|
||||
<div className="hidden lg:block w-full lg:max-w-sm">
|
||||
{selectedRequest ? (
|
||||
<div className="bg-white rounded-xl shadow-md border border-gray-100 p-6 sticky top-20">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<h3 className="text-lg font-semibold">Détails de la demande</h3>
|
||||
<button onClick={handleCloseDetails} className="text-gray-500 hover:text-gray-800 p-2">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-sm text-gray-700">
|
||||
<div>
|
||||
<p className="text-gray-500">Type</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.type}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Dates</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.dateDisplay}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Nombre de jours</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.days}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Statut</p>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(selectedRequest.status)}`}>
|
||||
{selectedRequest.status}
|
||||
</span>
|
||||
</div>
|
||||
{selectedRequest.reason && (
|
||||
<div className="space-y-4 text-sm text-gray-700">
|
||||
<div>
|
||||
<p className="text-gray-500">Motif</p>
|
||||
<p className="italic">{selectedRequest.reason}</p>
|
||||
<p className="text-gray-500">Type</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.type}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedRequest.fileUrl && (
|
||||
|
||||
<div>
|
||||
<p className="text-gray-500">Arrêt maladie</p>
|
||||
<a
|
||||
href={selectedRequest.fileUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline flex items-center gap-2"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
Voir le fichier
|
||||
</a>
|
||||
<p className="text-gray-500">Dates</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.dateDisplay}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<p className="text-gray-500">Nombre de jours</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.days}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Statut</p>
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${getStatusColor(selectedRequest.status)}`}>
|
||||
{selectedRequest.status}
|
||||
</span>
|
||||
</div>
|
||||
{selectedRequest.reason && (
|
||||
<div>
|
||||
<p className="text-gray-500">Motif</p>
|
||||
<p className="italic">{selectedRequest.reason}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedRequest.fileUrl && (
|
||||
<div>
|
||||
<p className="text-gray-500">Arrêt maladie</p>
|
||||
<a href={selectedRequest.fileUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline flex items-center gap-2">
|
||||
<Eye className="w-4 h-4" /> Voir le fichier
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 text-sm text-gray-500">
|
||||
Sélectionnez une demande pour voir les détails
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{/* Mobile details modal */}
|
||||
{selectedRequest && (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40" onClick={handleCloseDetails}></div>
|
||||
<div className="absolute inset-0 flex items-center justify-center p-4">
|
||||
<div className="bg-white w-full max-w-md h-full overflow-y-auto rounded-lg p-5">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold">Détails</h3>
|
||||
<button onClick={handleCloseDetails} className="text-gray-500">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-sm text-gray-700">
|
||||
<div>
|
||||
<p className="text-gray-500">Type</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.type}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Dates</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.dateDisplay}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Nombre de jours</p>
|
||||
<p className="text-base font-medium text-gray-900">{selectedRequest.days}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500">Statut</p>
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${getStatusColor(selectedRequest.status)}`}>
|
||||
{selectedRequest.status}
|
||||
</span>
|
||||
</div>
|
||||
{selectedRequest.reason && (
|
||||
<div>
|
||||
<p className="text-gray-500">Motif</p>
|
||||
<p className="italic">{selectedRequest.reason}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedRequest.fileUrl && (
|
||||
<div>
|
||||
<p className="text-gray-500">Arrêt maladie</p>
|
||||
<a href={selectedRequest.fileUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline flex items-center gap-2">
|
||||
<Eye className="w-4 h-4" /> Voir le fichier
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New request modal */}
|
||||
{showNewRequestModal && (
|
||||
<NewLeaveRequestModal
|
||||
onClose={() => setShowNewRequestModal(false)}
|
||||
|
||||
Reference in New Issue
Block a user