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 { 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, FcInfo, FcExpired } 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 { FcSearch } from "react-icons/fc"; import { FcAlarmClock, FcMultipleSmartphones, FcWorkflow, FcComments } 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 'moment/locale/fr'; import InputAdornment from '@mui/material/InputAdornment'; import { AiFillCloseCircle, AiOutlineConsoleSql } 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"; import { confirmAlert } from 'react-confirm-alert'; import ToggleSwitch from "./ToggleSwitch"; import Module_Historique_Action from "./Module_Historique_Action"; import { HiDocumentCheck } from "react-icons/hi2"; import { BsSend } from "react-icons/bs"; import Autocomplete from '@mui/material/Autocomplete'; import { FcOpenedFolder } from "react-icons/fc"; import { gridClasses } from '@mui/x-data-grid'; import Link from '@mui/material/Link'; import { PiDotsThree } from "react-icons/pi"; import Module_Editique from "./Module_Editique"; import Module_Attestation_Formation from "./Module_Attestation_Formation"; import Module_Evaluation_Positionnement from "./Module_Evaluation_Positionnement"; import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5"; import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint, FcPlanner } from "react-icons/fc"; import { CiBoxList } from "react-icons/ci"; import FullCalendar from "@fullcalendar/react"; import daygridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; import timeGridPlugin from "@fullcalendar/timegrid"; import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid'; import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import allLocales from '@fullcalendar/core/locales-all' import listPlugin from '@fullcalendar/list'; import multiMonthPlugin from '@fullcalendar/multimonth' import Module_Session_Planification from "./Module_Session_Planification"; import Module_Session_Evaluation from "./Module_Session_Evaluation"; import AccountTreeIcon from '@mui/icons-material/AccountTree'; import FormGroup from '@mui/material/FormGroup'; import Checkbox from '@mui/material/Checkbox'; import { GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext, gridFilteredSortedRowIdsSelector, gridVisibleColumnFieldsSelector, GridValueGetterParams, GridPreferencePanelsValue, } from '@mui/x-data-grid'; import * as XLSX from 'xlsx'; import { makeStyles } from "@material-ui/core/styles"; import Paper from '@material-ui/core/Paper'; import Draggable from 'react-draggable'; import { IconButton } from '@material-ui/core'; import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'; import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; import { DataGridPro } from '@mui/x-data-grid-pro'; import { useCallback, } from "react"; import { DndProvider, useDrag } from "react-dnd"; import { useDrop } from 'react-dnd' import { HTML5Backend } from "react-dnd-html5-backend"; import update from "immutability-helper"; import Module_Alert_Confirmation from "./Module_Alert_Confirmation"; function PaperComponent(props) { return ( ); } const useStyles = makeStyles((theme) => ({ dialog: { position: 'absolute', // left: 10, top: 400 }, paper: { overflowY: 'unset', }, customizedButton: { position: 'absolute', left: '98%', top: '-3%', backgroundColor: 'lightgray', color: 'gray', }, })); const DisplayPartnerSession = (props) => { const classes = useStyles(); 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", }, })); function ExpandableCell_50({ value }) { const [expanded, setExpanded] = React.useState(false); return ( ); } function Display_Colunm_text({ value }) { return (
{value} 
); } 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, disableExport: true, }, { field: '_id', headerName: '_id', hide: true, disableExport: true, }, { field: 'class_id', headerName: 'class_id', hide: true, disableExport: true, }, { field: 'is_bpf', headerName: 'is_bpf', hide: true, }, { field: 'session_alert_message', headerName: 'session_alert_message', hide: true }, { field: 'class_internal_url', headerName: 'class_internal_url', hide: true }, { field: 'is_session_alert', headerName: '', hide: false, Width: 50, flex: 1, renderCell: (cellValues) => { return (
{cellValues.row.is_session_alert && String(cellValues.row.is_session_alert) === "1" && } {cellValues.row.is_session_alert && String(cellValues.row.is_session_alert) !== "1" && ""}
); } }, { field: 'code_session', headerName: 'Code session', hide: false, minWidth: 200, flex: 1, renderCell: (params) => , }, { field: 'session_title', headerName: 'Titre', hide: false, flex: 1, minWidth: 250, renderCell: (params) => , }, { field: 'statut', headerName: 'Statut', hide: true, width: datagrid_columns_size_model2, renderCell: (cellValues) => { return (
{String(cellValues.row.distantiel) === "1" && "Actif"}  {String(cellValues.row.distantiel) !== "1" && "Inactif"} 
); }, }, { field: 'etape', headerName: 'Etape', hide: false, width: datagrid_columns_size_model2, renderCell: (params) => , }, { field: 'class_external_code', headerName: 'Code Formation', align: "center", hideable: true, flex: 1, hide: true, minWidth: 150, renderCell: (params) => , }, { field: 'date_debut', headerName: 'Debut', hide: false, minWidth: 150, renderCell: (params) => , }, { field: 'date_fin', headerName: 'Fin', minWidth: 150, renderCell: (params) => , }, { field: 'distantiel', headerName: 'Distantiel', width: datagrid_columns_size_model2, renderCell: (cellValues) => { return (
{String(cellValues.row.distantiel) === "1" && "Oui"}  {String(cellValues.row.distantiel) !== "1" && "Non"} 
); }, }, { field: 'presentiel', headerName: 'Presentiel', width: datagrid_columns_size_model2, renderCell: (cellValues) => { return (
{String(cellValues.row.presentiel) === "1" && "Oui"}  {String(cellValues.row.presentiel) !== "1" && "Non"} 
); }, }, { field: 'formateur', headerName: 'Formateur', minWidth: datagrid_columns_size_model1, hide: true, hideable: true, renderCell: (params) => , }, { field: 'nb_participant', headerName: 'Nb Parti.', minWidth: datagrid_columns_size_model2, align: "center", hide: true, renderCell: (params) => , }, { field: 'taux_remplissage', headerName: 'Remplissage', align: "center", flex: 1, minWidth: 100, maxWidth: 150, flex: 1, align: "left", renderCell: (params) => { return ( <> {`${(params?.row.taux_remplissage * 100).toFixed(0)}%`} ); }, }, { field: 'nb_inscrit', headerName: 'Insc', minWidth: 20, align: "center", hide: true, hideable: true, renderCell: (params) => , }, { field: 'nb_preinscrit', headerName: 'Preinsc.', minWidth: 20, align: "center", hide: false, hideable: true, renderCell: (params) => , }, { field: 'prix_session', headerName: 'Prix', minWidth: 20, align: "center", renderCell: (params) => , }, { field: 'title', headerName: 'Formation', minWidth: 250, flex: 1, align: "center", hide: true, hideable: true, renderCell: (params) => , }, { field: 'domaine', headerName: 'Domaine', minWidth: datagrid_columns_size_model1, align: "center", hide: true, renderCell: (params) => , }, { field: 'published', headerName: 'publié', minWidth: datagrid_columns_size_model1, align: "center", hide: true, renderCell: (params) => , }, { field: 'site_formation_id', headerName: 'site_formation_id', with: 0, align: "center", hide: true, disableExport: true, }, { field: 'qty_in_quotation', headerName: 'Place Non validé ', with: 150, align: "center", hide: false, renderCell: (params) => , }, { field: 'qty_in_quotation_list_quotation', headerName: 'List Devis ', with: 150, align: "center", hide: false, renderCell: (params) => , }, { field: 'site_formation_nom', headerName: 'Site Ftion', with: 150, align: "center", hide: false, renderCell: (params) => , }, { field: 'invoiced_statut', headerName: 'Facturé', minWidth: 100, flex: 1, maxWidth: 150, hide: false, editable: false, renderCell: (cellValues) => { return (
{String(cellValues.row.invoiced_statut) === "2" && "Oui"} {String(cellValues.row.invoiced_statut) === "1" && "Part."} {String(cellValues.row.invoiced_statut) !== "1" && String(cellValues.row.invoiced_statut) !== "2" && "Non"}
); }, }, { field: 'duration', headerName: 'Durée', minWidth: datagrid_columns_size_model2, align: "center", hide: true, renderCell: (params) => , }, { field: "Detail", headerName: 'Voir détail', disableExport: true, renderCell: (cellValues) => { return ( ); } }, { field: "delete", headerName: 'Supprimer', disableExport: true, 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: 'civilite', headerName: 'Civ.', minWidth: 90, flex: 1, maxWidth: 100, hide: false, editable: false, editable: false, renderCell: (cellValues) => { return (
{New_civilite && New_civilite.length > 0 && cellValues.row.civilite && }
); }, }, { field: 'nom', headerName: 'nom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => , }, { field: 'prenom', headerName: 'prenom', minWidth: 150, flex: 1, hide: false, editable: true, renderCell: (params) => , }, { field: 'email', headerName: 'email', minWidth: 150, flex: 1, flex: 1, renderCell: (params) => , }, { field: 'client_rattachement_nom', headerName: 'Client', minWidth: 150, flex: 1, maxWidth: 200, hide: false, editable: true, renderCell: (params) => , }, { field: 'client_rattachement_id', headerName: 'Client_id', Width: 0, hide: true, editable: true, }, { field: 'client_facture', headerName: 'Client Fact.', minWidth: 200, flex: 1, hide: false, editable: false, renderCell: (cellValues) => { return (
{New_Get_List_Partner_Clients_result && New_Get_List_Partner_Clients_result.length > 0 && }
); } }, { field: 'employeur', headerName: 'Employeur', minWidth: 150, flex: 1, maxWidth: 200, hide: true, editable: true, renderCell: (params) => , }, { field: 'opco', headerName: 'Centre Opco', minWidth: 100, flex: 1, maxWidth: 150, hide: true, editable: true }, { field: 'modefinancement', headerName: 'Financement', minWidth: 100, flex: 1, maxWidth: 150, hide: true, editable: true, renderCell: (cellValues) => { return (
{New_Financement && New_Financement.length > 0 && cellValues.row.modefinancement && }
); }, }, { field: 'amount', headerName: 'Montant Formation', minWidth: 100, flex: 1, maxWidth: 150, type: 'number', flex: 1, editable: true, renderCell: (params) => , }, { 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 :