import React, { useRef, useState, useEffect } from "react"; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css import Button from '@mui/material/Button'; import axios from "axios"; import { getCookie, setCookie } from 'react-use-cookie'; import { useHistory } from "react-router-dom"; import CheckOut from "./CheckOut"; import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid'; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; import { Editor } from '@tinymce/tinymce-react'; import parse from 'html-react-parser'; import { FcViewDetails, FcDisapprove } from "react-icons/fc"; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import add_plus from "../mysy_img/plus.png"; import excel_icone from "../mysy_img/excel_icone.png"; import participants from "../mysy_img/participants.png"; import fileDownload from 'js-file-download' import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { format } from 'date-fns' import moment from "moment"; import InputAdornment from '@mui/material/InputAdornment'; import { AiFillCloseCircle } from "react-icons/ai"; import Box from '@mui/material/Box'; import { Typography, LinearProgress } from '@mui/material'; import styled from 'styled-components'; import { CiTrash } from "react-icons/ci"; import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md"; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import { RestoreFromTrashRounded } from "@mui/icons-material"; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import { Fab } from "@material-ui/core"; import { IoMdAddCircle, IoIosRemoveCircleOutline } from "react-icons/io"; import { AiTwotoneEdit, AiTwotoneSave } from "react-icons/ai"; const DisplayPartnerSession = (props) => { const history = useHistory(); const [submenu, setsubmenu] = useState(""); const [rowss, setRows] = useState([]); const [actionmass_preinsc_val, setactionmass_preinsc_val] = useState(); const [one_SessionstartDateInscription, setone_SessionstartDateInscription] = useState(); const [one_SessionendDateInscription, setone_SessionendDateInscription] = useState(); const [one_SessionendDate, setone_SessionendDate] = useState(); const [one_SessionstartDate, setone_SessionstartDate] = useState(); const [one_urlpreview_certif, setone_urlpreview_certif] = useState(); const [one_field_contenu_ftion, setone_field_contenu_ftion] = useState(""); const filters = [ { value: 'code_session', label: 'Code Session' }, { value: 'class_title', label: 'Titre Formation' }, { value: 'certif', label: 'Certification' } ] const [selectedfilt1, setselectedfilt1] = useState(""); const [selectedfilt2, setselectedfilt2] = useState(""); const [selectedfilt3, setselectedfilt3] = useState(""); const [reftrainingtoupdate, setreftrainingtoupdate] = useState(); const [externalcodetraining_toupdate, setexternalcodetraining_toupdate] = useState(); const [updatetraining, setupdatetraining] = useState(false); function Clearselectedfilt1() { setselectedfilt1(""); } function selectedFilter1(event) { setselectedfilt1(event.value); } function selectedFilter2(event) { setselectedfilt2(event.value); } function selectedFilter3(event) { setselectedfilt3(event.value); } function CancelFiltre2(event) { setselectedfilt2(""); } function CancelFiltre3(event) { setselectedfilt3(""); } function closeTrainingForm() { setupdatetraining(false); } const [selectedtraining, setselectedtraining] = useState([]) const BorderLinearProgress = styled(LinearProgress)(() => ({ height: "20px", width: "60px", borderRadius: "2px", backgroundColor: " #ebf5fb", "& .MuiLinearProgress-bar": { backgroundColor: "#1bd900", transition: "none", transformOrigin: "left", }, })); const [datagrid_columns_size_model1, setdatagrid_columns_size_model1] = useState(200); const [datagrid_columns_size_model2, setdatagrid_columns_size_model2] = useState(100); const columns = [ { field: 'id', headerName: 'id', hide: true }, { field: '_id', headerName: '_id', hide: true }, { field: 'class_internal_url', headerName: 'class_internal_url', hide: true }, { field: 'code_session', headerName: 'Code session', hide: false, flex: 1 }, { field: 'statut', headerName: 'Statut', hide: true, width: datagrid_columns_size_model2, valueFormatter: (params) => { if (String(params.value) === "0") return "Inactif"; else if (String(params.value) === "1") return "Actif"; else return "?"; }, }, { field: 'etape', headerName: 'Etape', hide: false, width: datagrid_columns_size_model2, }, { field: 'class_external_code', headerName: 'Code Formation', align: "center", hideable: true, flex: 1, hide: false, }, { field: 'date_debut', headerName: 'Debut', hide: false, width: datagrid_columns_size_model2, }, { field: 'date_fin', headerName: 'Fin', hideable: false, width: datagrid_columns_size_model2, }, { field: 'distantiel', headerName: 'Distantiel', hideable: false, width: datagrid_columns_size_model2, valueFormatter: (params) => { if (String(params.value) === "0") return "Non"; else if (String(params.value) === "1") return "Oui"; else return "?"; }, }, { field: 'presentiel', headerName: 'Presentiel', width: datagrid_columns_size_model2, valueFormatter: (params) => { if (String(params.value) === "0") return "Non"; else if (String(params.value) === "1") return "Oui"; else return "?"; }, }, { field: 'formateur', headerName: 'Formateur', width: datagrid_columns_size_model1, hide: true, hideable: true, }, { field: 'nb_participant', headerName: 'Nb Parti.', width: datagrid_columns_size_model2, align: "center", }, { field: 'taux_remplissage', headerName: 'Remplissage', align: "center", flex: 1, align: "left", renderCell: (params) => { return ( <> {`${(params?.row.taux_remplissage * 100).toFixed(0)}%`} ); }, }, { field: 'nb_inscrit', headerName: 'Inscrits', width: datagrid_columns_size_model2, align: "center", hide: true, hideable: true, }, { field: 'nb_preinscrit', headerName: 'Preinscrits', width: datagrid_columns_size_model2, align: "center", hide: true, hideable: true, }, { field: 'prix_session', headerName: 'Prix', width: datagrid_columns_size_model2, align: "center", }, { field: 'title', headerName: 'Formation', width: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, }, { field: 'domaine', headerName: 'Domaine', width: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, }, { field: 'duration', headerName: 'Durée', width: datagrid_columns_size_model2, align: "center", }, { field: "Detail", headerName: 'Voir detail', renderCell: (cellValues) => { return ( ); } }, { field: "delete", headerName: 'Supprimer', renderCell: (cellValues) => { return ( { //handleClick_delete_Session_Formation(event, cellValues); }} > } modal nested position="center center" > {close => (
MySy Information
{' '} En confirmant cette opération, la session de formation sera définitivement supprimée.
)}
); } } ] const columns_preinscrit = [ { field: 'id', headerName: 'id', hide: true }, { field: '_id', headerName: '_id', hide: true }, { field: 'email', headerName: 'email', width: 200, hideable: false, flex: 1 }, { field: 'nom', headerName: 'nom', width: 150, hide: false, editable: true }, { field: 'prenom', headerName: 'prenom', width: 150, hide: false, editable: true }, { field: 'employeur', headerName: 'Employeur', width: 200, hide: false, editable: true }, { field: 'opco', headerName: 'Centre Opco', width: 150, hide: false, editable: true }, { field: 'modefinancement', headerName: 'Financement', width: 150, hide: false, editable: true }, { field: 'amount', headerName: 'Montant Formation', width: 150, type: 'number', hideable: false, flex: 1, editable: true }, { field: "update", headerName: 'Mise à jour', renderCell: (cellValues) => { return ( { handleClick_accept(event, cellValues); }} > } modal nested position="center center" > {close => (
MySy Information
{' '} Confirmer la mise à jour des informations du stagiaire
)}
); } }, { field: "valide", headerName: 'Valider', renderCell: (cellValues) => { return ( { handleClick_accept(event, cellValues); }} > } modal nested position="center center" > {close => (
MySy Information
{' '} En confirmant cette opération, l'inscription du stagiaire sera définitivement validée.
Il (le stagiaire) sera automatiquement notifié par email de la validation de son inscription.
Le stagiaire passera de l'onglet "préinscrit" vers l'onglet "inscription".
)}
); } }, { field: "refuse", headerName: 'Refuser', renderCell: (cellValues) => { return ( { handleClick_refuse(event, cellValues); }} > } modal nested position="center center" > {close => (
MySy Information
{' '} En confirmant cette opération, l'inscription du stagiaire sera refusée.
Il (le stagiaire) sera automatiquement notifié par email du refus de son inscription.

Motif du refus :