chore: Ajout des présences dans le dashboard

This commit is contained in:
N3WT DE COMPET
2025-05-25 19:33:20 +02:00
parent 98763dc90a
commit d877c956b7
3 changed files with 97 additions and 46 deletions

View File

@ -5,7 +5,12 @@ import Button from '@/components/Button';
import Popup from '@/components/Popup';
import { useNotification } from '@/context/NotificationContext';
export default function Attendance({ absences, onToggleJustify, onDelete }) {
export default function Attendance({
absences,
onToggleJustify,
onDelete,
readOnly,
}) {
const [popupVisible, setPopupVisible] = useState(false);
const [popupMessage, setPopupMessage] = useState('');
const [removePopupVisible, setRemovePopupVisible] = useState(false);
@ -32,6 +37,11 @@ export default function Attendance({ absences, onToggleJustify, onDelete }) {
<time className="mb-1 text-xs font-normal leading-none text-gray-400">
{absence.date}
</time>
{readOnly && absence.student_name && (
<div className="mb-1 text-sm font-semibold text-gray-700">
{absence.student_name}
</div>
)}
<div className="flex items-center gap-2">
<span className="font-medium">{absence.type}</span>
<span
@ -44,49 +54,51 @@ export default function Attendance({ absences, onToggleJustify, onDelete }) {
{absence.commentaire}
</div>
</div>
{/* Actions à droite */}
<div className="flex flex-col items-end gap-2 min-w-[110px]">
<ToggleSwitch
name={`justified-${idx}`}
checked={absence.justified}
onChange={() => onToggleJustify(absence)}
label="Justifiée"
/>
<Button
primary
onClick={() => {
setRemovePopupVisible(true);
setRemovePopupMessage(
"Attention ! \nVous êtes sur le point de supprimer l'absence enregistrée.\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?"
);
setRemovePopupOnConfirm(() => () => {
onDelete(absence)
.then((data) => {
showNotification(
'Opération effectuée avec succès.',
'success',
'Succès'
);
setPopupVisible(true);
setRemovePopupVisible(false);
})
.catch((error) => {
showNotification(
'Erreur lors de la suppression de l\absence',
'error',
'Erreur'
);
setPopupVisible(true);
setRemovePopupVisible(false);
});
});
}}
className="mb-1 px-4 py-2 rounded-md shadow bg-emerald-500 text-white hover:bg-emerald-600 w-full"
icon={<Trash2 className="w-6 h-6" />}
text="Supprimer"
title="Evaluez l'élève"
/>
</div>
{/* Actions masquées en lecture seule */}
{!readOnly && (
<div className="flex flex-col items-end gap-2 min-w-[110px]">
<ToggleSwitch
name={`justified-${idx}`}
checked={absence.justified}
onChange={() => onToggleJustify(absence)}
label="Justifiée"
/>
<Button
primary
onClick={() => {
setRemovePopupVisible(true);
setRemovePopupMessage(
"Attention ! \nVous êtes sur le point de supprimer l'absence enregistrée.\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?"
);
setRemovePopupOnConfirm(() => () => {
onDelete(absence)
.then((data) => {
showNotification(
'Opération effectuée avec succès.',
'success',
'Succès'
);
setPopupVisible(true);
setRemovePopupVisible(false);
})
.catch((error) => {
showNotification(
'Erreur lors de la suppression de l\absence',
'error',
'Erreur'
);
setPopupVisible(true);
setRemovePopupVisible(false);
});
});
}}
className="mb-1 px-4 py-2 rounded-md shadow bg-emerald-500 text-white hover:bg-emerald-600 w-full"
icon={<Trash2 className="w-6 h-6" />}
text="Supprimer"
title="Evaluez l'élève"
/>
</div>
)}
</div>
</li>
))}