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 { FcViewDetails, FcDisapprove, FcInfo, FcExpired, FcTimeline } from "react-icons/fc"; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import TextareaAutosize from '@mui/material/TextareaAutosize'; 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 { useCookies } from "react-cookie"; 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 img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import { Fab } from "@material-ui/core"; import { IoMdAddCircle, IoIosRemoveCircleOutline } from "react-icons/io"; import { AiTwotoneSave } from "react-icons/ai"; import ToggleSwitch from "./ToggleSwitch"; import Module_Historique_Action from "./Module_Historique_Action"; import Module_Session_Notes_Classement from "./Module_Session_Notes_Classement"; 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 } from "react-icons/io5"; import { 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 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 { FaUserPen } from "react-icons/fa6"; import allLocales from '@fullcalendar/core/locales-all'; 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, } 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 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"; import MoreVertIcon from '@mui/icons-material/MoreVert'; import Menu from '@mui/material/Menu'; import 'moment/locale/fr'; import Timeline, { TimelineHeaders, SidebarHeader, DateHeader, TimelineMarkers, CustomMarker, TodayMarker, CursorMarker } from 'react-calendar-timeline'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'; import randomColor from "randomcolor"; 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 stored_cookie_session_display_view = getCookie('mysy_session_display_view'); const stored_cookie_session_data_row_grouped_by = getCookie('mysy_session_data_row_grouped_by'); 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 [is_recherche, setis_recherche] = useState("0"); 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 ITEM_HEIGHT_PROMO = 48; const ITEM_HEIGHT = 48; const [anchorEl_promo, setanchorEl_promo] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null); const open_promo = Boolean(anchorEl_promo); const open = Boolean(anchorEl); const options_menu_vertical_promotion = [ 'Archiver/Désarch.', 'Supprimer', ]; const options_menu_vertical = [ 'Renvoyer Conf.', 'Annuler Insc.', ]; const handleClick_option_button_vertical_promo = (event) => { setanchorEl_promo(event.currentTarget); }; const handleClick_option_button_vertical = (event) => { setAnchorEl(event.currentTarget); }; const handleClose_option_button_vertical_promo = (event, value) => { setanchorEl_promo(null); }; const handleClose_option_button_vertical = (event, value) => { setAnchorEl(null); }; 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: 'class_lms_class_code', headerName: 'class_lms_class_code', 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 Promo', 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: 'archive', headerName: 'Archivé', hide: true, Width: 50, editable: false, renderCell: (cellValues) => { return (
{String(cellValues.row.archive) === "1" && "Oui"}  {String(cellValues.row.archive) !== "1" && "Non"} 
); }, }, { 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: 'mode_animation', headerName: 'Mode', width: datagrid_columns_size_model2, renderCell: (cellValues) => { return (
{String(cellValues.row.mode_animation) === "0" && "Prés."}  {String(cellValues.row.mode_animation) === "1" && "Dist."}  {String(cellValues.row.mode_animation) === "2" && "Hybr."} 
); }, }, { 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: false, 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: true, 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 promotion de formation sera définitivement supprimée.
)}
); } },*/ { field: 'bton_vertif', headerName: 'Gestion', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false, editable: false, align: "center", renderCell: (cellValues) => { return (
); }, }, ] const [promo_archive_status, setpromo_archive_status] = React.useState(''); const [working_cellValues_promo, setworking_cellValues_promo] = useState(false); const [dialogOpen_supp_promo, setdialogOpen_supp_promo] = useState(false); const Dialog_menuitem_close_supp_prmo = () => { setdialogOpen_supp_promo(false) }; const [dialogOpen_archive, setdialogOpen_archive] = useState(false); const Dialog_menuitem_close_archive = () => { setdialogOpen_archive(false) }; const options_menu_vertical_preinsc = [ '', 'Mise à jour', 'Valider Insc.', 'Refuser Insc.', 'Supprimer', ]; const [working_cellValues_preisnc, setworking_cellValues_preisnc] = useState(false); const [anchorEl_preinsc, setAnchorEl_preinsc] = React.useState(null); const open_preinsc = Boolean(anchorEl_preinsc); const handleClick_option_button_vertical_preinsc = (event) => { setAnchorEl_preinsc(event.currentTarget); }; const handleClose_option_button_vertical_preinsc = (event, value) => { setAnchorEl_preinsc(null); }; const [dialogOpen_refus_inscription, setdialogOpen_refus_inscription] = useState(false); const Dialog_menuitem_close_refus_inscription = () => { setdialogOpen_refus_inscription(false) }; const [dialogOpen_suppr_preinscription, setdialogOpen_suppr_preinscription] = useState(false); const Dialog_menuitem_suppr_preinscription = () => { setdialogOpen_suppr_preinscription(false) }; 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: 200, flex: 1, hide: false, editable: true, renderCell: (params) => , }, { field: 'prenom', headerName: 'prenom', minWidth: 200, flex: 1, hide: false, editable: true, renderCell: (params) => , }, { field: 'email', headerName: 'email', minWidth: 200, flex: 1, flex: 1, renderCell: (params) => , }, { field: 'client_rattachement_nom', headerName: 'Client', minWidth: 150, flex: 1, 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: 'bton_vertif', headerName: 'Gestion', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false, editable: false, align: "center", renderCell: (cellValues) => { return (