mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 23:43:22 +00:00
875 lines
28 KiB
JavaScript
875 lines
28 KiB
JavaScript
'use client';
|
|
import React, { useState, useEffect } from 'react';
|
|
import Table from '@/components/Table';
|
|
import Tab from '@/components/Tab';
|
|
import { useTranslations } from 'next-intl';
|
|
import StatusLabel from '@/components/StatusLabel';
|
|
import Popup from '@/components/Popup';
|
|
import Loader from '@/components/Loader';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Search,
|
|
Send,
|
|
Edit,
|
|
Archive,
|
|
FileText,
|
|
CheckCircle,
|
|
Plus,
|
|
Upload,
|
|
Eye,
|
|
} from 'lucide-react';
|
|
import Modal from '@/components/Modal';
|
|
import { useEstablishment } from '@/context/EstablishmentContext';
|
|
|
|
import {
|
|
fetchRegisterForms,
|
|
sendRegisterForm,
|
|
archiveRegisterForm,
|
|
editRegisterForm,
|
|
} from '@/app/actions/subscriptionAction';
|
|
|
|
import { fetchClasses } from '@/app/actions/schoolAction';
|
|
|
|
import {
|
|
FE_ADMIN_SUBSCRIPTIONS_EDIT_URL,
|
|
FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL,
|
|
FE_ADMIN_SUBSCRIPTIONS_CREATE_URL,
|
|
BASE_URL,
|
|
} from '@/utils/Url';
|
|
|
|
import DjangoCSRFToken from '@/components/DjangoCSRFToken';
|
|
import { useCsrfToken } from '@/context/CsrfContext';
|
|
import logger from '@/utils/logger';
|
|
import { PhoneLabel } from '@/components/PhoneLabel';
|
|
import FileUpload from '@/components/FileUpload';
|
|
import FilesModal from '@/components/Inscription/FilesModal';
|
|
import { getCurrentSchoolYear, getNextSchoolYear } from '@/utils/Date';
|
|
|
|
import {
|
|
RegistrationFormStatus,
|
|
CURRENT_YEAR_FILTER,
|
|
NEXT_YEAR_FILTER,
|
|
HISTORICAL_FILTER,
|
|
} from '@/utils/constants';
|
|
import AlertMessage from '@/components/AlertMessage';
|
|
import { useNotification } from '@/context/NotificationContext';
|
|
|
|
export default function Page({ params: { locale } }) {
|
|
const t = useTranslations('subscriptions');
|
|
const [registrationForms, setRegistrationForms] = useState([]);
|
|
const [
|
|
registrationFormsDataCurrentYear,
|
|
setRegistrationFormsDataCurrentYear,
|
|
] = useState([]);
|
|
const [registrationFormsDataNextYear, setRegistrationFormsDataNextYear] =
|
|
useState([]);
|
|
const [registrationFormsDataHistorical, setRegistrationFormsDataHistorical] =
|
|
useState([]);
|
|
const currentSchoolYear = getCurrentSchoolYear();
|
|
const nextSchoolYear = getNextSchoolYear();
|
|
const [totalCurrentSchoolYearPages, setTotalCurrentSchoolYearPages] =
|
|
useState(1);
|
|
const [totalNextSchoolYearPages, setTotalNextSchoolYearPages] = useState(1);
|
|
const [totalHistoricalPages, setTotalHistoricalPages] = useState(1);
|
|
const [currentSchoolYearPage, setCurrentSchoolYearPage] = useState(1);
|
|
const [currentSchoolNextYearPage, setCurrentSchoolNextYearPage] = useState(1);
|
|
const [currentSchoolHistoricalYearPage, setCurrentSchoolHistoricalYearPage] =
|
|
useState(1);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [activeTab, setActiveTab] = useState(CURRENT_YEAR_FILTER);
|
|
const [totalCurrentYear, setTotalCurrentYear] = useState(0);
|
|
const [totalNextYear, setTotalNextYear] = useState(0);
|
|
const [totalHistorical, setTotalHistorical] = useState(0);
|
|
const [itemsPerPage, setItemsPerPage] = useState(10); // Définir le nombre d'éléments par page
|
|
|
|
const [student, setStudent] = useState('');
|
|
const [classes, setClasses] = useState([]);
|
|
const [reloadFetch, setReloadFetch] = useState(false);
|
|
|
|
const [isOpenAddGuardian, setIsOpenAddGuardian] = useState(false);
|
|
|
|
const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
|
|
const [selectedRegisterForm, setSelectedRegisterForm] = useState([]);
|
|
|
|
const [confirmPopupVisible, setConfirmPopupVisible] = useState(false);
|
|
const [confirmPopupMessage, setConfirmPopupMessage] = useState('');
|
|
const [confirmPopupOnConfirm, setConfirmPopupOnConfirm] = useState(() => {});
|
|
|
|
const [isSepaUploadModalOpen, setIsSepaUploadModalOpen] = useState(false);
|
|
const [selectedRowForUpload, setSelectedRowForUpload] = useState(null);
|
|
|
|
const csrfToken = useCsrfToken();
|
|
const router = useRouter();
|
|
const { selectedEstablishmentId } = useEstablishment();
|
|
const { showNotification } = useNotification();
|
|
|
|
const openSepaUploadModal = (row) => {
|
|
setSelectedRowForUpload(row);
|
|
setIsSepaUploadModalOpen(true);
|
|
};
|
|
|
|
const closeSepaUploadModal = () => {
|
|
setSelectedRowForUpload(null);
|
|
setIsSepaUploadModalOpen(false);
|
|
};
|
|
|
|
const openFilesModal = (row) => {
|
|
setSelectedRegisterForm(row || []);
|
|
setIsFilesModalOpen(true);
|
|
};
|
|
|
|
const requestErrorHandler = (err) => {
|
|
logger.error('Error fetching data:', err);
|
|
};
|
|
|
|
/**
|
|
* Handles the pending data for the registration form.
|
|
*
|
|
* @param {Object} data - The data object containing registration forms and count.
|
|
* @param {Array} data.registerForms - The array of registration forms.
|
|
* @param {number} data.count - The total count of registration forms.
|
|
*/
|
|
const registerFormCurrrentYearDataHandler = (data) => {
|
|
if (data) {
|
|
const { registerForms, count, page_size } = data;
|
|
setRegistrationFormsDataCurrentYear(registerForms);
|
|
|
|
const calculatedTotalPages =
|
|
count === 0 ? count : Math.ceil(count / page_size);
|
|
setTotalCurrentYear(count);
|
|
setTotalCurrentSchoolYearPages(calculatedTotalPages);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles the data received from the subscription registration form.
|
|
*
|
|
* @param {Object} data - The data object received from the subscription registration form.
|
|
* @param {Array} data.registerForms - An array of registration forms.
|
|
* @param {number} data.count - The total count of subscribed forms.
|
|
*/
|
|
const registerFormNextYearDataHandler = (data) => {
|
|
if (data) {
|
|
const { registerForms, count, page_size } = data;
|
|
setRegistrationFormsDataNextYear(registerForms);
|
|
|
|
const calculatedTotalPages =
|
|
count === 0 ? count : Math.ceil(count / page_size);
|
|
setTotalNextYear(count);
|
|
setTotalNextSchoolYearPages(calculatedTotalPages);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles the archived data for the register form.
|
|
*
|
|
* @param {Object} data - The data object containing archived register forms and count.
|
|
* @param {Array} data.registerForms - The array of archived register forms.
|
|
* @param {number} data.count - The total count of archived register forms.
|
|
*/
|
|
const registerFormHistoricalDataHandler = (data) => {
|
|
if (data) {
|
|
const { registerForms, count, page_size } = data;
|
|
setRegistrationFormsDataHistorical(registerForms);
|
|
|
|
const calculatedTotalPages =
|
|
count === 0 ? count : Math.ceil(count / page_size);
|
|
setTotalHistorical(count);
|
|
setTotalHistoricalPages(calculatedTotalPages);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (selectedEstablishmentId) {
|
|
const fetchDataAndSetState = () => {
|
|
setIsLoading(true);
|
|
Promise.all([
|
|
fetchRegisterForms(
|
|
selectedEstablishmentId,
|
|
CURRENT_YEAR_FILTER,
|
|
currentSchoolYearPage,
|
|
itemsPerPage,
|
|
searchTerm
|
|
)
|
|
.then(registerFormCurrrentYearDataHandler)
|
|
.catch(requestErrorHandler),
|
|
|
|
fetchClasses(selectedEstablishmentId)
|
|
.then((classesData) => {
|
|
setClasses(classesData);
|
|
})
|
|
.catch(requestErrorHandler),
|
|
|
|
fetchRegisterForms(selectedEstablishmentId, NEXT_YEAR_FILTER)
|
|
.then(registerFormNextYearDataHandler)
|
|
.catch(requestErrorHandler),
|
|
fetchRegisterForms(selectedEstablishmentId, HISTORICAL_FILTER)
|
|
.then(registerFormHistoricalDataHandler)
|
|
.catch(requestErrorHandler),
|
|
])
|
|
.then(() => {
|
|
setIsLoading(false);
|
|
setReloadFetch(false);
|
|
})
|
|
.catch((err) => {
|
|
logger.error(err);
|
|
setIsLoading(false);
|
|
setReloadFetch(false);
|
|
});
|
|
};
|
|
|
|
fetchDataAndSetState();
|
|
}
|
|
}, [selectedEstablishmentId, reloadFetch]);
|
|
|
|
useEffect(() => {
|
|
if (selectedEstablishmentId) {
|
|
const fetchDataAndSetState = () => {
|
|
fetchRegisterForms(
|
|
selectedEstablishmentId,
|
|
CURRENT_YEAR_FILTER,
|
|
currentSchoolYearPage,
|
|
itemsPerPage,
|
|
searchTerm
|
|
)
|
|
.then(registerFormCurrrentYearDataHandler)
|
|
.catch(requestErrorHandler);
|
|
fetchRegisterForms(selectedEstablishmentId, NEXT_YEAR_FILTER)
|
|
.then(registerFormNextYearDataHandler)
|
|
.catch(requestErrorHandler);
|
|
fetchRegisterForms(selectedEstablishmentId, HISTORICAL_FILTER)
|
|
.then(registerFormHistoricalDataHandler)
|
|
.catch(requestErrorHandler);
|
|
|
|
setReloadFetch(false);
|
|
};
|
|
|
|
const timeoutId = setTimeout(() => {
|
|
fetchDataAndSetState();
|
|
}, 500); // Debounce la recherche
|
|
return () => clearTimeout(timeoutId);
|
|
}
|
|
}, [searchTerm, selectedEstablishmentId, currentSchoolYearPage, itemsPerPage]);
|
|
|
|
/**
|
|
* UseEffect to update page count of tab
|
|
*/
|
|
useEffect(() => {
|
|
if (activeTab === CURRENT_YEAR_FILTER) {
|
|
setTotalCurrentSchoolYearPages(
|
|
Math.ceil(totalCurrentYear / itemsPerPage)
|
|
);
|
|
} else if (activeTab === NEXT_YEAR_FILTER) {
|
|
setTotalNextSchoolYearPages(Math.ceil(totalNextYear / itemsPerPage));
|
|
} else if (activeTab === HISTORICAL_FILTER) {
|
|
setTotalHistoricalPages(Math.ceil(totalHistorical / itemsPerPage));
|
|
}
|
|
}, [currentSchoolYearPage]);
|
|
|
|
const handleSepaFileUpload = (file, row) => {
|
|
if (!file || !row) {
|
|
logger.error("Aucun fichier ou ligne sélectionnée pour l'upload.");
|
|
return;
|
|
}
|
|
|
|
// Préparer les données JSON
|
|
const jsonData = {
|
|
status: 7,
|
|
};
|
|
|
|
const formData = new FormData();
|
|
|
|
// Ajouter les données JSON sous forme de chaîne
|
|
formData.append('data', JSON.stringify(jsonData));
|
|
formData.append('sepa_file', file);
|
|
|
|
// Appeler l'API pour uploader le fichier SEPA
|
|
editRegisterForm(row.student.id, formData, csrfToken)
|
|
.then((response) => {
|
|
logger.debug('Mandat SEPA uploadé avec succès :', response);
|
|
showNotification(
|
|
'Le mandat SEPA a été uploadé avec succès.',
|
|
'success',
|
|
'Succès'
|
|
);
|
|
setReloadFetch(true);
|
|
closeSepaUploadModal();
|
|
})
|
|
.catch((error) => {
|
|
logger.error("Erreur lors de l'upload du mandat SEPA :", error);
|
|
showNotification(
|
|
"Erreur lors de l'upload du mandat SEPA.",
|
|
'error',
|
|
'Erreur'
|
|
);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Archives a registration form after user confirmation.
|
|
*
|
|
* @param {number} id - The ID of the registration form to be archived.
|
|
* @param {string} nom - The last name of the person whose registration form is being archived.
|
|
* @param {string} prenom - The first name of the person whose registration form is being archived.
|
|
*/
|
|
const archiveFicheInscription = (id, nom, prenom) => {
|
|
setConfirmPopupMessage(
|
|
`Attentions ! \nVous êtes sur le point d'archiver le dossier d'inscription de ${nom} ${prenom}\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?`
|
|
);
|
|
setConfirmPopupOnConfirm(() => () => {
|
|
archiveRegisterForm(id)
|
|
.then((data) => {
|
|
logger.debug('Success:', data);
|
|
showNotification(
|
|
"Le dossier d'inscription a été correctement archivé",
|
|
'success',
|
|
'Succès'
|
|
);
|
|
setRegistrationForms(
|
|
registrationForms.filter((fiche) => fiche.id !== id)
|
|
);
|
|
setReloadFetch(true);
|
|
})
|
|
.catch((error) => {
|
|
showNotification(
|
|
"Erreur lors de l'archivage du dossier d'inscription",
|
|
'error',
|
|
'Erreur'
|
|
);
|
|
});
|
|
setConfirmPopupVisible(false);
|
|
});
|
|
setConfirmPopupVisible(true);
|
|
};
|
|
|
|
const sendConfirmRegisterForm = (id, nom, prenom) => {
|
|
setConfirmPopupMessage(
|
|
`Avertissement ! \nVous êtes sur le point d'envoyer un dossier d'inscription à ${nom} ${prenom}\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?`
|
|
);
|
|
setConfirmPopupOnConfirm(() => () => {
|
|
sendRegisterForm(id)
|
|
.then((data) => {
|
|
logger.debug('Success:', data);
|
|
showNotification(
|
|
"Le dossier d'inscription a été envoyé avec succès",
|
|
'success',
|
|
'Succès'
|
|
);
|
|
setReloadFetch(true);
|
|
})
|
|
.catch((error) => {
|
|
logger.error('Error archiving data:', error);
|
|
showNotification(
|
|
"Erreur lors de l'envoi du dossier d'inscription",
|
|
'error',
|
|
'Erreur'
|
|
);
|
|
});
|
|
setConfirmPopupVisible(false);
|
|
});
|
|
setConfirmPopupVisible(true);
|
|
};
|
|
|
|
const updateStatusAction = (id, newStatus) => {
|
|
logger.debug(
|
|
`Mise à jour du statut du dossier d'inscription avec l'ID : ${id} vers le statut : ${newStatus}`
|
|
);
|
|
};
|
|
|
|
const handleSearchChange = (event) => {
|
|
setSearchTerm(event.target.value);
|
|
};
|
|
|
|
const handlePageChange = (newPage) => {
|
|
if (activeTab === CURRENT_YEAR_FILTER) {
|
|
setCurrentSchoolYearPage(newPage);
|
|
} else if (activeTab === NEXT_YEAR_FILTER) {
|
|
setCurrentSchoolNextYearPage(newPage);
|
|
} else if (activeTab === HISTORICAL_FILTER) {
|
|
setCurrentSchoolHistoricalYearPage(newPage);
|
|
}
|
|
};
|
|
|
|
const getActionsByStatus = (row) => {
|
|
const actions = {
|
|
// Etat "A envoyer" :
|
|
// - Editer le formulaire de création
|
|
// - Envoyer le formulaire aux parents
|
|
// - Archiver le dossier
|
|
[RegistrationFormStatus.STATUS_TO_SEND]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le formulaire de création">
|
|
<Edit className="w-5 h-5 text-blue-500 hover:text-blue-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_CREATE_URL}?id=${row.student.id}&school_year=${activeTab}`
|
|
),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Envoyer le dossier">
|
|
<Send className="w-5 h-5 text-green-500 hover:text-green-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
sendConfirmRegisterForm(
|
|
row.student.id,
|
|
row.student.last_name,
|
|
row.student.first_name
|
|
),
|
|
},
|
|
],
|
|
// Etat "En attente" :
|
|
// - Editer le formulaire de création
|
|
// - Renvoyer le formulaire aux parents
|
|
// - Archiver le dossier
|
|
[RegistrationFormStatus.STATUS_PENDING]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le formulaire de création">
|
|
<Edit className="w-5 h-5 text-blue-500 hover:text-blue-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?studentId=${row.student.id}&enabled=true`
|
|
),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Renvoyer le dossier">
|
|
<Send className="w-5 h-5 text-green-500 hover:text-green-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
sendConfirmRegisterForm(
|
|
row.student.id,
|
|
row.student.last_name,
|
|
row.student.first_name
|
|
),
|
|
},
|
|
],
|
|
// Etat "Signé" :
|
|
// - Editer le formulaire d'inscription
|
|
// - Visualiser les documents signés par les parents
|
|
// - Valider le dossier d'inscription
|
|
// - Archiver le dossier
|
|
[RegistrationFormStatus.STATUS_TO_VALIDATE]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le dossier">
|
|
<Edit className="w-5 h-5 text-blue-500 hover:text-blue-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?studentId=${row.student.id}&enabled=true`
|
|
),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Voir les fichiers">
|
|
<FileText className="w-5 h-5 text-cyan-500 hover:text-cyan-700" />
|
|
</span>
|
|
),
|
|
onClick: () => openFilesModal(row),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Valider le dossier">
|
|
<CheckCircle className="w-5 h-5 text-green-500 hover:text-green-700" />
|
|
</span>
|
|
),
|
|
onClick: () => {
|
|
const url = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&level=${row.student.level}&sepa_file=${row.sepa_file}&student_file=${row.registration_file}`;
|
|
router.push(`${url}`);
|
|
},
|
|
},
|
|
],
|
|
// Etat "A relancer" - NON TESTE
|
|
[RegistrationFormStatus.STATUS_TO_FOLLOW_UP]: [
|
|
// To do...
|
|
],
|
|
// Etat "Validé" :
|
|
// - Editer le formulaire d'inscription
|
|
// - Visualiser les documents signés par les parents
|
|
// - A ajouter : Action pour éditer le suivi de l'élève
|
|
// - Archiver le dossier
|
|
[RegistrationFormStatus.STATUS_VALIDATED]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le dossier">
|
|
<Edit className="w-5 h-5 text-blue-500 hover:text-blue-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?studentId=${row.student.id}&enabled=true`
|
|
),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Voir les fichiers">
|
|
<FileText className="w-5 h-5 text-cyan-500 hover:text-cyan-700" />
|
|
</span>
|
|
),
|
|
onClick: () => openFilesModal(row),
|
|
},
|
|
],
|
|
// Etat "Archivé"
|
|
// - Editer le formulaire d'inscription en lecture seule
|
|
[RegistrationFormStatus.STATUS_ARCHIVED]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le dossier">
|
|
<Eye className="w-5 h-5 text-purple-500 hover:text-purple-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?studentId=${row.student.id}&enabled=false`
|
|
),
|
|
},
|
|
],
|
|
// Etat "En attente de signature de SEPA" :
|
|
// - Editer le formulaire d'inscription
|
|
// - Visualiser les documents signés par les parents
|
|
// - Archiver le dossier
|
|
[RegistrationFormStatus.STATUS_SEPA_PENDING]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le dossier">
|
|
<Edit className="w-5 h-5 text-blue-500 hover:text-blue-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?studentId=${row.student.id}&enabled=true`
|
|
),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Voir les fichiers">
|
|
<FileText className="w-5 h-5 text-cyan-500 hover:text-cyan-700" />
|
|
</span>
|
|
),
|
|
onClick: () => openFilesModal(row),
|
|
},
|
|
],
|
|
// Etat "SEPA à envoyer" :
|
|
// - Editer le formulaire d'inscription
|
|
// - Visualiser les documents signés par les parents
|
|
// - Envoyer le mandat SEPA aux parents
|
|
// - Archiver le dossier
|
|
[RegistrationFormStatus.STATUS_SEPA_TO_SEND]: [
|
|
{
|
|
icon: (
|
|
<span title="Editer le dossier">
|
|
<Edit className="w-5 h-5 text-blue-500 hover:text-blue-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
router.push(
|
|
`${FE_ADMIN_SUBSCRIPTIONS_EDIT_URL}?studentId=${row.student.id}&enabled=true`
|
|
),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Voir les fichiers">
|
|
<FileText className="w-5 h-5 text-cyan-500 hover:text-cyan-700" />
|
|
</span>
|
|
),
|
|
onClick: () => openFilesModal(row),
|
|
},
|
|
{
|
|
icon: (
|
|
<span title="Uploader un mandat SEPA">
|
|
<Upload className="w-5 h-5 text-emerald-500 hover:text-emerald-700" />
|
|
</span>
|
|
),
|
|
onClick: () => openSepaUploadModal(row),
|
|
},
|
|
],
|
|
default: [
|
|
{
|
|
icon: (
|
|
<span title="Archiver le dossier">
|
|
<Archive className="w-5 h-5 text-red-500 hover:text-red-700" />
|
|
</span>
|
|
),
|
|
onClick: () =>
|
|
archiveFicheInscription(
|
|
row.student.id,
|
|
row.student.last_name,
|
|
row.student.first_name
|
|
),
|
|
},
|
|
],
|
|
};
|
|
|
|
// Combine actions for the specific status and default actions
|
|
return [
|
|
...(actions[row.status] || []),
|
|
...(row.status !== 6 ? actions.default : []),
|
|
];
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
name: t('photo'),
|
|
transform: (row) => (
|
|
<div className="flex justify-center items-center">
|
|
{row.student.photo ? (
|
|
<a
|
|
href={`${BASE_URL}${row.student.photo}`} // Lien vers la photo
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<img
|
|
src={`${BASE_URL}${row.student.photo}`}
|
|
alt={`${row.student.first_name} ${row.student.last_name}`}
|
|
className="w-10 h-10 object-cover transition-transform duration-200 hover:scale-125 cursor-pointer rounded-full"
|
|
/>
|
|
</a>
|
|
) : (
|
|
<div className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full">
|
|
<span className="text-gray-500 text-sm font-semibold">
|
|
{row.student.first_name[0]}
|
|
{row.student.last_name[0]}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{ name: t('studentName'), transform: (row) => row.student.last_name },
|
|
{ name: t('studentFistName'), transform: (row) => row.student.first_name },
|
|
{
|
|
name: t('mainContactMail'),
|
|
transform: (row) =>
|
|
row.student.guardians &&
|
|
row.student.guardians.length > 0 &&
|
|
row.student.guardians[0].associated_profile_email,
|
|
},
|
|
{
|
|
name: t('phone'),
|
|
transform: (row) =>
|
|
row.student.guardians[0]?.phone ? (
|
|
<PhoneLabel phoneNumber={row.student.guardians[0]?.phone} />
|
|
) : null, // N'affiche rien si le numéro de téléphone est absent
|
|
},
|
|
{
|
|
name: t('lastUpdateDate'),
|
|
transform: (row) => row.formatted_last_update,
|
|
},
|
|
{
|
|
name: t('registrationFileStatus'),
|
|
transform: (row) => (
|
|
<div className="flex justify-center items-center h-full">
|
|
<StatusLabel
|
|
status={row.status}
|
|
onChange={(newStatus) =>
|
|
updateStatusAction(row.student.id, newStatus)
|
|
}
|
|
showDropdown={false}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
name: 'Actions',
|
|
transform: (row) => (
|
|
<div className="flex justify-center space-x-2">
|
|
{getActionsByStatus(row).map((action, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={action.onClick}
|
|
className="p-2 rounded-full hover:bg-gray-100 transition"
|
|
>
|
|
{action.icon}
|
|
</button>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
let emptyMessage;
|
|
if (activeTab === CURRENT_YEAR_FILTER && searchTerm === '') {
|
|
emptyMessage = (
|
|
<AlertMessage
|
|
type="warning"
|
|
title="Aucun dossier d'inscription pour l'année en cours"
|
|
message="Veuillez procéder à la création d'un nouveau dossier d'inscription pour l'année scolaire en cours."
|
|
/>
|
|
);
|
|
} else if (activeTab === NEXT_YEAR_FILTER && searchTerm === '') {
|
|
emptyMessage = (
|
|
<AlertMessage
|
|
type="info"
|
|
title="Aucun dossier d'inscription pour l'année prochaine"
|
|
message="Aucun dossier n'a encore été créé pour la prochaine année scolaire."
|
|
/>
|
|
);
|
|
} else if (activeTab === HISTORICAL_FILTER && searchTerm === '') {
|
|
emptyMessage = (
|
|
<AlertMessage
|
|
type="info"
|
|
title="Aucun dossier d'inscription historique"
|
|
message="Aucun dossier archivé n'est disponible pour les années précédentes."
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
return (
|
|
<div className="p-8">
|
|
<div className="border-b border-gray-200 mb-6">
|
|
<div className="flex items-center gap-8">
|
|
{/* Tab pour l'année scolaire en cours */}
|
|
<Tab
|
|
text={
|
|
<>
|
|
{currentSchoolYear}
|
|
<span className="ml-2 text-sm text-gray-400">
|
|
({totalCurrentYear})
|
|
</span>
|
|
</>
|
|
}
|
|
active={activeTab === CURRENT_YEAR_FILTER}
|
|
onClick={() => setActiveTab(CURRENT_YEAR_FILTER)}
|
|
/>
|
|
|
|
{/* Tab pour l'année scolaire prochaine */}
|
|
<Tab
|
|
text={
|
|
<>
|
|
{nextSchoolYear}
|
|
<span className="ml-2 text-sm text-gray-400">
|
|
({totalNextYear})
|
|
</span>
|
|
</>
|
|
}
|
|
active={activeTab === NEXT_YEAR_FILTER}
|
|
onClick={() => setActiveTab(NEXT_YEAR_FILTER)}
|
|
/>
|
|
|
|
{/* Tab pour l'historique */}
|
|
<Tab
|
|
text={
|
|
<>
|
|
{t('historical')}
|
|
<span className="ml-2 text-sm text-gray-400">
|
|
({totalHistorical})
|
|
</span>
|
|
</>
|
|
}
|
|
active={activeTab === HISTORICAL_FILTER}
|
|
onClick={() => setActiveTab(HISTORICAL_FILTER)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-b border-gray-200 mb-6 w-full">
|
|
{activeTab === CURRENT_YEAR_FILTER ||
|
|
activeTab === NEXT_YEAR_FILTER ||
|
|
activeTab === HISTORICAL_FILTER ? (
|
|
<React.Fragment>
|
|
<div className="flex justify-between items-center mb-4 w-full">
|
|
<div className="relative flex-grow">
|
|
<Search
|
|
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
|
size={20}
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder={t('searchStudent')}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md"
|
|
value={searchTerm}
|
|
onChange={handleSearchChange}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
const url = `${FE_ADMIN_SUBSCRIPTIONS_CREATE_URL}`;
|
|
router.push(url);
|
|
}}
|
|
className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200 ml-4"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
<DjangoCSRFToken csrfToken={csrfToken} />
|
|
<Table
|
|
key={`${currentSchoolYearPage}-${searchTerm}`}
|
|
data={
|
|
activeTab === CURRENT_YEAR_FILTER
|
|
? registrationFormsDataCurrentYear
|
|
: activeTab === NEXT_YEAR_FILTER
|
|
? registrationFormsDataNextYear
|
|
: registrationFormsDataHistorical
|
|
}
|
|
columns={columns}
|
|
itemsPerPage={itemsPerPage}
|
|
currentPage={
|
|
activeTab === CURRENT_YEAR_FILTER
|
|
? currentSchoolYearPage
|
|
: activeTab === NEXT_YEAR_FILTER
|
|
? currentSchoolNextYearPage
|
|
: currentSchoolHistoricalYearPage
|
|
}
|
|
totalPages={
|
|
activeTab === CURRENT_YEAR_FILTER
|
|
? totalCurrentSchoolYearPages
|
|
: activeTab === NEXT_YEAR_FILTER
|
|
? totalNextSchoolYearPages
|
|
: totalHistoricalPages
|
|
}
|
|
onPageChange={handlePageChange}
|
|
emptyMessage={emptyMessage}
|
|
/>
|
|
</div>
|
|
</React.Fragment>
|
|
) : null}
|
|
</div>
|
|
<Popup
|
|
isOpen={confirmPopupVisible}
|
|
message={confirmPopupMessage}
|
|
onConfirm={confirmPopupOnConfirm}
|
|
onCancel={() => setConfirmPopupVisible(false)}
|
|
/>
|
|
|
|
{isSepaUploadModalOpen && (
|
|
<Modal
|
|
isOpen={isSepaUploadModalOpen}
|
|
setIsOpen={setIsSepaUploadModalOpen}
|
|
title="Uploader un mandat SEPA"
|
|
>
|
|
<FileUpload
|
|
selectionMessage="Sélectionnez un mandat SEPA à uploader"
|
|
onFileSelect={(file) =>
|
|
handleSepaFileUpload(file, selectedRowForUpload)
|
|
}
|
|
/>
|
|
</Modal>
|
|
)}
|
|
{isFilesModalOpen && (
|
|
<FilesModal
|
|
isOpen={isFilesModalOpen}
|
|
setIsOpen={setIsFilesModalOpen}
|
|
selectedRegisterForm={selectedRegisterForm}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|