Modif_GestionDoublonsGTARH_Fonctionnel_V1
This commit is contained in:
@@ -0,0 +1,638 @@
|
||||
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 { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Calendar, ArrowLeft, Save, Plus, Trash2, AlertCircle } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
interface TypeConge {
|
||||
id: number;
|
||||
nom: string;
|
||||
couleur: string;
|
||||
}
|
||||
|
||||
interface LigneConge {
|
||||
typeId: number;
|
||||
nombreJours: number;
|
||||
}
|
||||
|
||||
interface Employe {
|
||||
id: number;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
email: string;
|
||||
service: string;
|
||||
soldeCP?: number;
|
||||
soldeRTT?: number;
|
||||
}
|
||||
|
||||
const SaisieManuelle = () => {
|
||||
const navigate = useNavigate();
|
||||
const [employes, setEmployes] = useState<Employe[]>([]);
|
||||
const [typesConge, setTypesConge] = useState<TypeConge[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [employeSelectionne, setEmployeSelectionne] = useState<Employe | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
employeId: "",
|
||||
dateDebut: "",
|
||||
dateFin: "",
|
||||
commentaire: ""
|
||||
});
|
||||
|
||||
const [lignesConge, setLignesConge] = useState<LigneConge[]>([
|
||||
{ typeId: 0, nombreJours: 0 }
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
chargerDonnees();
|
||||
}, []);
|
||||
|
||||
const chargerDonnees = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
// ✅ Charger les employés
|
||||
const respEmployes = await fetch('/api/employes', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!respEmployes.ok) {
|
||||
throw new Error(`Erreur HTTP ${respEmployes.status}`);
|
||||
}
|
||||
|
||||
const dataEmployes = await respEmployes.json();
|
||||
|
||||
// ✅ LOG DÉBOGAGE
|
||||
console.log('📊 Employés reçus:', dataEmployes);
|
||||
console.log(' Type:', Array.isArray(dataEmployes) ? 'Array' : typeof dataEmployes);
|
||||
console.log(' Longueur:', dataEmployes?.length);
|
||||
|
||||
// ✅ VÉRIFICATION : S'assurer que c'est un tableau
|
||||
if (Array.isArray(dataEmployes)) {
|
||||
// ✅ Filtrer les entrées invalides
|
||||
const employesValides = dataEmployes.filter(emp =>
|
||||
emp &&
|
||||
emp.id !== undefined &&
|
||||
emp.nom &&
|
||||
emp.prenom
|
||||
);
|
||||
console.log(' Employés valides:', employesValides.length);
|
||||
setEmployes(employesValides);
|
||||
} else {
|
||||
console.error('❌ dataEmployes n\'est pas un tableau:', dataEmployes);
|
||||
toast.error("Format de données invalide");
|
||||
setEmployes([]);
|
||||
}
|
||||
|
||||
// ✅ Charger les types de congé
|
||||
const respTypes = await fetch('/api/types-conge', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!respTypes.ok) {
|
||||
throw new Error(`Erreur HTTP ${respTypes.status}`);
|
||||
}
|
||||
|
||||
const dataTypes = await respTypes.json();
|
||||
|
||||
if (Array.isArray(dataTypes)) {
|
||||
setTypesConge(dataTypes);
|
||||
} else {
|
||||
console.error('❌ dataTypes n\'est pas un tableau:', dataTypes);
|
||||
setTypesConge([]);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur chargement données:', error);
|
||||
toast.error("Erreur lors du chargement des données");
|
||||
setEmployes([]);
|
||||
setTypesConge([]);
|
||||
}
|
||||
};
|
||||
|
||||
const ajouterLigne = () => {
|
||||
const joursOuvres = calculerJoursOuvres(formData.dateDebut, formData.dateFin);
|
||||
setLignesConge([...lignesConge, { typeId: 0, nombreJours: joursOuvres }]);
|
||||
};
|
||||
|
||||
const supprimerLigne = (index: number) => {
|
||||
if (lignesConge.length > 1) {
|
||||
setLignesConge(lignesConge.filter((_, i) => i !== index));
|
||||
}
|
||||
};
|
||||
|
||||
const modifierLigne = (index: number, field: keyof LigneConge, value: any) => {
|
||||
const nouvelles = [...lignesConge];
|
||||
nouvelles[index] = { ...nouvelles[index], [field]: value };
|
||||
setLignesConge(nouvelles);
|
||||
};
|
||||
|
||||
// Mettre à jour automatiquement tous les nombres de jours quand les dates changent
|
||||
const handleDateChange = (field: 'dateDebut' | 'dateFin', value: string) => {
|
||||
const nouvellesData = { ...formData, [field]: value };
|
||||
setFormData(nouvellesData);
|
||||
|
||||
// Recalculer les jours pour toutes les lignes
|
||||
if (nouvellesData.dateDebut && nouvellesData.dateFin) {
|
||||
const joursOuvres = calculerJoursOuvres(nouvellesData.dateDebut, nouvellesData.dateFin);
|
||||
const nouvellesLignes = lignesConge.map(ligne => ({
|
||||
...ligne,
|
||||
nombreJours: ligne.nombreJours === 0 ? joursOuvres : ligne.nombreJours
|
||||
}));
|
||||
setLignesConge(nouvellesLignes);
|
||||
}
|
||||
};
|
||||
|
||||
const calculerTotalJours = () => {
|
||||
return lignesConge.reduce((total, ligne) => total + (ligne.nombreJours || 0), 0);
|
||||
};
|
||||
|
||||
const calculerJoursOuvres = (debut: string, fin: string) => {
|
||||
if (!debut || !fin) return 0;
|
||||
|
||||
const dateDebut = new Date(debut);
|
||||
const dateFin = new Date(fin);
|
||||
let jours = 0;
|
||||
|
||||
for (let d = new Date(dateDebut); d <= dateFin; d.setDate(d.getDate() + 1)) {
|
||||
const jour = d.getDay();
|
||||
if (jour !== 0 && jour !== 6) {
|
||||
jours++;
|
||||
}
|
||||
}
|
||||
return jours;
|
||||
};
|
||||
|
||||
const handleEmployeChange = (employeId: string) => {
|
||||
setFormData({ ...formData, employeId });
|
||||
const employe = employes.find(e => e.id.toString() === employeId);
|
||||
setEmployeSelectionne(employe || null);
|
||||
};
|
||||
|
||||
const calculerJoursParType = (typeId: number) => {
|
||||
return lignesConge
|
||||
.filter(ligne => ligne.typeId === typeId)
|
||||
.reduce((total, ligne) => total + (ligne.nombreJours || 0), 0);
|
||||
};
|
||||
|
||||
const obtenirSoldeParType = (typeId: number): number => {
|
||||
if (!employeSelectionne) return 0;
|
||||
if (typeId === 1) return employeSelectionne.soldeCP ?? 0;
|
||||
if (typeId === 2) return employeSelectionne.soldeRTT ?? 0;
|
||||
return 0;
|
||||
};
|
||||
|
||||
const obtenirNomType = (typeId: number): string => {
|
||||
const type = typesConge.find(t => t.id === typeId);
|
||||
return type?.nom || '';
|
||||
};
|
||||
|
||||
const calculerRestantParType = (typeId: number): number => {
|
||||
const solde = obtenirSoldeParType(typeId);
|
||||
const saisis = calculerJoursParType(typeId);
|
||||
return solde - saisis;
|
||||
};
|
||||
|
||||
const verifierDepassement = () => {
|
||||
if (!employeSelectionne) return false;
|
||||
|
||||
const joursCP = calculerJoursParType(1);
|
||||
const joursRTT = calculerJoursParType(2);
|
||||
|
||||
return (joursCP > (employeSelectionne.soldeCP ?? 0)) ||
|
||||
(joursRTT > (employeSelectionne.soldeRTT ?? 0));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.employeId || !formData.dateDebut || !formData.dateFin) {
|
||||
toast.error("Veuillez remplir tous les champs obligatoires");
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier que au moins une ligne a des données valides
|
||||
const lignesValides = lignesConge.filter(l => l.typeId > 0 && l.nombreJours > 0);
|
||||
|
||||
if (lignesValides.length === 0) {
|
||||
toast.error("Veuillez remplir au moins une ligne avec un type de congé et un nombre de jours");
|
||||
return;
|
||||
}
|
||||
|
||||
if (verifierDepassement()) {
|
||||
toast.warning("⚠️ Attention: dépassement des compteurs disponibles");
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/demandes', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
collaborateurId: formData.employeId,
|
||||
dateDebut: formData.dateDebut,
|
||||
dateFin: formData.dateFin,
|
||||
typesConge: lignesValides.map(l => ({
|
||||
typeId: l.typeId,
|
||||
nombreJours: l.nombreJours
|
||||
})),
|
||||
commentaire: formData.commentaire
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Demande enregistrée avec succès");
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
throw new Error('Erreur lors de l\'enregistrement');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors de l'enregistrement");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const joursOuvres = calculerJoursOuvres(formData.dateDebut, formData.dateFin);
|
||||
const totalJours = calculerTotalJours();
|
||||
const aDepassement = verifierDepassement();
|
||||
|
||||
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 bg-gradient-primary rounded-xl flex items-center justify-center">
|
||||
<Calendar className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Saisie manuelle</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Card className="shadow-elegant border-0">
|
||||
<CardHeader>
|
||||
<CardTitle>Nouvelle demande de congé</CardTitle>
|
||||
<CardDescription>
|
||||
Enregistrer manuellement une demande d'absence ou de récupération
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Informations générales</h3>
|
||||
|
||||
{/* ✅ SECTION EMPLOYÉ CORRIGÉE */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="employe">
|
||||
Collaborateur <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.employeId}
|
||||
onValueChange={handleEmployeChange}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un collaborateur" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{employes && employes.length > 0 ? (
|
||||
employes
|
||||
.filter(emp => emp && emp.id && emp.prenom && emp.nom)
|
||||
.map(emp => (
|
||||
<SelectItem
|
||||
key={emp.id}
|
||||
value={emp.id.toString()}
|
||||
>
|
||||
{emp.prenom} {emp.nom} - {emp.service || 'Sans service'}
|
||||
</SelectItem>
|
||||
))
|
||||
) : (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
{employes.length === 0
|
||||
? "Chargement des collaborateurs..."
|
||||
: "Aucun collaborateur disponible"}
|
||||
</div>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* ✅ Indicateur de chargement */}
|
||||
{employes.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Chargement des collaborateurs...
|
||||
</p>
|
||||
)}
|
||||
{employes.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{employes.length} collaborateur{employes.length > 1 ? 's' : ''} disponible{employes.length > 1 ? 's' : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{employeSelectionne && (
|
||||
<div className="p-4 bg-primary/5 rounded-lg border border-primary/10">
|
||||
<p className="text-sm font-medium mb-3">Compteurs disponibles</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">Congés Payés (CP)</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{employeSelectionne.soldeCP ?? 0}
|
||||
</p>
|
||||
<span className="text-sm text-muted-foreground">jours</span>
|
||||
</div>
|
||||
{calculerJoursParType(1) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Saisie en cours: <span className="font-semibold text-warning">{calculerJoursParType(1)}j</span>
|
||||
{calculerJoursParType(1) > (employeSelectionne.soldeCP ?? 0) && (
|
||||
<span className="text-destructive ml-1">⚠️ Dépassement!</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-muted-foreground">RTT</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{employeSelectionne.soldeRTT ?? 0}
|
||||
</p>
|
||||
<span className="text-sm text-muted-foreground">jours</span>
|
||||
</div>
|
||||
{calculerJoursParType(2) > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Saisie en cours: <span className="font-semibold text-warning">{calculerJoursParType(2)}j</span>
|
||||
{calculerJoursParType(2) > (employeSelectionne.soldeRTT ?? 0) && (
|
||||
<span className="text-destructive ml-1">⚠️ Dépassement!</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateDebut">Date de début <span className="text-destructive">*</span></Label>
|
||||
<Input
|
||||
id="dateDebut"
|
||||
type="date"
|
||||
value={formData.dateDebut}
|
||||
onChange={(e) => handleDateChange('dateDebut', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dateFin">Date de fin <span className="text-destructive">*</span></Label>
|
||||
<Input
|
||||
id="dateFin"
|
||||
type="date"
|
||||
value={formData.dateFin}
|
||||
onChange={(e) => handleDateChange('dateFin', e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.dateDebut && formData.dateFin && joursOuvres > 0 && (
|
||||
<div className="p-4 bg-primary/5 rounded-lg space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Jours ouvrés de la période</p>
|
||||
<p className="text-2xl font-bold">{joursOuvres}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">Total saisi</p>
|
||||
<p className="text-2xl font-bold">{totalJours}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{employeSelectionne && totalJours > 0 && (
|
||||
<div className="pt-3 border-t space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Répartition par type</p>
|
||||
|
||||
{calculerJoursParType(1) > 0 && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">CP:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="bg-blue-50 text-blue-700">
|
||||
{calculerJoursParType(1)}j
|
||||
</Badge>
|
||||
<span className="text-xs">
|
||||
Restants: <span className={calculerRestantParType(1) < 0 ? "font-bold text-destructive" : "font-bold text-success"}>
|
||||
{calculerRestantParType(1)}j
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{calculerJoursParType(2) > 0 && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">RTT:</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="bg-purple-50 text-purple-700">
|
||||
{calculerJoursParType(2)}j
|
||||
</Badge>
|
||||
<span className="text-xs">
|
||||
Restants: <span className={calculerRestantParType(2) < 0 ? "font-bold text-destructive" : "font-bold text-success"}>
|
||||
{calculerRestantParType(2)}j
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lignesConge.filter(l => l.typeId > 2 && l.nombreJours > 0).map((ligne, idx) => {
|
||||
const typeNom = obtenirNomType(ligne.typeId);
|
||||
return typeNom ? (
|
||||
<div key={idx} className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">{typeNom}:</span>
|
||||
<Badge variant="outline" className="bg-green-50 text-green-700">
|
||||
{calculerJoursParType(ligne.typeId)}j
|
||||
</Badge>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Types de congé</h3>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={ajouterLigne}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
Ajouter un type
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{lignesConge.map((ligne, index) => {
|
||||
const soldeDisponible = obtenirSoldeParType(ligne.typeId);
|
||||
const dejaSaisi = calculerJoursParType(ligne.typeId);
|
||||
const restant = soldeDisponible - dejaSaisi;
|
||||
const enDepassement = restant < 0;
|
||||
|
||||
return (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex gap-3 items-end">
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label>Type de congé</Label>
|
||||
<Select
|
||||
value={ligne.typeId.toString()}
|
||||
onValueChange={(value) => modifierLigne(index, 'typeId', parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{typesConge.map(type => (
|
||||
<SelectItem key={type.id} value={type.id.toString()}>
|
||||
{type.nom}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="w-40 space-y-2">
|
||||
<Label>
|
||||
Nombre de jours
|
||||
{joursOuvres > 0 && (
|
||||
<span className="text-xs text-muted-foreground ml-1">
|
||||
(max: {joursOuvres})
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.5"
|
||||
min="0"
|
||||
max={joursOuvres}
|
||||
value={ligne.nombreJours || ''}
|
||||
onChange={(e) => modifierLigne(index, 'nombreJours', parseFloat(e.target.value) || 0)}
|
||||
placeholder={joursOuvres > 0 ? joursOuvres.toString() : "0"}
|
||||
className={enDepassement && ligne.nombreJours > 0 ? "border-destructive" : ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => supprimerLigne(index)}
|
||||
disabled={lignesConge.length === 1}
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Indicateur de solde pour cette ligne */}
|
||||
{employeSelectionne && ligne.typeId > 0 && ligne.nombreJours > 0 && (
|
||||
<div className={`text-xs px-3 py-1.5 rounded-md ${enDepassement ? 'bg-destructive/10 text-destructive' : 'bg-success/10 text-success'}`}>
|
||||
{obtenirNomType(ligne.typeId)}:
|
||||
<span className="font-semibold ml-1">
|
||||
{soldeDisponible}j disponibles
|
||||
</span>
|
||||
{dejaSaisi > 0 && (
|
||||
<>
|
||||
{' '}→ {dejaSaisi}j saisis =
|
||||
<span className="font-bold ml-1">
|
||||
{restant}j restants
|
||||
{enDepassement && ' ⚠️'}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{aDepassement && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>Attention:</strong> La saisie dépasse les compteurs disponibles du collaborateur.
|
||||
La demande sera tout de même enregistrée mais nécessitera une validation.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="commentaire">Commentaire (optionnel)</Label>
|
||||
<Textarea
|
||||
id="commentaire"
|
||||
placeholder="Préciser le motif, les circonstances..."
|
||||
value={formData.commentaire}
|
||||
onChange={(e) => setFormData({ ...formData, commentaire: e.target.value })}
|
||||
rows={4}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-gradient-primary hover:opacity-90 transition-smooth shadow-elegant"
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{loading ? 'Enregistrement...' : 'Enregistrer la demande'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/dashboard")}
|
||||
disabled={loading}
|
||||
className="transition-smooth"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SaisieManuelle;
|
||||
Reference in New Issue
Block a user