import React, { useState, useEffect } from "react";
import axios from "axios";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import TrainingForm from "./AddClassManual"
import PartnerTranings from "./DisplayPartnerTrainingsPagination";
import HebergementLms from "./HebergementLms";
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import PartnerInfo from "./UpdatePartnerInfo";

import PartnerInfo_v2 from "./UpdatePartnerInfo_v2";
import UpdatePartnerInfo_v2_ARG from "./UpdatePartnerInfo_v2_ARG";

import { FiBookOpen } from "react-icons/fi";
import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponent';
import { FaDraftingCompass } from "react-icons/fa";
import PartenairStat from "./PartenairStat";
import { GrUserAdmin } from "react-icons/gr";
import ApartmentIcon from '@mui/icons-material/Apartment';
import DialpadIcon from '@mui/icons-material/Dialpad';
import { Helmet } from "react-helmet";
import RocketIcon from '@mui/icons-material/Rocket';
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import { GiTeacher } from "react-icons/gi";
import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import Facture from "./Facture";
import Abonnement from "./Abonnement";
import { useLocation } from "react-router-dom";
import { useParams } from 'react-router-dom';
import CheckOut from "./CheckOut";



import { FaHandPointRight } from "react-icons/fa";
import OrderConfirmation from "./OrderConfirmation";
import Partner_Client from "./Partner_Client";
import Pricing from "./Pricing";
import { MdAddShoppingCart } from "react-icons/md";
import {
    FcHome, FcBullish,
    FcList, FcCurrencyExchange,
    FcFeedback, FcKey, FcVideoCall,
    FcBusinesswoman, FcServices, FcCollect, FcKindle,
    FcFlowChart, FcReading, FcFinePrint, FcCalendar, FcOrgUnit,
    FcEngineering
} from "react-icons/fc";

import CircleNotificationsIcon from '@mui/icons-material/CircleNotifications';
import { PiStudent } from "react-icons/pi";
import { BiPurchaseTag } from "react-icons/bi";
import { BsTools } from "react-icons/bs";
import DisplayPartnerPromotion from "./DisplayPartnerPromotion";
import DisplayPartnerSession from "./DisplayPartnerSession";
import DisplayPartnerStagiaires from "./DisplayPartnerStagiaires";
import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
import Employes from "./Employes";
import Autre_RH from "./Autre_RH";
import Materiels from "./Materiels";
import Partner_Commande from "./Partner_Commande";
import Config_Documents from "./Config_Document";
import Config_Documents_Super_Admin from "./Config_Document_Super_Admin";
import Factures_Client from "./Partner_Facture";
import Configuration_Technique from "./Partner_Config_Technique";
import Config_Champs_Personnalise from "./Config_Champs_Personnalise";
import Module_Agenda from "./Module_Agenda";
import Partner_Configuration_Session_Steps from "./Partner_Config_Session_Steps";
import Partner_Configuration_Jours_Travail from "./Partner_Config_Jours_Travail";
import Dashbord_Session from "./Dashbord_Session";
import Dashbord_Ressources_Humaines from "./Dashbord_Ressources_Humaines";
import Dashbord_Inscriptions from "./Dashbord_Inscription";
import Dashbord_Factures from "./Dashbord_Factures";
import Materiel_Salle from "./Materiel_Salle";
import CRM_Opportunite from "./Crm_Opportunite";
import Partner_Config_Formulaires from "./Partner_Config_Formulaires";
import PartnerClientActivite from "./PartnerClient_Activite";
import Jury from "./Jurys";
import Conseil_Classe from "./Conseil_Classe";
import Module_Internal_Email_Management from "./Module_Internal_Email_Management";

import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
import Mon_Tableau_De_Bord from "./Mon_Tableau_De_Bord";
import Dashbord_Formation from "./Dashbord_Formation";
import Partner_Prix_Achat from "./Partner_Prix_Achat";
import Apprenant from "./Apprenant";
import { PiSlideshowFill, PiSlideshowThin } from "react-icons/pi";
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 { ImWarning } from "react-icons/im";
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import { AiOutlineDashboard } from "react-icons/ai";
import ListAltIcon from '@mui/icons-material/ListAlt';
import SchoolIcon from '@mui/icons-material/School';
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import { FcBusinessContact } from "react-icons/fc";
import { FcVideoProjector } from "react-icons/fc";
import HandymanIcon from '@mui/icons-material/Handyman';
import HubIcon from '@mui/icons-material/Hub';
import EuroSharpIcon from '@mui/icons-material/EuroSharp';
import CameraOutdoorSharpIcon from '@mui/icons-material/CameraOutdoorSharp';
import SettingsIcon from '@mui/icons-material/Settings';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import CoPresentIcon from '@mui/icons-material/CoPresent';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
import DisplayPartnerUnite_Enseignement from "./DisplayPartnerUnite_Enseignement";
import Partner_Domaine_Categorie_Metier from "./Partner_Domaine_Categorie_Metier";
import Partner_Config_Ftion_Initiale from "./Partner_Config_Ftion_Initiale";
import Partner_Admission_Process_Ftion_Initiale from "./Partner_Admission_Process_Ftion_Initiale";
import Admission_Pedagogique_Ftion_Initiale from "./Config_Ref_Pedagogique_Ftion_Initiale";
import Config_Competence_Pedagogique_Ftion_Initiale from "./Config_Competence_Pedagogique_Ftion_Initiale";
import Notes_Evaluation from "./Notes_Evaluation";
import ScoreboardIcon from '@mui/icons-material/Scoreboard';
import Groupe_Apprenant from "./Groupe_Apprenant";
import Session_Admission_FI from "./Session_Admission_FI";
import Module_Plateform_Admin_Partners from "./Module_Plateform_Admin_Partners";


import Equipe_Team from "./Equipe_Team";
import Groups2Icon from '@mui/icons-material/Groups2';
import Diversity3Icon from '@mui/icons-material/Diversity3';
import { LiaProductHunt } from "react-icons/lia";
import Partner_Product_Service from "./Partner_Product_Service";
import Module_Email_Management from "./Module_Email_Management";
import ForwardToInboxIcon from '@mui/icons-material/ForwardToInbox';
import Badge from '@mui/material/Badge';
import { styled } from '@mui/material/styles';
import Modules_Mes_Documents from "./Modules_Mes_Documents";
import FolderZipIcon from '@mui/icons-material/FolderZip';
import MailIcon from '@mui/icons-material/Mail';
import ReduceCapacityIcon from '@mui/icons-material/ReduceCapacity';
import { FcPodiumWithAudience } from "react-icons/fc";
import { FcConferenceCall } from "react-icons/fc";
import {
    Building2,
    Mail,
    FolderKanban,
    BookOpen,
    GraduationCap,
    SlidersHorizontal,
    Package,
    CalendarRange,
    Percent,
    ClipboardList,
    Users,
    Wrench,
    Megaphone,
    Handshake,
    CreditCard,
    Tag,
    Boxes,
    UserCircle2,
    ChevronDown,
    ChevronRight,
    Home,
    Search,
    HelpCircle,
    Settings,
    LogOut,
    chevronsRight
} from "lucide-react";

const menuData = [
    {
        bloc_title: "Compte",
        title: "Compte",
        menu_color: "#7FB069",
        items: [
            {
                label: "Mon compte", icon: Home, items_color: "#7FB069", hasChildren: true,
                children: [
                    { label: "Informations" },
                    { label: "Activité" },
                    { label: "Tableau De Bord" },
                    { label: "Abonnement" },
                    { label: "Facture MYSY" },
                ]

            },
            { label: "Emails", icon: Mail, badge: 1, items_color: "#7FB069", },
            { label: "Documents", icon: FolderKanban, items_color: "#7FB069", },
        ],
    },
    {
        bloc_title: "Ftion. Initiale",
        title: "Ftion. Initiale",
        menu_color: "#4F8CFF",
        hasChildren: true,
        is_open: true,
        items: [
            {
                label: "Formations Init.", icon: Users, items_color: "#4F8CFF",
                hasChildren: true,
                children: [
                    { label: "Catalogue Init", icon: BookOpen, items_color: "#4F8CFF", },
                    { label: "Unit. Ensei", icon: GraduationCap, items_color: "#4F8CFF" },
                    { label: "Caractéristiques", icon: Percent, items_color: "#4F8CFF" },
                ]
            },

            { label: "Promotions", icon: Percent, items_color: "#4F8CFF", },
            { label: "Notes & éval", icon: ClipboardList, items_color: "#4F8CFF", },

            {
                label: "Instances", icon: Users, items_color: "#4F8CFF",
                hasChildren: true,
                children: [
                    { label: "Jurys", icon: BookOpen, items_color: "#4F8CFF", },
                    { label: "Cons. Classe", icon: GraduationCap, items_color: "#4F8CFF" },

                ]
            },


        ],
    },

    {
        bloc_title: "Ftion. Continue",
        title: "Ftion. Continue",
        menu_color: "#8B7CF6",
        hasChildren: true,
        is_open: false,
        items: [
            {
                label: "Formations Cont.", icon: Users, items_color: "#8B7CF6", active: true,
                hasChildren: true,
                children: [
                    { label: "Catalogue Cont", icon: BookOpen, items_color: "#8B7CF6", },
                    { label: "Modules", icon: GraduationCap, items_color: "#8B7CF6", },
                    { label: "Caractéristiques", icon: Percent, items_color: "#8B7CF6" },
                ]
            },
            { label: "Sessions", icon: CalendarRange, active: false, items_color: "#8B7CF6" },

        ],
    },

    {
        bloc_title: "Gestion",
        title: "Gestion",
        menu_color: "#3EC7B7",
        items: [
            {
                label: "Apprenants", icon: Users, items_color: "#3EC7B7",
                hasChildren: true,
                children: [
                    { label: "Apprenants" },
                    { label: "Inscriptions" },
                    { label: "Admissions" },
                    { label: "Grp Apprenants" },
                ]
            },

            {
                label: "Ressources", icon: Wrench, items_color: "#3EC7B7",
                hasChildren: true,
                children: [
                    { label: "Employes" },
                    { label: "Autre Rh" },
                    { label: "Salles" },
                    { label: "Materiels" },

                ],
            },

            { label: "Documents (GED)", icon: CalendarRange, items_color: "#3EC7B7" },
            { label: "Planning", icon: CalendarRange, items_color: "#3EC7B7" },
            { label: "Marketing mail", icon: Megaphone, items_color: "#3EC7B7" },
        ],
    },

    {
        bloc_title: "CRM",
        title: "CRM",
        menu_color: "#F0E68C",
        items: [
            { label: "Partenaires", icon: Handshake, items_color: "#dbff75" },
            { label: "Équipe", icon: Users, items_color: "#dbff75" },
            {
                label: "Factures", icon: CreditCard, items_color: "#dbff75",
                hasChildren: true,
                children: [
                    { label: "Devis", icon: BookOpen, items_color: "#dbff75", },
                    { label: "Factures & Avoirs", icon: GraduationCap, items_color: "#dbff75" },
                ]
            },


            { label: "Prix Achat", icon: Tag, items_color: "#dbff75" },
            { label: "Produits & serv.", icon: Package, items_color: "#dbff75" },
        ],
    },

    {
        bloc_title: "Espace E-Learning",
        title: "Espace E-Learning",
        menu_color: "#F0E68C",
        items: [
            { label: "Contenu LMS", icon: Handshake, items_color: "#dbff75" },
            { label: "Configuration", icon: Users, items_color: "#dbff75" },

        ],
    },


    {
        bloc_title: "Config. Gle",
        title: "Config. Gle",
        menu_color: "#F0E68C",
        items: [
            { label: "Documents & Mails", items_color: "#dbff75" , icon: Handshake,},
            { label: "Documents Superadmin", items_color: "#dbff75" , icon: Handshake,},
            { label: "Champ Specifique", items_color: "#dbff75" , icon: Handshake,},
            { label: "Technique", items_color: "#dbff75" , icon: Handshake,},
            { label: "Session Etape", items_color: "#dbff75" , icon: Handshake,},
            { label: "Jours & Heures", items_color: "#dbff75" , icon: Handshake,},
            { label: "Formulaires", items_color: "#dbff75" , icon: Handshake,},


        ],
    },

    {
        bloc_title: "Config. Ftion Initale",
        title: "Config. Ftion Initale",
        menu_color: "#F0E68C",
        items: [
            { label: "Conf. Gle Init", items_color: "#dbff75" , icon: Handshake,},
            { label: "Process Admission", items_color: "#dbff75" , icon: Handshake,},
            { label: "Admin Pédago", items_color: "#dbff75" , icon: Handshake,},
            { label: "Compétence Pedago", items_color: "#dbff75" , icon: Handshake,},



        ],
    },



    {
        bloc_title: "Paramètres",
        title: "Paramètres",
        menu_color: "#dbff75",
        items: [{ label: "Instances", icon: Boxes, items_color: "#dbff75" }],
    },
];



const Partner = (props) => {

    function macro_menu_function(local_menu) {
        if (local_menu === "Sessions") {
            DiplaySessionList();
        } else if (local_menu === "Promotions") {
            DiplayPromotionList();
        }

        //-----
        if (local_menu.toLocaleLowerCase() === "Informations".toLocaleLowerCase()) {
            PersonnalData();
        } else if (local_menu.toLocaleLowerCase() === "Activité".toLocaleLowerCase()) {
            monactivite_func();
        } else if (local_menu.toLocaleLowerCase() === "Tableau De Bord".toLocaleLowerCase()) {
            mon_tableau_de_bord_func();
        } else if (local_menu.toLocaleLowerCase() === "Abonnement".toLocaleLowerCase()) {
            Abonnement_func();
        } else if (local_menu.toLocaleLowerCase() === "Facture MYSY".toLocaleLowerCase()) {
            DisplayFacure();
        } else if (local_menu.toLocaleLowerCase() === "Emails".toLocaleLowerCase()) {
            Display_Internal_Boite_Email();
        } else if (local_menu.toLocaleLowerCase() === "Documents (GED)".toLocaleLowerCase()) {
            Display_Tous_Documents();
        } else if (local_menu.toLocaleLowerCase() === "Catalogue Init".toLocaleLowerCase()) {
            DiplaytrainingList();
        } else if (local_menu.toLocaleLowerCase() === "Catalogue Cont".toLocaleLowerCase()) {
            DiplaytrainingList();
        } else if (local_menu.toLocaleLowerCase() === "Unit. Ensei".toLocaleLowerCase()) {
            DiplayPartner_UE();
        } else if (local_menu.toLocaleLowerCase() === "Produits & serv.".toLocaleLowerCase()) {
            DiplayPartner_Produits_Services();
        } else if (local_menu.toLocaleLowerCase() === "Sessions".toLocaleLowerCase()) {
            DiplaySessionList();
        } else if (local_menu.toLocaleLowerCase() === "Promotions".toLocaleLowerCase()) {
            DiplayPromotionList();
        }

        else if (local_menu.toLocaleLowerCase() === "Notes & éval".toLocaleLowerCase()) {
            Display_note_evaluation_func();
        }
        else if (local_menu.toLocaleLowerCase() === "Jurys".toLocaleLowerCase()) {
            Display_jurys_func();
        }
        else if (local_menu.toLocaleLowerCase() === "Cons. Classe".toLocaleLowerCase()) {
            Display_conseil_classe_func();
        }

        else if (local_menu.toLocaleLowerCase() === "Modules".toLocaleLowerCase()) {
            DiplayPartner_UE();
        }
        else if (local_menu.toLocaleLowerCase() === "Caractéristiques".toLocaleLowerCase()) {
            DiplayPartner_Domaine_Categorie_Metier();
        }
        else if (local_menu.toLocaleLowerCase() === "Apprenants".toLocaleLowerCase()) {
            mes_apprenants_func();
        }
        else if (local_menu.toLocaleLowerCase() === "Inscriptions".toLocaleLowerCase()) {
            DiplayStagiaireList();
        } else if (local_menu.toLocaleLowerCase() === "Admissions".toLocaleLowerCase()) {
            admission_session_func();
        } else if (local_menu.toLocaleLowerCase() === "Grp Apprenants".toLocaleLowerCase()) {
            groupe_apprenant_func();
        } else if (local_menu.toLocaleLowerCase() === "Employes".toLocaleLowerCase()) {
            DisplayeEmployeList();
        } else if (local_menu.toLocaleLowerCase() === "Autre Rh".toLocaleLowerCase()) {
            Display_Autre_RH_List();
        } else if (local_menu.toLocaleLowerCase() === "Salles".toLocaleLowerCase()) {
            Display_mes_salles_func();
        } else if (local_menu.toLocaleLowerCase() === "Materiels".toLocaleLowerCase()) {
            DisplayeMaterielList();
        } else if (local_menu.toLocaleLowerCase() === "Documents (GED)".toLocaleLowerCase()) {
            Display_Tous_Documents();
        } else if (local_menu.toLocaleLowerCase() === "Planning".toLocaleLowerCase()) {
            module_agenda_func();
        } else if (local_menu.toLocaleLowerCase() === "Marketing mail".toLocaleLowerCase()) {
            setDialog_SEND_EMAIL_open(true);
        } else if (local_menu.toLocaleLowerCase() === "Partenaires".toLocaleLowerCase()) {
            mes_clients_func();
        } else if (local_menu.toLocaleLowerCase() === "Équipe".toLocaleLowerCase()) {
            equipe_team_func();
        } else if (local_menu.toLocaleLowerCase() === "Devis".toLocaleLowerCase()) {
            mes_cmd_func();
        } else if (local_menu.toLocaleLowerCase() === "Factures & Avoirs".toLocaleLowerCase()) {
            mes_factures_client_func();
        } else if (local_menu.toLocaleLowerCase() === "Prix Achat".toLocaleLowerCase()) {
            prix_achat_func();
        } else if (local_menu.toLocaleLowerCase() === "Contenu LMS".toLocaleLowerCase()) {
            if (String(check_user_acces_right("lms", "write")) === "1") {

                window.open(
                    partner_lms_url,
                    '_blank'
                );
            } else {
                Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du E-Learning");
            }
        } else if (local_menu.toLocaleLowerCase() === "Configuration".toLocaleLowerCase()) {
            DisplaySetUpLMS();
        } 
        
        else if (local_menu.toLocaleLowerCase() === "Documents & Mails".toLocaleLowerCase()) {
            config_document_func();
        } else if (local_menu.toLocaleLowerCase() === "Documents Superadmin".toLocaleLowerCase()) {
            config_document_super_admin_func();
        } else if (local_menu.toLocaleLowerCase() === "Champ Specifique".toLocaleLowerCase()) {
            config_specfic_fields_func();
        } else if (local_menu.toLocaleLowerCase() === "Technique".toLocaleLowerCase()) {
            config_technique_func();
        } else if (local_menu.toLocaleLowerCase() === "Session Etape".toLocaleLowerCase()) {
            config_session_steps_func();
        } else if (local_menu.toLocaleLowerCase() === "Jours & Heures".toLocaleLowerCase()) {
            config_jours_travaille_func();
        } else if (local_menu.toLocaleLowerCase() === "Formulaires".toLocaleLowerCase()) {
            config_formulaires_func();
        }else if (local_menu.toLocaleLowerCase() === "Conf. Gle Init".toLocaleLowerCase()) {
            config_ftion_initale_general_func();
        }else if (local_menu.toLocaleLowerCase() === "Process Admission".toLocaleLowerCase()) {
            config_admission_process_func();
        }else if (local_menu.toLocaleLowerCase() === "Admin Pédago".toLocaleLowerCase()) {
            config_administration_pedagogique_func();
        }else if (local_menu.toLocaleLowerCase() === "Compétence Pedago".toLocaleLowerCase()) {
            config_competence_pedagogique_func();
        }


    }




    function MenuItem_MySy({ item }) {
        const [open, setOpen] = useState(item.active || false);
        const Icon = item.icon;
        const Icon_Color = item.items_color;
        const hasChildren = item.hasChildren && item.children?.length > 0;

        return (
            <div className="menu-item-wrap">
                <button
                    className={`menu-item ${item.label == menu_active ? "is-active" : ""}`}
                    onClick={(event) => {

                        if (hasChildren) {
                            setOpen(!open)
                        } else {
                            macro_menu_function(item.label);
                            setmenu_active(item.label);
                        }
                    }}
                    type="button"
                >
                    <span className="menu-item-left">
                        <span className="menu-icon">
                            <Icon size={18} strokeWidth={2} style={{ color: `${item.items_color}` }} />
                        </span>
                        <span className="menu-label">{item.label}</span>
                    </span>

                    <span className="menu-item-right">
                        {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
                        {hasChildren ? (
                            open ? (
                                <ChevronDown size={16} className="menu-chevron" />
                            ) : (
                                <ChevronRight size={16} className="menu-chevron" />
                            )
                        ) : null}
                        {item.active && !hasChildren ? <span className="menu-dot" /> : null}
                    </span>
                </button>

                {hasChildren && open && (
                    <div className="submenu">
                        {item.children.map((child, index) => (
                            <button className="submenu-item" type="button" key={index}
                                onClick={(event) => {
                                    setmenu_active(item.label);
                                    macro_menu_function(child.label);
                                }}
                            >

                                <span className="submenu-dot" />
                                <span className="submenu-label">{child.label}</span>
                            </button>
                        ))}
                    </div>
                )}
            </div>
        );
    }

    const menuData_v2 = [
        {
            bloc_title: "Compte",
            title: "Compte",
            menu_color: "#7FB069",
            items: [
                { label: "Mon compte", icon: Home, items_color: "#7FB069", },
                { label: "Emails", icon: Mail, badge: 1, items_color: "#7FB069", },
                { label: "Documents", icon: FolderKanban, items_color: "#7FB069", },
            ],
        },
    ]

    const stored_cookie_menu_gauche_reduit = getCookie('mysy_menu_gauche_reduit');

    const { commingmenu, commingpack } = useParams();
    const [myApiResponse, setmyApiResponse] = useState("");
    const [result, setResult] = useState("");
    const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
    const stored_part = getCookie('tokenmysypart');
    const [parntername, setparntername] = useState("");
    const [parnter_user_employee, setparnter_user_employee] = useState("");
    const [parnternbformation, setparnternbformation] = useState("");
    const [selectedfilt1, setselectedfilt1] = useState("");
    const [selectedfilt2, setselectedfilt2] = useState("");
    const [selectedfilt3, setselectedfilt3] = useState("");
    const [excelimportmessage, setexcelimportmessage] = useState("");
    const [apiexcelimportmessage, setapiexcelimportmessage] = useState("");

    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });

    const [cookie_menu_gauche_reduit, setcookie_menu_gauche_reduit, removecookie_menu_gauche_reduit] = useCookies(['mysy_menu_gauche_reduit']);

    const theme = createTheme({
        palette: {
            primary: {
                light: '#F0E68C',
                main: '#F0E68C',
                dark: '#F0E68C',
                contrastText: '#fff',
            },
            secondary: {
                light: '#99ffcc',
                main: '#99ffcc',
                dark: '#ba000d',
                contrastText: '#000',
            },

            tercier: {
                light: '#dbff75',
                main: '#dbff75',
                dark: '#dbff75',
                contrastText: '#000',
            },

            quatro: {
                light: '#E08A8B',
                main: '#E08A8B',
                dark: '#E08A8B',
                contrastText: '#000',
            },

            cinqo: {
                light: '#D2691E',
                main: '#D2691E',
                dark: '#D2691E',
                contrastText: '#000',
            },
        },
    });

    const StyledBadge = styled(Badge)(({ theme }) => ({
        '& .MuiBadge-badge': {
            right: 0,
            top: 0,
            border: `2px solid ${theme.palette.background.paper}`,
            padding: '0 4px',
        },
    }));


    const StyledBadge_mysy_color1 = styled(Badge)(({ }) => ({
        '& .MuiBadge-badge': {
            right: 0,
            top: 0,
            border: '2px solid #ffffff',
            padding: '0 4px',
            background: '#6a329f',
            color: "#ffffff"
        },
    }));


    const StyledBadge_mysy_red = styled(Badge)(({ }) => ({
        '& .MuiBadge-badge': {
            right: 0,
            top: 0,
            border: '2px solid ',
            padding: '0 4px',
            background: '#f44336',
            color: "#ffffff",
        },
    }));



    // Constante permet de savoir a fonction du menu on a faire
    const [menu, setmenu] = useState();
    const [selectedFile, setSelectedFile] = useState();
    const [isSelected, setIsSelected] = useState(false);

    const [partnerPackService, setpartnerPackService] = useState("");

    const [isimgSelected, setisimgSelected] = useState(false);
    const [isimgSelectedfile, setisimgSelectedfile] = useState(false);
    const [userimgprofil, setuserimgprofil] = useState();

    const [partnerstatus, setpartnerstatus] = useState();
    const [refesh, setrefesh] = useState("init");

    const [firstConnexion, setfirstConnexion] = useState("");
    const [part_is_partner_admin_account, setpart_is_partner_admin_account] = useState("");

    const { action, orderid, packs, object_key, class_internal_url } = useParams()

    const [previous_action, setprevious_action] = useState("");


    const changeHandler = (event) => {
        setSelectedFile(event.target.files[0]);
        setIsSelected(true);
        setapiexcelimportmessage("");
    };

    const changeHandler2 = (event) => {
        setapiexcelimportmessage();
        setformation_file_name();
        sethandleSubmission_api();
        hiddenFileInput_formation.current.click();
    };

    const hiddenFileInput_formation = React.useRef(null);

    const history = useHistory();


    const stored_cookie = getCookie('tokenmysypart');
    const location = useLocation();

    // Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion
    if (!stored_cookie || stored_cookie.length <= 0) {
        if (location && location.state && location.state.mysy_arg) {
            //alert(" mysy arg (dans partner) = " + location.state.mysy_arg);
            history.push("/Connexion", { mysy_arg: location.state.mysy_arg });
        }
        else {
            history.push("/Connexion");
        }
    }


    const formData = new FormData();

    const [handleSubmission_api, sethandleSubmission_api] = useState();
    const [handleSubmission_result, sethandleSubmission_result] = useState();
    const [handleSubmission_message, sethandleSubmission_message] = useState();

    const handleSubmission = event => {


        const fileUploaded = event.target.files[0];
        let file_size = event.target.files[0].size;
        let file_type = event.target.files[0].type;

        //console.log("file_size =  ",file_size," file_type = ",file_type);
        if (file_size > 10000000) {
            alert("Le fichier ne doit pas dépasser un 1 Méga octets");
            return;
        }

        setformation_file_name(event.target.files[0].name);

        //console.log(" import du ficier ", event.target.files[0].name);


        formData.append('File', fileUploaded);
        //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
        const stored_cookie = getCookie('tokenmysypart');


        formData.append("token", stored_cookie);

        //console.log("token = " + stored_cookie); theme_name
        setLoading(true);
        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/add_class_mass/",
            {
                method: 'POST',
                body: formData,
            }
        )
            .then((response) => response.json())
            .then((result) => {
                //console.log('Success:', result['message']);
                setexcelimportmessage(result['message']);
                setmyApiResponse("true");
                setapiexcelimportmessage(result['status']);
                setLoading(false);
                if (String(result['status']) === String("true")) {

                    sethandleSubmission_api("true");
                    var local_message = result['message'] + " Vous allez être redirigé vers la liste des formations"
                    alert(local_message);
                    history.push("/Partner/affichage");
                    window.location.reload();
                    return;

                } else if (String(result['status']) === String("Err_Connexion")) {
                    alert('Erreur: ' + result['message']);
                    history.push("/Connexion");
                }

                else {
                    sethandleSubmission_api("false");
                    sethandleSubmission_message(result['message']);
                    alert(result['message']);
                }
                //alert("result['status'] " + result['status']);
            })
            .catch((error) => {
                setLoading(false);
                console.error('Error:', result);
                setmyApiResponse("false");
                setapiexcelimportmessage("-1");
                sethandleSubmission_api("false");
                alert(" Impossible d'importer/mettre à jour les formations");
            });
    };

    const [myimage, setmyimage] = useState();
    const [isimage, setisimage] = useState();

    function getImage(e) {
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedImage/";
        var form = new FormData();
        form.append("token", stored_cookie);
        form.append("type", "partner");

        axios.post(myurl, form).then(res => {
            //console.log(" getImage : In test  res.data.status = " + res.data.status);
            //console.log(" getImage: res.data.message.img = " + res.data.message);

            if (String(res.data.status) === "true") {

                if (res.data.message && res.data.message.img && res.data.message.img.length > 0) {
                    setisimage("True");
                }
                else {
                    setisimage("False");
                }
                setmyimage(res.data.message.img);
                var ch_img = "data:image/png;base64," + res.data.message.img;
                setuserimgprofil(ch_img);
            }
            else {
                //console.log(" In Erreur   res.data.status = " + res.data.status);
                //console.log(" In Erreur  res.data.message = " + res.data.message);
                setisimage("False");
                setuserimgprofil();
                //alert("4");
            }
        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setisimage("False");
            setuserimgprofil(profileimg);
        })

    }


    // Cette fonction recuperer les droits d'acces stocké en cookie
    const [connected_user_access_right, setconnected_user_access_right] = React.useState(null);
    function retrieve_user_acces_right() {
        const stored_cookie = getCookie('tokenmysypart');

        if (!stored_cookie || String(stored_cookie).trim() === "") {
            history.push("/Connexion");
            return;
        }

        var acces_right_token_name = stored_cookie + "_uar";



        var acces_right_token_val = getCookie(acces_right_token_name, { path: '/' });

        var tab_json_access_right = JSON.parse(acces_right_token_val);

        setconnected_user_access_right(tab_json_access_right);

    }

    // check du droit d'acces de l'utilisateur
    function check_user_acces_right(local_module, local_action) {

        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);

        if (String(local_action) === "read") {
            for (let i = 0; i < connected_user_access_right.length; i++) {
                if (String(connected_user_access_right[i].module) === String(local_module)
                    && String(connected_user_access_right[i].read) === "true") {

                    return 1;
                }
            }
            return 0;
        } else if (String(local_action) === "write") {
            for (let i = 0; i < connected_user_access_right.length; i++) {
                if (String(connected_user_access_right[i].module) === String(local_module)
                    && String(connected_user_access_right[i].write) === "true") {

                    return 1;
                }
            }
            return 0;
        } else {
            return 0;
        }

    }


    useEffect(() => {


        if (String(stored_cookie_menu_gauche_reduit) === "1")
            setleft_menu(false);
        else
            setleft_menu(true);

        setapiexcelimportmessage();

        if (location && location.state && location.state.local_sub_menu) {
            setmenu(location.state.local_sub_menu);
            setpartnerPackService(location.state.currentpack);
            //alert(" le pack = "+location.state.currentpack);
        }

        var list_menu = ['creation', 'infopartner', 'infopartner_v2', 'statistique', 'abonnement', 'affichage', 'ordervalide',
            'mes_sessions', 'setuplms', 'facture', 'pricing', 'mes_clients', 'mes_devis', 'mes_cmd',
            'mes_stagiaires', 'mes_employes', 'mon_materiel', 'config_document', 'factures_client', "setuplms", "config_technique",
            "config_champ_specific", "module_agenda", "config_session_steps", "config_jours_heures", "dashbord_formation",
            "dashbord_session", "mon_tableau_de_bord", "prix_achat", "mes_apprenants", "dashbord_ressources_humaines",
            "dashbord_inscriptions", "mes_salles", "mes_opportunites", "config_formulaires", "dashbord_factures", "mes_ue",
            "domaine_categorie_metier", "config_formation_initiale", "note_evaluation", "groupe_apprenant",
            "part_produit_service", "config_document_super_admin", "tous_mes_document", "equipe_team",
            "jurys", "mes_promotions", "autre_rh", "conseil_classe", "admission_process", "admission_session",
            'config_plateforme_partners', 'administration_pedagogique', 'competence_pedagogique']


        if (action && list_menu.includes(action)) {

            setmenu(action);

            // /!\ il faudra terminer la fonction ci-dessous. aller dans la fonction pour voir le commentaire
            inactive_active_menu_header_from_url_action(action);

            if (action && orderid && packs && String(action) === "ordervalide") {
                CheckSalesOrder();
            }

            /* if (action && orderid && packs && String("abonnement")) {
                 //console.log(" abonnement : payement intent = ", orderid, "  pack = ", packs);
             }*/
        } else {
            DiplaytrainingList();

        }

        getImage();
        GetPartnerNameFromToken();
        setformation_file_name();
        GetPartnerLMSData();
        retrieve_user_acces_right();
        Get_Nb_Unread_Emails();
    }, [])

    const [Get_Nb_Unread_Emails_api, setGet_Nb_Unread_Emails_api] = useState();
    const [Get_Nb_Unread_Emails_message, setGet_Nb_Unread_Emails_message] = useState();
    const [Get_Nb_Unread_Emails_result, setGet_Nb_Unread_Emails_result] = useState([]);
    function Get_Nb_Unread_Emails(event) {

        var form = new FormData();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("related_collection_recid", props.conntected_account_id);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Nb_User_Internal_Mail_Not_Read/";

        setLoading(true);
        axios.post(myurl, form).then(res => {
            setLoading(false);
            if (String(res.data.status) === String("true")) {
                //console.log(" In Get_Nb_Unread_Emails  res.data.status = " + res.data.status);
                //  console.log(" In Get_Nb_Unread_Emails  res.data.message r_class = " + res.data.message);
                setGet_Nb_Unread_Emails_api("true");
                setGet_Nb_Unread_Emails_result(res.data.message);
            }
            else {
                setGet_Nb_Unread_Emails_api("false");
                setGet_Nb_Unread_Emails_message(res.data.message);
                //   alert(res.data.message)
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            setLoading(false);
            console.warn('Not good man :( Get_Nb_Unread_Emails = ', error);
            setGet_Nb_Unread_Emails_api("false");
            alert("Impossible de récuperer la liste des emails");
            //setmyApimyApiMessage("")
        })
    }



    // Cette fontion desactive tous les menu header et reactive just le menu_header concerné
    function inactive_active_menu_header(current_menu_header) {
        const list_menu_header_names = ['my_account', 'my_class', 'my_session', 'my_apprenant', 'my_ressource', 'my_planning',
            'my_partners', 'my_invoices', 'my_prix_achat', 'my_e_learning', 'my_configuration', 'my_tbd', 'my_ue', 'domaine_categorie_metier',
            'config_formation_initiale', 'note_evaluation', 'groupe_apprenant', 'part_produit_service', 'monactivite', 'mon_tableau_de_bord',
            'tous_mes_document', 'equipe_team', 'conseil_class', 'autre_rh', 'jury', 'conseil_classe', 'internal_email', "admission_process",
            "admission_session", 'config_plateforme_partners', 'administration_pedagogique', 'competence_pedagogique']
        for (let i = 0; i < list_menu_header_names.length; i++) {
            if (document.getElementsByName(String(list_menu_header_names[i])) && document.getElementsByName(String(list_menu_header_names[i]))[0]) {
                document.getElementsByName(String(list_menu_header_names[i]))[0].style.fontWeight = "400";
            }
        }


        if (document.getElementsByName(String(current_menu_header)) && document.getElementsByName(String(current_menu_header))[0]) {
            document.getElementsByName(String(current_menu_header))[0].style.fontWeight = "700";
        }
    }

    function inactive_active_menu_header_from_url_action(url_action) {
        const list_menu_header_names = ['my_account', 'my_class', 'my_session', 'my_apprenant', 'my_ressource', 'my_planning',
            'my_partners', 'my_invoices', 'my_prix_achat', 'my_e_learning', 'my_configuration', 'my_tbd', 'my_ue', 'domaine_categorie_metier',
            'config_formation_initiale', 'note_evaluation', 'groupe_apprenant', 'part_produit_service', 'monactivite', 'mon_tableau_de_bord',
            'tous_mes_document', 'equipe_team', 'conseil_class', 'autre_rh', 'jury', 'conseil_classe', 'internal_email', "admission_process",
            "admission_session", 'config_plateforme_partners', 'administration_pedagogique', 'competence_pedagogique']
        for (let i = 0; i < list_menu_header_names.length; i++) {
            if (document.getElementsByName(String(list_menu_header_names[i])) && document.getElementsByName(String(list_menu_header_names[i]))[0]) {
                document.getElementsByName(String(list_menu_header_names[i]))[0].style.fontWeight = "400";
            }
        }

        // plus tard, il faudra mettre en brillance le menu et le soumenu concerné
    }

    function CreateTraining(event) {
        var security_retval = check_user_acces_right("formation", "read");
        if (security_retval === 1) {
            setmenu("creation");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/creation");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des formations");
        }
    }

    function PersonnalData(event) {

        setmenu("infopartner");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/infopartner");
        document.body.style.backgroundColor = "#ffffff";

        inactive_active_menu_header("my_account");

    }

    function PersonnalData_v2(event) {

        setmenu("infopartner_v2");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/infopartner_v2");
        document.body.style.backgroundColor = "#ffffff";

        inactive_active_menu_header("my_account");

    }

    function monactivite_func(event) {

        setmenu("monactivite");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/monactivite");
        document.body.style.backgroundColor = "#ffffff";

        inactive_active_menu_header("monactivite");

    }


    function Display_Tous_Documents(event) {
        setmenu("tous_mes_document");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/tous_mes_document");
        document.body.style.backgroundColor = "#ffffff";
        inactive_active_menu_header("tous_mes_document");
    }


    function Display_Internal_Boite_Email(event) {
        setmenu("internal_email");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/internal_email");
        document.body.style.backgroundColor = "#ffffff";
        inactive_active_menu_header("internal_email");
    }



    function config_document_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_document");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_document");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_configuration");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }

    function config_document_super_admin_func(event) {
        setmenu("config_document_super_admin");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/config_document_super_admin");
        document.body.style.backgroundColor = "#ffffff";
        inactive_active_menu_header("my_configuration");
    }

    function config_ftion_initale_general_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_formation_initiale");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_formation_initiale");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("config_formation_initiale");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function config_ftion_plateforme_partners_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_plateforme_partners");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_plateforme_partners");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("config_plateforme_partners");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion de ce menu");
        }
    }

    function config_admission_process_func(event) {
        var security_retval = check_user_acces_right("ftion_initial_admin", "read");
        if (security_retval === 1) {
            setmenu("admission_process");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/admission_process");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("admission_process");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function config_tache_pedagogique_func(event) {
        var security_retval = check_user_acces_right("ftion_initial_admin", "read");
        if (security_retval === 1) {
            setmenu("tache_pedagogique");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/tache_pedagogique");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("tache_pedagogique");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }

    function config_administration_pedagogique_func(event) {
        var security_retval = check_user_acces_right("ftion_initial_admin", "read");
        if (security_retval === 1) {
            setmenu("administration_pedagogique");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/administration_pedagogique");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("administration_pedagogique");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function config_competence_pedagogique_func(event) {
        var security_retval = check_user_acces_right("ftion_initial_admin", "read");
        if (security_retval === 1) {
            setmenu("competence_pedagogique");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/competence_pedagogique");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("competence_pedagogique");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function config_specfic_fields_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_champ_specific");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_champ_specific");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }

    function module_agenda_func(event) {
        var security_retval = check_user_acces_right("module_agenda", "read");
        if (security_retval === 1) {
            setmenu("module_agenda");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/module_agenda");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_planning");

        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }

    function mon_tableau_de_bord_func(event) {
        setmenu("mon_tableau_de_bord");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mon_tableau_de_bord");
        document.body.style.backgroundColor = "#ffffff";

        inactive_active_menu_header("mon_tableau_de_bord");
    }


    function prix_achat_func(event) {
        setmenu("prix_achat");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/prix_achat");
        document.body.style.backgroundColor = "#ffffff";
        inactive_active_menu_header("my_prix_achat");

    }





    function config_technique_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_technique");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_technique");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }

    function config_session_steps_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_session_steps");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_session_steps");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function config_jours_travaille_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_jours_heures");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_jours_heures");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function config_formulaires_func(event) {
        var security_retval = check_user_acces_right("config_document", "read");
        if (security_retval === 1) {
            setmenu("config_formulaires");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/config_formulaires");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function mes_factures_client_func(event) {
        var security_retval = check_user_acces_right("facture_client", "read");
        if (security_retval === 1) {
            setmenu("factures_client");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/factures_client");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_invoices");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des documents");
        }
    }


    function DisplayStat(event) {
        var security_retval = check_user_acces_right("formation", "read");
        if (security_retval === 1) {
            setmenu("statistique");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/statistique");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des formations");
        }
    }

    function DisplaySetUpLMS(event) {
        var security_retval = check_user_acces_right("lms", "read");
        if (security_retval === 1) {
            setmenu("setuplms");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/setuplms");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_e_learning");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du E-Learning");
        }

    }

    function DisplayFacure(event) {
        var security_retval = check_user_acces_right("commande", "read");
        if (security_retval === 1) {
            setmenu("facture");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/facture");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("facture");

        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des commandes");
        }

    }






    function Abonnement_func(event) {
        var security_retval = check_user_acces_right("abonnement", "read");
        if (security_retval === 1) {
            setmenu("abonnement");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/abonnement");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("abonnement");

        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des abonnements");
        }

    }

    function pricing_func(event) {
        var security_retval = check_user_acces_right("prix", "read");
        if (security_retval === 1) {
            setmenu("pricing");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/pricing");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_partners");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des prix");
        }

    }

    function mes_clients_func(event) {
        var security_retval = check_user_acces_right("client", "read");

        if (security_retval === 1) {
            setmenu("mes_clients");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_clients");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_partners");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des clients");
        }
    }

    function mes_devis_func(event) {
        var security_retval = check_user_acces_right("commande", "read");
        if (security_retval === 1) {
            setmenu("mes_devis");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_devis");
            document.body.style.backgroundColor = "#ffffff";
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des commandes");
        }
    }


    function mes_cmd_func(event) {
        var security_retval = check_user_acces_right("commande", "read");
        if (security_retval === 1) {
            setmenu("mes_cmd");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_cmd");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_invoices");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des commandes");
        }
    }


    function DiplayPartner_UE(event) {
        var security_retval = check_user_acces_right("formation", "read");

        if (security_retval === 1) {
            setmenu("mes_ue");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_ue");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("my_ue");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }


    function DiplayPartner_Domaine_Categorie_Metier(event) {
        var security_retval = check_user_acces_right("formation", "read");

        if (security_retval === 1) {
            setmenu("domaine_categorie_metier");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/domaine_categorie_metier");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("domaine_categorie_metier");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }


    function DiplayPartner_Produits_Services(event) {
        var security_retval = check_user_acces_right("formation", "read");

        if (security_retval === 1) {
            setmenu("part_produit_service");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/part_produit_service");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("part_produit_service");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }


    function DiplaySessionList(event) {
        var security_retval = check_user_acces_right("session", "read");

        if (security_retval === 1) {
            setmenu("mes_sessions");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_sessions");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("my_session");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }

    function DiplayPromotionList(event) {
        var security_retval = check_user_acces_right("session", "read");

        if (security_retval === 1) {
            setmenu("mes_promotions");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_promotions");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("my_promotion");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }


    function Display_note_evaluation_func(event) {
        var security_retval = check_user_acces_right("note_evaluation", "read");

        if (security_retval === 1) {
            setmenu("note_evaluation");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/note_evaluation");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("note_evaluation");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }

    function Display_jurys_func(event) {
        var security_retval = check_user_acces_right("jury", "read");

        if (security_retval === 1) {
            setmenu("jurys");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/jurys");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("jurys");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }


    function Display_conseil_classe_func(event) {
        var security_retval = check_user_acces_right("jury", "read");

        if (security_retval === 1) {
            setmenu("conseil_classe");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/conseil_classe");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("conseil_classe");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }



    function Display_conseil_class_func(event) {
        var security_retval = check_user_acces_right("jury", "read");

        if (security_retval === 1) {
            setmenu("conseil_class");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/conseil_class");
            document.body.style.backgroundColor = "#ffffff";

            inactive_active_menu_header("conseil_class");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à cette fonctionnalité");
        }
    }


    function DiplayStagiaireList(event) {
        var security_retval = check_user_acces_right("stagiaire", "read");
        if (security_retval === 1) {
            setmenu("mes_stagiaires");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_stagiaires");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_apprenant");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des stagiaires");
        }
    }

    function mes_apprenants_func(event) {
        var security_retval = check_user_acces_right("stagiaire", "read");
        if (security_retval === 1) {
            setmenu("mes_apprenants");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_apprenants");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_apprenant");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des apprenants");
        }
    }

    function groupe_apprenant_func(event) {
        var security_retval = check_user_acces_right("stagiaire", "read");
        if (security_retval === 1) {
            setmenu("groupe_apprenant");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/groupe_apprenant");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("groupe_apprenant");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des stagiaires");
        }
    }

    function admission_session_func(event) {
        var security_retval = check_user_acces_right("stagiaire", "read");
        if (security_retval === 1) {
            setmenu("admission_session");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/admission_session");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("admission_session");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des stagiaires");
        }
    }

    function equipe_team_func(event) {
        var security_retval = check_user_acces_right("equipe", "read");
        if (security_retval === 1) {
            setmenu("equipe_team");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/equipe_team");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("equipe_team");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des équipes");
        }
    }

    function DisplayeEmployeList(event) {
        var security_retval = check_user_acces_right("employe", "read");
        if (security_retval === 1) {
            setmenu("mes_employes");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/mes_employes");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("mes_employes");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des employés");
        }
    }


    function Display_Autre_RH_List(event) {
        var security_retval = check_user_acces_right("employe", "read");
        if (security_retval === 1) {
            setmenu("autre_rh");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/autre_rh");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("autre_rh");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion des employés");
        }
    }

    function DisplayeMaterielList(event) {
        var security_retval = check_user_acces_right("materiel", "read");

        if (security_retval === 1) {
            setmenu("mon_materiel");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_ressource");
            history.push("/Partner/mon_materiel");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }

    function Display_mes_salles_func(event) {
        var security_retval = check_user_acces_right("materiel", "read");

        if (security_retval === 1) {
            setmenu("mes_salles");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_ressource");
            history.push("/Partner/mes_salles");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }


    function Display_mes_opportunites_func(event) {
        var security_retval = check_user_acces_right("client", "read");

        if (security_retval === 1) {
            setmenu("mes_opportunites");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            history.push("/Partner/mes_opportunites");
            inactive_active_menu_header("my_partners");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }

    function config_dashbord_formation_func(event) {
        var security_retval = check_user_acces_right("dashbord", "read");

        if (security_retval === 1) {
            setmenu("dashbord_formation");
            setapiexcelimportmessage();
            setformation_file_name();
            history.push("/Partner/dashbord_formation");
            document.body.style.backgroundColor = "#ffffff";
            inactive_active_menu_header("my_tbd");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }

    function config_dashbord_session_func(event) {
        var security_retval = check_user_acces_right("dashbord", "read");

        if (security_retval === 1) {
            setmenu("dashbord_session");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            history.push("/Partner/dashbord_session");
            inactive_active_menu_header("my_tbd");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }


    function config_dashbord_ressources_humaines_func(event) {
        var security_retval = check_user_acces_right("dashbord", "read");

        if (security_retval === 1) {
            setmenu("dashbord_ressources_humaines");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            history.push("/Partner/dashbord_ressources_humaines");
            inactive_active_menu_header("my_tbd");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }



    function config_dashbord_inscriptions_func(event) {
        var security_retval = check_user_acces_right("dashbord", "read");

        if (security_retval === 1) {
            setmenu("dashbord_inscriptions");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            history.push("/Partner/dashbord_inscriptions");
            inactive_active_menu_header("my_tbd");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }

    function config_dashbord_factures_func(event) {
        var security_retval = check_user_acces_right("dashbord", "read");

        if (security_retval === 1) {
            setmenu("dashbord_factures");
            setapiexcelimportmessage();
            setformation_file_name();
            document.body.style.backgroundColor = "#ffffff";
            history.push("/Partner/dashbord_factures");
            inactive_active_menu_header("my_tbd");
        } else {
            Dialog_1_handle_acces_insuffisant("Vos droits ne sont pas suffisants pour accéder à la gestion du matériel pédagogique");
        }
    }

    function DiplaytrainingList(event) {

        inactive_active_menu_header("my_class");
        setmenu("affichage");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/affichage");

        inactive_active_menu_header("my_class");
        var server_address = "127.0.0.1";
        //var server_address = "89.156.84.196";
        var form = new FormData();

        // Recuperation des parametres
        var filtre1 = selectedfilt1;
        var filtre2 = selectedfilt2;
        var filtre3 = selectedfilt3;

        var filtre1_value = "";
        var filtre2_value = "";
        var filtre3_value = "";

        // Recuperation des valeurs de filtres

        if (selectedfilt1) {
            filtre1_value = document.getElementsByName("filtre1")[0].value;
            form.append(filtre1, filtre1_value);
        }

        if (selectedfilt2) {
            filtre2_value = document.getElementsByName("filtre2")[0].value;
            form.append(filtre2, filtre2_value);
        }

        if (selectedfilt3) {
            filtre3_value = document.getElementsByName("filtre3")[0].value;
            form.append(filtre3, filtre3_value);
        }

        //console.log(" filtres1 = " + filtre1 + " = " + filtre1_value);
        //console.log(" filtres2 = " + filtre2 + " = " + filtre2_value);
        //console.log(" filtres3 = " + filtre3 + " = " + filtre3_value);


        form.append("token", stored_cookie);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_class/";

        axios.post(myurl, form).then(res => {
            if (res.data.status !== "False") {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("true");
                setResult(res.data.message)
                //setmyApimyApiMessage("OK")
            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("false");
                //setmyApimyApiMessage("")
            }


        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setmyApiResponse("false");
            //setmyApimyApiMessage("")
        })
    }

    function logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_part) != "undefined") {
            removeCookie_part('tokenmysypart', { path: '/' });
            history.push("/recherche-formation");
        }

        const stored_cookie = getCookie('tokenmysypart');

        if (stored_cookie) {
            var acces_right_token_name = stored_cookie + "_uar";

            removeCookie(acces_right_token_name,);
        }

        removeCookie("tokenmysychapprenant");
        removeCookie("tokenmysych");
        removeCookie("tokenmysychconnecteduserid");
        removeCookie("tokenmysytypeconnexion");

        removeCookie("__stripe_sid");
        removeCookie("__stripe_mid");


        removeCookie("tokenmysypart");
        removeCookie("mysy_session_display_view",);
        removeCookie("mysy_menu_gauche_reduit",);
        removeCookie("mysy_catalog_data_row_grouped_by",);
        removeCookie("tokenmysytuteurrhid");
        removeCookie("tokenmysychclient");

    }

    function logout() {
        confirmAlert({
            title: 'Deconnexion ?',
            message: 'Confirmez la deconnexion',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }


    const imgchangeHandler = (event) => {
        let file_size = event.target.files[0].size;

        //or if you like to have name and type
        let file_name = event.target.files[0].name;
        let file_type = event.target.files[0].type;


        //alert("file_size =  "+file_size+" file_type = "+file_type+" a = "+a);
        if (file_size > 10000000) {
            alert("L'image doit faire moins de 1 mega Kilo Octets");
            return;
        }
        setisimgSelectedfile(event.target.files[0]);
        setisimgSelected(true);
        setuserimgprofil(URL.createObjectURL(event.target.files[0]));
    };

    const [plateforme_super_admin, setplateforme_super_admin] = useState("");

    const [formation_initiale, setformation_initiale] = useState("");
    const [document_super_admin, setdocument_super_admin] = useState("");

    const [conntected_employee_activite_retard, setconntected_employee_activite_retard] = useState("0");
    const [conntected_employee_activite_new, setconntected_employee_activite_new] = useState("");

    const [conntected_employee_email, setconntected_employee_email] = useState("");
    const [conntected_employee_id, setconntected_employee_id] = useState("");
    const [conntected_account_id, setconntected_account_id] = useState("");
    const [conntected_account_partner_owner_recid, setconntected_account_partner_owner_recid] = useState("");


    const [GetPartnerNameFromToken_api_result, setGetPartnerNameFromToken_api_result] = useState();

    function GetPartnerNameFromToken(event) {

        var form = new FormData();

        //console.log(" GetPartnerNameFromToken stored_cookie = ", stored_cookie);

        form.append("token", stored_cookie);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/";

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) === String("true")) {
                setGetPartnerNameFromToken_api_result(true);
                //console.log(" In GetPartnerNameFromToken  res.data.status = " + res.data.status);
                //  console.log(" In GetPartnerNameFromToken  res.data.message = " + res.data.message);
                setparntername(JSON.parse(res.data.message).nom);

                setconntected_employee_email(JSON.parse(res.data.message).email);

                if (JSON.parse(res.data.message).nb_activite_retard)
                    setconntected_employee_activite_retard(JSON.parse(res.data.message).nb_activite_retard)
                else
                    setconntected_employee_activite_retard("0")


                if (JSON.parse(res.data.message).nb_activite_new)
                    setconntected_employee_activite_new(JSON.parse(res.data.message).nb_activite_new)
                else
                    setconntected_employee_activite_new("")



                if (JSON.parse(res.data.message)._id) {
                    setconntected_account_id(JSON.parse(res.data.message)._id);
                }
                else {
                    setconntected_account_id("");
                }


                if (JSON.parse(res.data.message).recid) {
                    setconntected_account_partner_owner_recid(JSON.parse(res.data.message).recid);
                }
                else {
                    setconntected_account_partner_owner_recid("");
                }

                if (JSON.parse(res.data.message).pack_service) {
                    setpartnerPackService(JSON.parse(res.data.message).pack_service);
                }
                else {
                    setpartnerPackService("Aucun Service");
                }

                if (JSON.parse(res.data.message).nb_formation) {
                    setparnternbformation(JSON.parse(res.data.message).nb_formation);
                }
                else {
                    setparnternbformation("");
                }

                if (JSON.parse(res.data.message).ressource_humaine_id) {
                    setconntected_employee_id(JSON.parse(res.data.message).ressource_humaine_id);
                }
                else {
                    setconntected_employee_id("");
                }


                if (JSON.parse(res.data.message).formation_initiale) {
                    setformation_initiale(JSON.parse(res.data.message).formation_initiale);
                } else {
                    setformation_initiale("");
                }

                if (JSON.parse(res.data.message).document_super_admin) {
                    setdocument_super_admin(JSON.parse(res.data.message).document_super_admin);
                } else {
                    setdocument_super_admin("");
                }

                if (JSON.parse(res.data.message).plateforme_super_admin) {
                    setplateforme_super_admin(JSON.parse(res.data.message).plateforme_super_admin);
                } else {
                    setplateforme_super_admin("");
                }



                var partner_employee_user_name = "Inconnu";

                if (JSON.parse(res.data.message).contact_nom) {
                    partner_employee_user_name = (JSON.parse(res.data.message).contact_nom);
                }


                if (JSON.parse(res.data.message).contact_prenom) {
                    partner_employee_user_name = partner_employee_user_name + " " + (JSON.parse(res.data.message).contact_prenom);
                }

                setparnter_user_employee(partner_employee_user_name);


                if (JSON.parse(res.data.message).ispending) {
                    setpartnerstatus(JSON.parse(res.data.message).ispending);
                }

                if (JSON.parse(res.data.message).firstconnexion &&
                    String(JSON.parse(res.data.message).firstconnexion) === "0") {
                    setfirstConnexion("0");
                } else {
                    setfirstConnexion("1");
                }

                if (JSON.parse(res.data.message).is_partner_admin_account &&
                    String(JSON.parse(res.data.message).is_partner_admin_account) === "1") {
                    setpart_is_partner_admin_account("1");
                } else {
                    setpart_is_partner_admin_account("0");
                }

            }
            else {
                //console.log(" In GetPartnerNameFromToken  res.data.status = " + res.data.status);
                //console.log(" In GetPartnerNameFromToken  res.data.message = " + res.data.message);

            }


        }).catch((error) => {
            console.warn('In GetPartnerNameFromToken Not good man :( mysearchtext = ');

        })
    }

    function sendImage(e) {
        var formData = new FormData();

        formData.append('File', isimgSelectedfile);
        formData.append("token", stored_part);
        formData.append("type", "partner");
        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/recordImage/",
            {
                method: 'POST',
                body: formData,
            }
        ).then((response) => response.json())
            .then((result) => {
                //console.log('Success:', result['message']);
                setisimgSelected(false);

            })
            .catch((error) => {
                console.error('Error:');
                setisimgSelected(true);
            });
    };




    // Create a reference to the hidden file input element
    const hiddenFileInput = React.useRef(null);

    // Programatically click the hidden file input element
    // when the Button component is clicked
    const handleClick = event => {
        hiddenFileInput.current.click();
    };
    // Call a function (passed as a prop from the parent component)
    // to handle the user-selected file 
    const handleChange = event => {
        const fileUploaded = event.target.files[0];
        props.handleFile(fileUploaded);
    };

    function alertactivecompte() {
        alert(" Vous devez ajouter un mode de Paiement pour acceder à cette fonctionnalité");
    }

    function ValideFirstConnexion() {
        setfirstConnexion("");
        setmenu("abonnement");
    }

    const [formation_file_name, setformation_file_name] = useState();
    const [CheckSalesOrder_api, setCheckSalesOrder_api] = useState("");
    const [CheckSalesOrder_message, setCheckSalesOrder_message] = useState("");
    function CheckSalesOrder(event) {

        var form = new FormData();

        formData.append("token", stored_part);
        formData.append("orderid", orderid);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/CheckSalesOrder/";

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) === String("true")) {
                setCheckSalesOrder_api("true")
            }
            else {
                setCheckSalesOrder_api("false")
                setCheckSalesOrder_message(String(res.data.message))
            }


        }).catch((error) => {
            //console.log('In CheckSalesOrder ', error);
            setCheckSalesOrder_api("false")

        })
    }

    const [isLoading, setLoading] = useState();


    const [GetPartnerLMSData_api, setGetPartnerLMSData_api] = useState();
    const [GetPartnerLMSData_result, setGetPartnerLMSData_result] = useState();
    const [GetPartnerLMSData_message, setGetPartnerLMSData_message] = useState();

    const [partner_lms_virtualhost_url, setpartner_lms_virtualhost_url] = useState();
    const [partner_lms_url, setpartner_lms_url] = useState();
    const [has_partner_lms_url, sethas_partner_lms_url] = useState();

    function GetPartnerLMSData(event) {

        var form = new FormData();

        form.append("token", stored_cookie);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/LMS_Get_Partner_Data/";

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) === String("true")) {
                //console.log(" In GetPartnerLMSData  res.data.status = " + res.data.status);
                //console.log(" In GetPartnerLMSData  res.data.message = " + res.data.message);
                setGetPartnerLMSData_api("true");
                setGetPartnerLMSData_result(res.data.message);
                var my_lms_url = "";
                if (JSON.parse(res.data.message).lms_account &&
                    String(JSON.parse(res.data.message).lms_account) === "1") {
                    sethas_partner_lms_url(JSON.parse(res.data.message).lms_account);
                    my_lms_url = (JSON.parse(res.data.message).lms_virtualhost_url) + "user_portal.php?recid=" + encodeURIComponent(JSON.parse(res.data.message).lms_part_recid) +
                        "&mysytoken=" + encodeURIComponent(JSON.parse(res.data.message).lms_pwd_mask);

                    // console.log(" ### LMS url = ", my_lms_url);
                    setpartner_lms_url(my_lms_url);

                    setpartner_lms_virtualhost_url((JSON.parse(res.data.message).lms_virtualhost_url));
                }

            }
            else {
                setGetPartnerLMSData_api("false");
                setGetPartnerLMSData_message(res.data.message);
            }


        }).catch((error) => {
            console.warn('In GetPartnerLMSData Not good man :( mysearchtext = ', error);
            setGetPartnerLMSData_api("false");

        })
    }

    const [deplie_hebergement, setdeplie_hebergement] = useState();
    function ftion_deplie_hebergement() {
        if (String(deplie_hebergement) === "1") {
            setdeplie_hebergement();
        } else {
            setdeplie_hebergement("1");
        }

    }
    const [deplie_mes_clients, setdeplie_mes_clients] = useState();
    function ftion_deplie_mes_clients() {
        if (String(deplie_mes_clients) === "1") {
            setdeplie_mes_clients();
        } else {
            setdeplie_mes_clients("1");
        }

    }

    const [Dialog_1_message, setDialog_1_message] = React.useState(false);
    const [Dialog_1_open, setDialog_1_open] = React.useState(false);
    function Dialog_1_handle_acces_insuffisant(message) {
        setDialog_1_message(message);
        setDialog_1_open(true);
    }

    const Dialog_1_handleClose = () => {
        //alert(" Utiliser le bouton 'fermer' ");
        //setOpen(false);
    };

    const Dialog_1_handleClose_buton = () => {
        setDialog_1_open(false);
    };

    const [Update_Connexion_Context_api, setUpdate_Connexion_Context_api] = useState();
    const [Update_Connexion_Context_message, setUpdate_Connexion_Context_message] = useState();
    const [Update_Connexion_Context_result, setUpdate_Connexion_Context_result] = useState([]);
    function Update_Connexion_Context(local_key, local_value) {

        var form = new FormData();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("partner_id", conntected_account_id);

        var my_key = local_key;

        var local_node = {};

        local_node[String(my_key)] = local_value;

        var tab_node = [];
        tab_node.push(local_node)

        var tab_context_json_str = JSON.stringify(tab_node);
        form.append("tab_context_json", tab_context_json_str);



        var myurl = process.env.REACT_APP_API_URL + "myclass/api/Update_Context_Partner_Account/";
        setLoading(true);
        axios.post(myurl, form).then(res => {
            //console.log(" In Update_Connexion_Context  res.data.status = " + res.data.status);
            //console.log(" In Update_Connexion_Context  res.data.message r_class = " + res.data.message);

            setLoading(false);
            if (String(res.data.status) === String("true")) {
                setUpdate_Connexion_Context_api("true");
                setUpdate_Connexion_Context_result(res.data.message);


            }
            else {
                setUpdate_Connexion_Context_api("false");
                setUpdate_Connexion_Context_message(res.data.message);
                //   alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            setLoading(false);
            console.warn('Update_Connexion_Context : Not good man :( mysearchtext = ' + error);
            setUpdate_Connexion_Context_api("false");
            alert(" Impossible de mettre à jour le contexte de connexion");

        })
    }

    const [left_menu, setleft_menu] = React.useState();

    const open_close_left_menu = () => {
        if (left_menu === true) {
            setleft_menu(false);
            setcookie_menu_gauche_reduit("mysy_menu_gauche_reduit", "1", { path: '/' });
            // Mettre à jour le context de connexion, coté backoffice
            Update_Connexion_Context("mysy_menu_gauche_reduit", "1");
        }
        else {
            setleft_menu(true);
            setcookie_menu_gauche_reduit("mysy_menu_gauche_reduit", "0", { path: '/' });
            // Mettre à jour le context de connexion, coté backoffice
            Update_Connexion_Context("mysy_menu_gauche_reduit", "0");
        }

    };


    const [selected_menu_header, setselected_menu_header] = React.useState("");
    const [Dialog_SEND_EMAIL_open, setDialog_SEND_EMAIL_open] = React.useState(false);


    const Dialog_SEND_EMAIL_handleClose = () => {
        setDialog_SEND_EMAIL_open(false);
    }

    const Clean_Selected_Rows_For_Email = () => {
        //setSelectionModel([])
    }


    function update_nb_activite_en_retard(new_val) {
        setconntected_employee_activite_retard(String(new_val));
    }

    function update_nb_activite_en_new(new_val) {
        setconntected_employee_activite_new(String(new_val));
    }

    const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
    const [alert_message, setalert_message] = useState("");
    const [alert_type, setalert_type] = useState("");

    function clear_alert_message() {
        setalert_message("");
    }
    function clear_alert_type() {
        setalert_type("");
    }
    function clear_display_alert_mysy() {
        setdisplay_alert_mysy("");
    }

    const [open_bloc_menu, setopen_bloc_menu] = useState(false);
    const [open_menu_f_initiale, setopen_menu_f_initiale] = useState(false);
    const [open_menu_f_continue, setopen_menu_f_continue] = useState(false);
    const [open_menu_compte, setopen_menu_compte] = useState(true);
    const [open_menu_gestion, setopen_menu_gestion] = useState(false);
    const [open_menu_lms, setopen_menu_lms] = useState(false);
    const [open_menu_crm, setopen_menu_crm] = useState(false);

    const [open_menu_config_gle, setopen_menu_config_gle] = useState(false);
    const [open_menu_config_ftion_initale, setopen_menu_config_ftion_initale] = useState(false);

    const [menu_active, setmenu_active] = useState("");

    return (

        <div className="partner">


            <Helmet>
                <title>Partenaires editeurs formations</title>
                <meta name="description" content="backoffice partenaire editeurs formation" />
                <meta name="robots" content="index,follow" />
            </Helmet>

            <div className="div_mobile" id="div_mobile">
                {isLoading && <div className="loader-container">
                    <div className="mysy_spinner">  <img src={img_loading_spin} />  </div>
                </div>}


                {/***  Affichage des messages d'alerte*/}
                {display_alert_mysy && String(display_alert_mysy) === "1" &&
                    <Module_Alert_Confirmation alert_message={alert_message}
                        alert_type={alert_type}
                        clear_alert_message={clear_alert_message}
                        clear_alert_type={clear_alert_type}
                        clear_display_alert_mysy={clear_display_alert_mysy}
                    />
                }
                {/*** FIN Affichage des messages d'alerte*/}

                <Dialog
                    open={Dialog_1_open}
                    onClose={Dialog_1_handleClose}

                >

                    <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily: 'DM Sans' }} id="draggable-dialog-title"> MySy Warning</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            <ImWarning />   {Dialog_1_message}
                        </DialogContentText>

                    </DialogContent>

                    <DialogActions>
                        <Button onClick={Dialog_1_handleClose_buton}>OK</Button>

                    </DialogActions>
                </Dialog>

                { /********* Dialog redaction email */}
                <Dialog

                    //  onClose={Dialog_SEND_EMAIL_handleClose}
                    className="module_email_management"
                    PaperProps={{
                        sx: {
                            width: "100%",
                            maxWidth: "920px!important",
                        },
                    }}
                    open={Dialog_SEND_EMAIL_open}
                    static
                    onClose={() => null}
                >


                    <DialogContent>
                        <DialogContentText>
                            {Dialog_1_message}
                        </DialogContentText>


                        <Module_Email_Management father_close_function={Dialog_SEND_EMAIL_handleClose} email_destinataire={""}
                            related_collection={"nointernalcontact"} Clean_Selected_Rows_For_Email={""} />

                    </DialogContent>


                </Dialog>
                { /********* Fin Dialog redaction email */}


                {left_menu === true && <div className="sub_dib_mobile"  >

                    <div className="div_gauche" id="div_gauche">

                        <aside className="sidebar-premium">
                            <nav className="not_display_mobile">
                                {left_menu === true && <div style={{ "cursor": "pointer", textAlign: "left", fontFamily: 'DM Sans' }} onClick={open_close_left_menu}>
                                    <Tooltip className="tooltip_css" id="tooltip_id_0" />
                                    <a data-tooltip-id="tooltip_id_0" data-tooltip-html="Réduire le menu">
                                        <PiSlideshowFill /> Réduire menu
                                    </a>
                                </div>}
                                {left_menu === false && <div style={{ "cursor": "pointer", textAlign: "center" }}>
                                    <Tooltip className="tooltip_css" id="tooltip_id_1" />
                                    <a data-tooltip-id="tooltip_id_1" data-tooltip-html="Agrandir le menu">
                                        <PiSlideshowThin onClick={open_close_left_menu} />
                                    </a>
                                </div>}
                            </nav>
                            <div className="sidebar-inner">
                                <div className="profile-card">
                                    <div className="profile-top">
                                        <img
                                            className="profile-avatar"
                                            src={userimgprofil}
                                            alt="Profil"
                                        />


                                    </div>

                                    <div className="profile-extra">
                                        <div className="profile-meta" style={{ textAlign: 'center' }}>
                                            {String(part_is_partner_admin_account) === "1" && <div className="nom_prenom"> {parntername && <nav>{parntername}</nav>} </div>}
                                            {String(part_is_partner_admin_account) !== "1" && parnter_user_employee && <div className="nom_prenom">  <nav>{parnter_user_employee}</nav> </div>}
                                            {String(part_is_partner_admin_account) !== "1" && !parnter_user_employee && <div className="nom_prenom">  <nav>Utilisateur</nav> </div>}

                                            <p>{String(partnerPackService).toUpperCase()} {String(formation_initiale) === "1" && <font> <br /> Formation initiale </font>}</p>



                                            {!isimgSelected && String(part_is_partner_admin_account) === "1" && <div className="nonlable">
                                                <input type="file" id="files" accept="image/*" onChange={imgchangeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} />
                                                <label for="files" className="profile-button">Changer image</label>



                                            </div>}

                                            {isimgSelected && <div className="nonlable">
                                                <Button variant="outlined" onClick={sendImage} className="enreg">Enregistrer</Button>
                                            </div>}

                                        </div>
                                    </div>

                                    <div className="profile-extra">
                                        <div className="profile-pill">
                                            <Building2 size={14} />
                                            <span>
                                                {GetPartnerNameFromToken_api_result && conntected_employee_activite_retard && parseFloat(conntected_employee_activite_retard) > 0 &&
                                                    <StyledBadge_mysy_red badgeContent={conntected_employee_activite_retard} style={{ "cursor": "pointer" }}
                                                        onClick={(event) => {
                                                            monactivite_func();

                                                        }}>
                                                        <Tooltip className="tooltip_css" id="badge_tool_03" style={{ "fontSize": "12px" }} />
                                                        <a data-tooltip-id="badge_tool_03" data-tooltip-html="Activité(s) en retard">
                                                            &nbsp; &nbsp;</a>
                                                    </StyledBadge_mysy_red>}
                                            </span>
                                        </div>

                                        <div className="profile-pill">
                                            <Building2 size={14} />
                                            <span>
                                                {GetPartnerNameFromToken_api_result && conntected_employee_activite_new && parseFloat(conntected_employee_activite_new) > 0 &&
                                                    <StyledBadge_mysy_color1 badgeContent={conntected_employee_activite_new} style={{ "cursor": "pointer" }}
                                                        onClick={(event) => {
                                                            monactivite_func();

                                                        }}>
                                                        <Tooltip className="tooltip_css" id="badge_tool_04" style={{ "fontSize": "12px" }} />
                                                        <a data-tooltip-id="badge_tool_04" data-tooltip-html="Nouvelle(s) activité(s) pour vous">
                                                            &nbsp; &nbsp;</a>

                                                    </StyledBadge_mysy_color1>}
                                            </span>
                                        </div>

                                        <div className="profile-pill">
                                            <Mail size={14} />
                                            <span>
                                                {Get_Nb_Unread_Emails_result && parseFloat(Get_Nb_Unread_Emails_result) >= 0 &&
                                                    <StyledBadge_mysy_color1 badgeContent={Get_Nb_Unread_Emails_result} style={{ "cursor": "pointer" }}
                                                        onClick={(event) => {
                                                            monactivite_func();

                                                        }}>
                                                        <Tooltip className="tooltip_css" id="badge_tool_mail" style={{ "fontSize": "12px" }} />
                                                        <a data-tooltip-id="badge_tool_mail" data-tooltip-html="eMails non lu(s)">
                                                            &nbsp; &nbsp;</a>

                                                    </StyledBadge_mysy_color1>}
                                            </span>
                                        </div>



                                    </div>
                                </div>

                                <nav className="sidebar-nav">
                                    zzzz <br />

                                    {menuData.map((section, sectionIndex) => (
                                        <section className="nav-section" key={sectionIndex}>
                                            {/*section.bloc_title && <nav className="section_bloc_titre"> {section.bloc_title} </nav>*/}

                                            <div className="menu-item-wrap" onClick={(e) => {

                                                if (section.title === "Ftion. Continue") {
                                                    setopen_menu_f_continue(!open_menu_f_continue);
                                                }

                                                if (section.title === "Ftion. Initiale") {
                                                    setopen_menu_f_initiale(!open_menu_f_initiale);
                                                }

                                                if (section.title === "CRM") {
                                                    setopen_menu_crm(!open_menu_crm);
                                                }


                                                if (section.title === "Gestion") {
                                                    setopen_menu_gestion(!open_menu_gestion);
                                                }

                                                if (section.title === "Espace E-Learning") {
                                                    setopen_menu_lms(!open_menu_lms);
                                                }

                                                 if (section.title === "Config. Gle") {
                                                    setopen_menu_config_gle(!open_menu_config_gle);
                                                }

                                                 if (section.title === "Config. Ftion Initale") {
                                                    setopen_menu_config_ftion_initale(!open_menu_config_ftion_initale);
                                                }

                                                /*if (section.title === "Compte") {
                                                  setopen_menu_compte(!open_menu_compte);
                                                }*/

                                            }}

                                            >
                                                <div className="section-title section_bloc_titre" onClick={() => section.hasChildren && setopen_bloc_menu(!open_bloc_menu)} style={{ cursor: 'pointer' }}>
                                                    {section.title === "Compte" && <UserCircle2 size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "Ftion. Continue" && <BookOpen size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "Ftion. Initiale" && <BookOpen size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "Gestion" && <Handshake size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "CRM" && <Handshake size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "Paramètres" && <SlidersHorizontal size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "Espace E-Learning" && <SlidersHorizontal size={15} style={{ color: `${section.menu_color}` }} />}

                                                    {section.title === "Config. Gle" && <SlidersHorizontal size={15} style={{ color: `${section.menu_color}` }} />}
                                                    {section.title === "Config. Ftion Initale" && <SlidersHorizontal size={15} style={{ color: `${section.menu_color}` }} />}

                                                    <span className="menu-item-left">{section.title}</span>

                                                    {/** Ftion. Continue */}
                                                    {section.title === "Ftion. Continue" && open_menu_f_continue && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;  <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "Ftion. Continue" && !open_menu_f_continue && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;  <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {/** Ftion. Initial */}
                                                    {section.title === "Ftion. Initiale" && open_menu_f_initiale && <span className="menu-item-right">
                                                        &nbsp;   &nbsp; <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "Ftion. Initiale" && !open_menu_f_initiale && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;   <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {/** Ftion. CRM */}
                                                    {section.title === "CRM" && open_menu_crm && <span className="menu-item-right">
                                                        &nbsp;   &nbsp; <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "CRM" && !open_menu_crm && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;   <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {/** ESTION */}
                                                    {section.title === "Gestion" && open_menu_gestion && <span className="menu-item-right">
                                                        &nbsp;   &nbsp; <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "Gestion" && !open_menu_gestion && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;   <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {/** LMS/ Elearning */}
                                                    {section.title === "Espace E-Learning" && open_menu_lms && <span className="menu-item-right">
                                                        &nbsp;   &nbsp; <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "Espace E-Learning" && !open_menu_lms && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;   <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {/** Config. Gle */}
                                                    {section.title === "Config. Gle" && open_menu_lms && <span className="menu-item-right">
                                                        &nbsp;   &nbsp; <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "Config. Gle" && !open_menu_lms && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;   <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}


                                                    {/** Config. Ftion Initale */}
                                                    {section.title === "Config. Ftion Initale" && open_menu_lms && <span className="menu-item-right">
                                                        &nbsp;   &nbsp; <ChevronDown size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}

                                                    {section.title === "Config. Ftion Initale" && !open_menu_lms && <span className="menu-item-right">
                                                        &nbsp;   &nbsp;   <ChevronRight size={20} className="menu-chevron" style={{ fontWeight: '700', color: '#FFF' }} />
                                                    </span>}



                                                </div>
                                            </div>

                                            {section.title === "Ftion. Continue" && open_menu_f_continue && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}


                                            {section.title === "Ftion. Initiale" && open_menu_f_initiale && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}

                                            {/** Gestion */}
                                            {section.title === "Gestion" && open_menu_gestion && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}

                                            {/** CRM */}
                                            {section.title === "CRM" && open_menu_crm && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}


                                            {/** Mon compte */}
                                            {section.title === "Compte" && open_menu_compte && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}


                                            {/** LMS / E-Learning */}
                                            {section.title === "Espace E-Learning" && open_menu_lms && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}

                                             {/** Config. Gle */}
                                            {section.title === "Config. Gle" && open_menu_config_gle && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}


                                             {/** LMS / E-Learning */}
                                            {section.title === "Config. Ftion Initale" && open_menu_config_ftion_initale && <div className="section-items">
                                                {section.items.map((item, itemIndex) => (
                                                    <MenuItem_MySy item={item} key={itemIndex} />
                                                ))}
                                            </div>}


                                        </section>
                                    ))}
                                </nav>

                                <div className="sidebar-footer">
                                    <button type="button" className="footer-link">
                                        <HelpCircle size={16} />
                                        <span>Aide</span>
                                    </button>
                                    <button type="button" className="footer-link">
                                        <Settings size={16} />
                                        <span>Paramètres</span>
                                    </button>
                                    <button type="button" className="footer-link footer-link-danger">
                                        <LogOut size={16} />
                                        <span>Déconnexion</span>
                                    </button>
                                </div>
                            </div>
                        </aside>
                    </div>

                </div>}

                {
                    left_menu === true && <div>
                        {String(firstConnexion) === "1" && String(part_is_partner_admin_account) === "1" &&
                            <div className="div_droite firstConnexion">
                                <div className="firstConnexion_text">
                                    <b>Bienvenue chez MySy, cher partenaire ! </b> <br /> &nbsp;<br />
                                    C'est votre première connexion, et toute l'équipe est ravie de vous accueillir dans l'aventure.<br />
                                    Pour commencer à publier vos formations et profiter pleinement de notre plateforme, il vous suffit de choisir une formule d'abonnement en cliquant  <Button onClick={ValideFirstConnexion} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; &nbsp; ici</Button><br />
                                    &nbsp; <br /> Et merci de faire partie du voyage !
                                </div>

                            </div>}

                        {String(firstConnexion) === "1" && String(part_is_partner_admin_account) !== "1" &&
                            <div className="div_droite firstConnexion">
                                <div className="firstConnexion_text">
                                    <b>Bienvenue chez MySy, cher Utilisateur </b> <br /> &nbsp;<br />
                                    C'est votre première connexion, et toute l'équipe est ravie de vous accueillir dans l'aventure.<br />
                                    Nous vous invitons à modifier votre mot de passe à partir du menu <i>"MES INFORMATIONS"</i> ==&gt; Bouton <i>"SECURITE"</i>  <br /><br />
                                    <Button onClick={(e) => setfirstConnexion()} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; Fermer</Button><br />
                                    &nbsp; <br /> Merci.
                                </div>

                            </div>}


                        {String(myApiResponse) === String("false") && <div className="div_droite">
                            <div className="koUpdateData"> Impossible de contacter  l'hote distant. Merci de contacter votre administrateur  </div>
                        </div>

                        }

                        {String(menu) === "affichage" &&
                            <div className="div_droite">

                                <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right}
                                    partner_lms_virtualhost_url={partner_lms_virtualhost_url} />
                            </div>
                        }

                        {String(menu) === "tous_mes_document" &&
                            <div className="div_droite">
                                <Modules_Mes_Documents ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right}

                                    partner_client_id={""}
                                    partner_owner_recid={conntected_account_partner_owner_recid}
                                    type_user_connected={"partner_account"}
                                    my_title={"Gestion Documentaire"}
                                    all_ged={"Gestion 1"}
                                />
                            </div>
                        }


                        {String(menu) === "internal_email" &&
                            <div className="div_droite">
                                <Module_Internal_Email_Management ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right}

                                    Get_Nb_Unread_Emails={Get_Nb_Unread_Emails}
                                    partner_client_id={""}
                                    partner_owner_recid={conntected_account_partner_owner_recid}
                                    conntected_account_id={conntected_account_id}
                                    type_user_connected={"partner_account"}
                                    my_title={"Gestion Documentaire"}
                                />
                            </div>
                        }





                        {String(menu) === "mes_ue" &&
                            <div className="div_droite">

                                <DisplayPartnerUnite_Enseignement ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale} />
                            </div>
                        }

                        {String(menu) === "domaine_categorie_metier" &&
                            <div className="div_droite">

                                <Partner_Domaine_Categorie_Metier ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale} />
                            </div>
                        }

                        {String(menu) === "part_produit_service" &&
                            <div className="div_droite">

                                <Partner_Product_Service ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale} />
                            </div>
                        }


                        {String(menu) === "config_formation_initiale" &&
                            <div className="div_droite">

                                <Partner_Config_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "admission_process" &&
                            <div className="div_droite">

                                <Partner_Admission_Process_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "administration_pedagogique" &&
                            <div className="div_droite">


                                <Admission_Pedagogique_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService}
                                    conntected_employee_id={conntected_employee_id}
                                    object_key={orderid}
                                    submenu={packs}

                                    formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "competence_pedagogique" &&
                            <div className="div_droite">


                                <Config_Competence_Pedagogique_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService}
                                    conntected_employee_id={conntected_employee_id}
                                    object_key={orderid}
                                    submenu={packs}

                                    formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }



                        {String(menu) === "config_plateforme_partners" &&
                            <div className="div_droite">

                                <Module_Plateform_Admin_Partners ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }




                        {String(menu) === "note_evaluation" &&
                            <div className="div_droite">

                                <Notes_Evaluation ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "jurys" &&
                            <div className="div_droite">

                                <Jury ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right}
                                />
                            </div>
                        }

                        {String(menu) === "conseil_classe" &&
                            <div className="div_droite">

                                <Conseil_Classe ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right}
                                />
                            </div>
                        }


                        {String(menu) === "groupe_apprenant" &&
                            <div className="div_droite">

                                <Groupe_Apprenant ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "admission_session" &&
                            <div className="div_droite">

                                <Session_Admission_FI ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} reduce={"0"} />
                            </div>
                        }




                        {String(menu) === "checkout" && <div className="div_droite">
                            <Button onClick={"returntoorder"} className="btn_retour_ps"> Retour aux produits & Services </Button>
                            <CheckOut packs={location.state.new_pack} periodicity={location.state.period} mypackprice={location.state.price} />
                        </div>

                        }

                        {String(menu) === "creation" &&
                            <div className="div_droite">


                                <div className="parter_div_droite_haut">
                                    {String(apiexcelimportmessage) === String("true") &&
                                        <div className="parter_div_filtrer_row okUpdateData">
                                            {excelimportmessage}<br />&nbsp;<br />

                                        </div>

                                    }
                                    {String(apiexcelimportmessage) === String("false") &&
                                        <div className="parter_div_filtrer_row koUpdateData">
                                            Impossible de traiter le fichier <br />
                                            <u> <b> {excelimportmessage} </b></u>
                                            <br />&nbsp;<br />
                                        </div>

                                    }

                                    {String(apiexcelimportmessage) === String("-1") &&
                                        <div className="parter_div_filtrer_row koUpdateData">
                                            Impossible de traiter le fichier <br />&nbsp;<br />
                                        </div>

                                    }


                                    <div className="parter_div_filtrer_row">
                                        <div>


                                            {String(partnerstatus) === String("0") && <div className="parter_div_filtrer_row_gauche">

                                                <Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu" style={{
                                                    "background": "#c8cfd5",
                                                    "minWidth": "15rem", "color": "black", "width": "auto"
                                                }}
                                                    id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer des formations &nbsp; <SendIcon />
                                                </Button><br />
                                                {formation_file_name && <nav className="okUpdateData"><i>{formation_file_name}</i></nav>}
                                                <input type="file"
                                                    accept=".csv"
                                                    ref={hiddenFileInput_formation}
                                                    style={{ display: 'none' }}
                                                    name="liste_formation_file"
                                                    onChange={handleSubmission}
                                                />



                                                <a href='/sample/template_import_formations.csv' download>Télécharger un fichier modèle</a>

                                                <br />

                                                {/* <input type="file" name="file" accept=".csv" onChange={changeHandler} /> <br /> */}
                                                <br />&nbsp;
                                                <div className="import_excel_text">

                                                    <nav className="titre1">  Comment utiliser le fichier ? </nav>
                                                    <nav style={{ "color": "orange" }}>
                                                        Dans le fichier à importer, seules les colonnes suivantes sont obligatoires  :
                                                        <ul>
                                                            <li>external_code : C'est le code de la formation chez vous, editeur de la formation </li>
                                                            <li> titre : Le titre de la formation </li>
                                                            <li> domaine : Le domaine au quel est rattaché la formation</li>
                                                            <li> description : La descriptin de la formation</li>
                                                        </ul>
                                                    </nav>
                                                    Pour le reste, <br />
                                                    <ul>
                                                        <li> Il s'agit d'un fichier csv. Les colonnes sont separées par des ";"</li>
                                                        <li> A l'interieur d'une même colonne, les informations sont separées par des ";"     </li>
                                                        <li> Champ 'Metier' :  les valeurs acceptées sont : IT, RH, vente, dev_perso, Graphisme, Management, Digital, Office, Autre</li>
                                                        <li> ...</li>
                                                    </ul>
                                                    <a href='/sample/MySy_Import_formation_csv.pdf' download>Télécharger le guide complet pour plus d'informations</a><br />
                                                </div>
                                                <div style={{ "width": "50%" }}> &nbsp; </div>





                                            </div>}

                                            {String(partnerstatus) !== String("0") && <div className="parter_div_filtrer_row_gauche">


                                                Import excel d'une formation <a href='/sample/template_import_formations.csv' download>Télécharger un fichier modèle</a>

                                                <br />

                                                <input type="file" name="file" onChange={""} accept=".csv" />


                                                <br />
                                                <div align="right">
                                                    <Button onClick={alertactivecompte} variant="contained" endIcon={<SendIcon />}> Importer </Button>
                                                </div>

                                            </div>}
                                        </div>

                                        <br />

                                    </div>
                                </div>
                                {/* <div className="parter_div_droite_bas">
                                <div className="titre1_bis"> Création manuelle d'une formation </div>

                                <TrainingForm mytrainingclass={{ 'ref': '', 'dist': 'Oui', 'plus_produit': '0' }} ispending={partnerstatus}
                                    currentpack={String(partnerPackService).toUpperCase()} />
                            </div>*/}

                            </div>
                        }


                        {String(menu) === "infopartner" &&
                            <div className="div_droite">
                                <PartnerInfo_v2 check_user_acces_right={check_user_acces_right} />
                            </div>
                        }



                        {String(menu) === "statistique" &&
                            <div className="div_droite">
                                <PartenairStat />
                            </div>
                        }

                        {String(menu) === "setuplms" &&
                            <div className="div_droite">
                                <HebergementLms conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("lms", "read")}
                                    write_access={check_user_acces_right("lms", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "mes_sessions" &&
                            <div className="div_droite">

                                <DisplayPartnerSession
                                    conntected_account_id={conntected_account_id}
                                    conntected_employee_id={conntected_employee_id}
                                    formation_initiale={formation_initiale}
                                    object_key={orderid}
                                    class_internal_url={packs}
                                    read_access={check_user_acces_right("session", "read")}
                                    write_access={check_user_acces_right("session", "write")}
                                    check_user_acces_right={check_user_acces_right} reduce={"0"} />
                            </div>
                        }



                        {String(menu) === "mes_promotions" &&
                            <div className="div_droite">

                                <DisplayPartnerPromotion
                                    conntected_account_id={conntected_account_id}
                                    conntected_employee_id={conntected_employee_id}
                                    formation_initiale={formation_initiale}
                                    object_key={orderid}
                                    class_internal_url={packs}
                                    read_access={check_user_acces_right("session", "read")}
                                    write_access={check_user_acces_right("session", "write")}
                                    check_user_acces_right={check_user_acces_right} reduce={"0"} />
                            </div>
                        }


                        {String(menu) === "mes_employes" &&
                            <div className="div_droite">
                                <Employes conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("employe", "read")} write_access={check_user_acces_right("employe", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "autre_rh" &&
                            <div className="div_droite">
                                <Autre_RH conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("employe", "read")} write_access={check_user_acces_right("employe", "write")}
                                    check_user_acces_right={check_user_acces_right} type='autre_rh' />
                            </div>
                        }

                        {String(menu) === "factures_client" &&
                            <div className="div_droite">
                                <Factures_Client conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("facture_client", "read")}
                                    write_access={check_user_acces_right("facture_client", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "prix_achat" &&
                            <div className="div_droite">
                                <Partner_Prix_Achat conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("prix_achat", "read")} write_access={check_user_acces_right("prix_achat", "write")} />
                            </div>
                        }


                        {String(menu) === "mon_materiel" &&
                            <div className="div_droite">
                                <Materiels conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "mes_salles" &&
                            <div className="div_droite">
                                <Materiel_Salle conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "mes_opportunites" &&
                            <div className="div_droite">

                                <CRM_Opportunite conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    reduce={"0"} />
                            </div>
                        }

                        {String(menu) === "equipe_team" &&
                            <div className="div_droite">

                                <Equipe_Team conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("equipe", "read")}
                                    write_access={check_user_acces_right("equipe", "write")}
                                    check_user_acces_right={check_user_acces_right}
                                    reduce={"0"} />
                            </div>
                        }


                        {String(menu) === "mes_cmd" &&
                            <div className="div_droite">
                                <Partner_Commande conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("commande", "read")}
                                    write_access={check_user_acces_right("commande", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "facture" && <div className="div_droite">

                            <Facture currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                read_access={check_user_acces_right("compte_partner", "read")} write_access={check_user_acces_right("compte_partner", "write")}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }

                        {String(menu) === "pricing" && <div className="div_droite">

                            <Pricing conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("prix", "read")} write_access={check_user_acces_right("prix", "write")} />
                        </div>
                        }

                        {String(menu) === "mes_apprenants" && <div className="div_droite">


                            <Apprenant conntected_employee_id={conntected_employee_id} object_key={orderid} subdata={packs}
                                read_access={check_user_acces_right("stagiaire", "read")} write_access={check_user_acces_right("stagiaire", "write")}
                                check_user_acces_right={check_user_acces_right}
                                formation_initiale={formation_initiale} />
                        </div>
                        }

                        {String(menu) === "mes_stagiaires" && <div className="div_droite">

                            <DisplayPartnerStagiaires conntected_employee_id={conntected_employee_id} object_key={orderid} subdata={packs}
                                read_access={check_user_acces_right("stagiaire", "read")} write_access={check_user_acces_right("stagiaire", "write")}
                                formation_initiale={formation_initiale}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }


                        {String(menu) === "abonnement" && <div className="div_droite">

                            <Abonnement currentpack={partnerPackService} conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("abonnement", "read")} write_access={check_user_acces_right("abonnement", "write")} />
                        </div>
                        }

                        {String(menu) === "ordervalide" && orderid && packs && <div className="div_droite">
                            <OrderConfirmation num_cmd={orderid} packs={String(packs).toLocaleUpperCase()} />
                        </div>
                        }

                        {String(menu) === "mes_clients" && <div className="div_droite">

                            <Partner_Client conntected_employee_id={conntected_employee_id} object_key={orderid}
                                read_access={check_user_acces_right("client", "read")} write_access={check_user_acces_right("client", "write")}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }



                        {String(menu) === "config_document" && <div className="div_droite">

                            <Config_Documents conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }

                        {String(menu) === "config_document_super_admin" && <div className="div_droite">

                            <Config_Documents_Super_Admin conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }


                        {String(menu) === "config_technique" && <div className="div_droite">

                            <Configuration_Technique conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }


                        {String(menu) === "config_session_steps" && <div className="div_droite">

                            <Partner_Configuration_Session_Steps conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }



                        {String(menu) === "config_jours_heures" && <div className="div_droite">

                            <Partner_Configuration_Jours_Travail conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }


                        {String(menu) === "config_formulaires" && <div className="div_droite">

                            <Partner_Config_Formulaires conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />

                        </div>
                        }


                        {String(menu) === "config_champ_specific" && <div className="div_droite">

                            <Config_Champs_Personnalise conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }


                        {String(menu) === "module_agenda" && <div className="div_droite">

                            <Module_Agenda conntected_employee_id={conntected_employee_id}
                                read_access={check_user_acces_right("module_agenda", "read")}
                                write_access={check_user_acces_right("module_agenda", "write")}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }


                        {String(menu) === "dashbord_session" && <div className="div_droite">

                            <Dashbord_Session conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }

                        {String(menu) === "dashbord_formation" && <div className="div_droite">

                            <Dashbord_Formation conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }

                        {String(menu) === "dashbord_ressources_humaines" && <div className="div_droite">

                            <Dashbord_Ressources_Humaines conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }

                        {String(menu) === "dashbord_inscriptions" && <div className="div_droite">
                            <Dashbord_Inscriptions conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }


                        {String(menu) === "dashbord_factures" && <div className="div_droite">
                            <Dashbord_Factures conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }

                        {String(menu) === "mon_tableau_de_bord" && <div className="div_droite">

                            <Mon_Tableau_De_Bord conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />

                        </div>
                        }

                        {String(menu) === "monactivite" && <div className="div_droite">
                            <PartnerClientActivite conntected_employee_id={conntected_employee_id} check_user_acces_right={check_user_acces_right}
                                email={conntected_employee_email} related_collection={"partnair_account"} update_nb_activite_en_retard={update_nb_activite_en_retard}
                                update_nb_activite_en_new={update_nb_activite_en_new}

                            />
                        </div>
                        }



                    </div>
                }


                {/* div_gauche div_gauche_reduit */}
                {
                    left_menu === false && <div className="sub_dib_mobile"  >
                        <div className="div_gauche div_gauche_reduit" id="div_gauche" style={{ borderRadius: '0px', margin: '0px' }}>

                            <nav className="not_display_mobile">
                                {left_menu === true && <div style={{ "cursor": "pointer", textAlign: "left", fontFamily: 'DM Sans' }} onClick={open_close_left_menu}>
                                    <Tooltip className="tooltip_css" id="tooltip_id_0" />
                                    <a data-tooltip-id="tooltip_id_0" data-tooltip-html="Réduire le menu">
                                        <PiSlideshowFill /> Réduire menu
                                    </a>
                                </div>}
                                {left_menu === false && <div style={{ "cursor": "pointer", textAlign: "center" }}>
                                    <Tooltip className="tooltip_css" id="tooltip_id_1" />
                                    <a data-tooltip-id="tooltip_id_1" data-tooltip-html="Agrandir le menu">
                                        <PiSlideshowThin onClick={open_close_left_menu} />
                                    </a>
                                </div>}
                            </nav>

                            <div> <hr /> </div>

                            <Tooltip className="tooltip_css" id="tooltip_id_2" />
                            <a data-tooltip-id="tooltip_id_2" data-tooltip-html="INFORMATIONS">
                                {String(menu) !== "infopartner" && <div className="sousmenu" onClick={PersonnalData}>   <FcHome className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "infopartner" && <div className="sousmenu_selected" onClick={PersonnalData}  >  <FcHome className="icone_menu" />  &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_22" />
                            <a data-tooltip-id="tooltip_id_22" data-tooltip-html="MON ACTIVITE">
                                {String(menu) !== "monactivite" && <div className="sousmenu" onClick={monactivite_func}>   <CircleNotificationsIcon className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "monactivite" && <div className="sousmenu_selected" onClick={monactivite_func}  >  <CircleNotificationsIcon className="icone_menu" />  &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />


                            <Tooltip className="tooltip_css" id="tooltip_id_3" />
                            <a data-tooltip-id="tooltip_id_3" data-tooltip-html="MON TABLEAU DE BORD">
                                {String(menu) !== "mon_tableau_de_bord" && <div className="sousmenu" onClick={mon_tableau_de_bord_func}>   <AiOutlineDashboard className="icone_menu" />&nbsp;</div>}
                                {String(menu) === "mon_tableau_de_bord" && <div className="sousmenu_selected" onClick={mon_tableau_de_bord_func}  >  <AiOutlineDashboard className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_4" />
                            <a data-tooltip-id="tooltip_id_4" data-tooltip-html="PLANNING">
                                {String(menu) !== "module_agenda" && <div className="sousmenu" onClick={module_agenda_func}>   <FcCalendar className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "module_agenda" && <div className="sousmenu_selected" onClick={module_agenda_func}  >  <FcCalendar className="icone_menu" />&nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_5" />
                            <a data-tooltip-id="tooltip_id_5" data-tooltip-html="ABONNEMENT">
                                {String(menu) !== "abonnement" && <div className="sousmenu" onClick={Abonnement_func} > <FcKey className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "abonnement" && <div className="sousmenu_selected" onClick={Abonnement_func} >  <FcKey className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_6" />
                            <a data-tooltip-id="tooltip_id_6" data-tooltip-html="FACTURE MYSY">
                                {String(menu) !== "facture" && <div className="sousmenu" onClick={DisplayFacure}  ><FcFeedback className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "facture" && <div className="sousmenu_selected" onClick={DisplayFacure}  > <FcFeedback className="icone_menu" />&nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_677" />
                            <a data-tooltip-id="tooltip_id_677" data-tooltip-html="BOITE MAIL">
                                {String(menu) !== "internal_email" && <div className="sousmenu" onClick={Display_Internal_Boite_Email}  ><MailIcon className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "internal_email" && <div className="sousmenu_selected" onClick={Display_Internal_Boite_Email}  > <MailIcon className="icone_menu" />&nbsp;</div>}
                            </a>
                            <hr className="my_hr" />



                            <Tooltip className="tooltip_css" id="tooltip_id_66" />
                            <a data-tooltip-id="tooltip_id_66" data-tooltip-html="DOCUMENTS (GED)">
                                {String(menu) !== "tous_mes_document" && <div className="sousmenu" onClick={Display_Tous_Documents}  ><FolderZipIcon className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "tous_mes_document" && <div className="sousmenu_selected" onClick={Display_Tous_Documents}  > <FolderZipIcon className="icone_menu" />&nbsp;</div>}
                            </a>
                            <hr className="my_hr" />


                            <div> <hr /> </div>

                            {/* <Tooltip className="tooltip_css" id="tooltip_id_7" />
                        <a data-tooltip-id="tooltip_id_7" data-tooltip-html="CREER FORMATION">
                            {String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> &nbsp;</div>}
                            {String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> </div>}
                        </a>
                        <hr className="my_hr" />*/}

                            <Tooltip className="tooltip_css" id="tooltip_id_8" />
                            <a data-tooltip-id="tooltip_id_8" data-tooltip-html="FORMATIONS">
                                {String(menu) !== "affichage" && <div className="sousmenu" onClick={DiplaytrainingList}  > <FcList className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "affichage" && <div className="sousmenu_selected" onClick={DiplaytrainingList}  ><FcList className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_81" />
                            <a data-tooltip-id="tooltip_id_81" data-tooltip-html="UNITE D'ENSEIGNEMENT">
                                {String(menu) !== "mes_ue" && <div className="sousmenu" onClick={DiplayPartner_UE}  > <FcOrgUnit className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "mes_ue" && <div className="sousmenu_selected" onClick={DiplayPartner_UE}  ><FcOrgUnit className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />


                            <Tooltip className="tooltip_css" id="tooltip_id_82" />
                            <a data-tooltip-id="tooltip_id_82" data-tooltip-html="CARACTERISTIQUES">
                                {String(menu) !== "domaine_categorie_metier" && <div className="sousmenu" onClick={DiplayPartner_Domaine_Categorie_Metier}  > <FcEngineering className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "domaine_categorie_metier" && <div className="sousmenu_selected" onClick={DiplayPartner_Domaine_Categorie_Metier}  ><FcEngineering className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_821" />
                            <a data-tooltip-id="tooltip_id_821" data-tooltip-html="PRODUITS & SERVICES">
                                {String(menu) !== "part_produit_service" && <div className="sousmenu" onClick={DiplayPartner_Produits_Services}  > <LiaProductHunt className="icone_menu" /> &nbsp;</div>}
                                {String(menu) === "part_produit_service" && <div className="sousmenu_selected" onClick={DiplayPartner_Produits_Services}  ><LiaProductHunt className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />



                            <Tooltip className="tooltip_css" id="tooltip_id_9" />
                            <a data-tooltip-id="tooltip_id_9" data-tooltip-html="SESSIONS">
                                {String(menu) !== "mes_sessions" && <div className="sousmenu" onClick={DiplaySessionList}  > <FcFlowChart className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "mes_sessions" && <div className="sousmenu_selected" onClick={DiplaySessionList}  ><FcFlowChart className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_901" />
                            {String(formation_initiale) === "1" && <a data-tooltip-id="tooltip_id_901" data-tooltip-html="PROMOTIONS">
                                {String(menu) !== "mes_promotions" && <div className="sousmenu" onClick={DiplayPromotionList}  > <FcFlowChart className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "mes_promotions" && <div className="sousmenu_selected" onClick={DiplayPromotionList}  ><FcFlowChart className="icone_menu" /> &nbsp;</div>}
                                <hr className="my_hr" />
                            </a>}



                            <Tooltip className="tooltip_css" id="tooltip_id_906" />
                            {String(formation_initiale) === "1" && <a data-tooltip-id="tooltip_id_906" data-tooltip-html="JURYS">
                                {String(menu) !== "jurys" && <div className="sousmenu" onClick={Display_jurys_func}  > <FcPodiumWithAudience className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "jurys" && <div className="sousmenu_selected" onClick={Display_jurys_func}  ><FcPodiumWithAudience className="icone_menu" /> &nbsp;</div>}
                                <hr className="my_hr" />
                            </a>}

                            <Tooltip className="tooltip_css" id="tooltip_id_9061" />
                            {String(formation_initiale) === "1" && <a data-tooltip-id="tooltip_id_9061" data-tooltip-html="CONSEIL CLASSE">
                                {String(menu) !== "conseil_classe" && <div className="sousmenu" onClick={Display_conseil_classe_func}  > <FcConferenceCall className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "conseil_classe" && <div className="sousmenu_selected" onClick={Display_conseil_classe_func}  ><FcConferenceCall className="icone_menu" /> &nbsp;</div>}
                                <hr className="my_hr" />
                            </a>}


                            <Tooltip className="tooltip_css" id="tooltip_id_907" />
                            {String(formation_initiale) === "1" && <a data-tooltip-id="tooltip_id_907" data-tooltip-html="NOTES & EVAL.">
                                {String(menu) !== "note_evaluation" && <div className="sousmenu" onClick={Display_note_evaluation_func}  > <FcFlowChart className="icone_menu" /> &nbsp; </div>}
                                {String(menu) === "note_evaluation" && <div className="sousmenu_selected" onClick={Display_note_evaluation_func}  ><FcFlowChart className="icone_menu" /> &nbsp;</div>}
                            </a>}
                            <hr className="my_hr" />


                            <Tooltip className="tooltip_css" id="tooltip_id_10" />
                            <a data-tooltip-id="tooltip_id_10" data-tooltip-html="STAGIAIRES">
                                {String(menu) !== "mes_stagiaires" && <div className="sousmenu" onClick={DiplayStagiaireList}  > <FcReading className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "mes_stagiaires" && <div className="sousmenu_selected" onClick={DiplayStagiaireList}  ><FcReading className="icone_menu" />&nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_11" />
                            <a data-tooltip-id="tooltip_id_11" data-tooltip-html="APPRENANTS">
                                {String(menu) !== "mes_apprenants" && <div className="sousmenu" onClick={mes_apprenants_func}  > <PiStudent className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "mes_apprenants" && <div className="sousmenu_selected" onClick={mes_apprenants_func}  ><PiStudent className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_112" />
                            <a data-tooltip-id="tooltip_id_112" data-tooltip-html="ENV. EMAIL">
                                <div className="sousmenu" onClick={(e) => {
                                    setDialog_SEND_EMAIL_open(true);
                                }}  > <ForwardToInboxIcon className="icone_menu" />&nbsp; </div>
                            </a>
                            <hr className="my_hr" />

                            <Tooltip className="tooltip_css" id="tooltip_id_1111" />
                            {String(formation_initiale) === "1" && <a data-tooltip-id="tooltip_id_1111" data-tooltip-html="ADMISSION">
                                {String(menu) !== "admission_session" && <div className="sousmenu" onClick={admission_session_func}  > <CompareArrowsIcon className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "admission_session" && <div className="sousmenu_selected" onClick={admission_session_func}  ><CompareArrowsIcon className="icone_menu" /> &nbsp;</div>}
                            </a>}
                            <hr className="my_hr" />


                            <Tooltip className="tooltip_css" id="tooltip_id_111" />
                            {String(formation_initiale) === "1" && <a data-tooltip-id="tooltip_id_111" data-tooltip-html="GROUPE APPRENANTS">
                                {String(menu) !== "groupe_apprenant" && <div className="sousmenu" onClick={groupe_apprenant_func}  > <Groups2Icon className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "groupe_apprenant" && <div className="sousmenu_selected" onClick={groupe_apprenant_func}  ><Groups2Icon className="icone_menu" /> &nbsp;</div>}
                            </a>}
                            <hr className="my_hr" />


                            <Tooltip className="tooltip_css" id="tooltip_id_12" />
                            <a data-tooltip-id="tooltip_id_12" data-tooltip-html="EMPLOYES">
                                {String(menu) !== "mes_employes" && <div className="sousmenu" onClick={DisplayeEmployeList}  > <GiTeacher className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "mes_employes" && <div className="sousmenu_selected" onClick={DisplayeEmployeList}  ><GiTeacher className="icone_menu" /> &nbsp;</div>}
                            </a>
                            <hr className="my_hr" />

                            {String(formation_initiale) === "1" && <>
                                <Tooltip className="tooltip_css" id="tooltip_id_121" />
                                <a data-tooltip-id="tooltip_id_121" data-tooltip-html="AUTRE RH">
                                    {String(menu) !== "autre_rh" && <div className="sousmenu" onClick={Display_Autre_RH_List}  > <GiTeacher className="icone_menu" />&nbsp; </div>}
                                    {String(menu) === "autre_rh" && <div className="sousmenu_selected" onClick={Display_Autre_RH_List}  ><GiTeacher className="icone_menu" /> &nbsp;</div>}
                                </a>
                                <hr className="my_hr" />

                            </>}

                            <Tooltip className="tooltip_css" id="tooltip_id_13" />
                            <a data-tooltip-id="tooltip_id_13" data-tooltip-html=" MON MATERIEL">
                                {String(menu) !== "mon_materiel" && <div className="sousmenu" onClick={DisplayeMaterielList}  > <BsTools className="icone_menu" />&nbsp; </div>}
                                {String(menu) === "mon_materiel" && <div className="sousmenu_selected" onClick={DisplayeMaterielList}  ><BsTools className="icone_menu" />&nbsp; </div>}
                            </a>
                            <hr className="my_hr" />


                            <Tooltip className="tooltip_css" id="tooltip_id_14" />
                            <a data-tooltip-id="tooltip_id_14" data-tooltip-html="STATISTIQUES">
                                {String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplayStat}> <FcBullish className="icone_menu" />&nbsp;</div>}
                                {String(menu) === "statistique" && <div className="sousmenu_selected" onClick={DisplayStat}> <FcBullish className="icone_menu" />&nbsp;</div>}
                            </a>
                            <hr className="my_hr" />


                            <div>  <hr /> </div>

                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_15" />
                                <a data-tooltip-id="tooltip_id_15" data-tooltip-html="CLIENTS">
                                    {String(menu) !== "mes_clients" && <div className="sousmenu" onClick={mes_clients_func}><FcBusinesswoman className="icone_menu" />&nbsp;</div>}
                                    {String(menu) === "mes_clients" && <div className="sousmenu_selected" onClick={mes_clients_func}> <FcBusinesswoman className="icone_menu" />&nbsp;</div>}
                                </a>
                            </div>

                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_16aa" />
                                <a data-tooltip-id="tooltip_id_16aa" data-tooltip-html="EQUIPEz">

                                    {String(menu) !== "equipe_team" && <Menu className="sousmenu" onClick={equipe_team_func} > <Diversity3Icon className="icone_menu" style={{ color: '#dbff75' }} /> &nbsp; </Menu>}
                                    {String(menu) === "equipe_team" && <Menu className="sousmenu_selected" onClick={equipe_team_func} > <Diversity3Icon className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;  </Menu>}


                                </a>
                            </div>


                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_16a" />
                                <a data-tooltip-id="tooltip_id_16a" data-tooltip-html="OPPORTUNITES">
                                    {String(menu) !== "mes_opportunites" && <div className="sousmenu" onClick={Display_mes_opportunites_func}><MdAddShoppingCart className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                    {String(menu) === "mes_opportunites" && <div className="sousmenu_selected" onClick={Display_mes_opportunites_func}> <MdAddShoppingCart className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                </a>
                            </div>

                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_16" />
                                <a data-tooltip-id="tooltip_id_16" data-tooltip-html=" PRIX CLIENT">
                                    {String(menu) !== "pricing" && <div className="sousmenu" onClick={pricing_func} ><FcCurrencyExchange className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                    {String(menu) === "pricing" && <div className="sousmenu_selected" onClick={pricing_func} > <FcCurrencyExchange className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                </a>
                            </div>

                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_17" />
                                <a data-tooltip-id="tooltip_id_17" data-tooltip-html="COMMANDES & DEVIS">
                                    {String(menu) !== "mes_cmd" && <div className="sousmenu" onClick={mes_cmd_func}><FcCollect className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                    {String(menu) === "mes_cmd" && <div className="sousmenu_selected" onClick={mes_cmd_func}>  <FcCollect className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                </a>
                            </div>

                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_18" />
                                <a data-tooltip-id="tooltip_id_18" data-tooltip-html="FACTURES & AVOIRS">
                                    {String(menu) !== "factures_client" && <div className="sousmenu" onClick={mes_factures_client_func}><FcKindle className="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                    {String(menu) === "factures_client" && <div className="sousmenu_selected" onClick={mes_factures_client_func}>  <FcCollect FcKindle="icone_menu" style={{ color: '#dbff75' }} />&nbsp;</div>}
                                </a>
                            </div>

                            <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_19" />
                                <a data-tooltip-id="tooltip_id_19" data-tooltip-html="PRIX ACHAT">
                                    {String(menu) !== "prix_achat" && <div className="sousmenu" onClick={prix_achat_func}><BiPurchaseTag className="icone_menu" />&nbsp;</div>}
                                    {String(menu) === "prix_achat" && <div className="sousmenu_selected" onClick={prix_achat_func}> <BiPurchaseTag FcKindle="icone_menu" />&nbsp;</div>}
                                </a>
                            </div>


                            <div>  <hr /> </div>


                            {String(has_partner_lms_url) === "1" && <div className="sousmenu" onClick={(e) => {
                                e.preventDefault();
                                window.open(
                                    partner_lms_url,
                                    '_blank'
                                );
                            }}>
                                <Tooltip className="tooltip_css" id="tooltip_id_2" />
                                <a data-tooltip-id="tooltip_id_2" data-tooltip-html="HEBERGEMENT E-LEARNING">
                                    <FcVideoCall className="icone_menu" />
                                </a>
                            </div>}

                            {String(has_partner_lms_url) === "1" && <div>
                                <hr className="my_hr" />
                                <Tooltip className="tooltip_css" id="tooltip_id_20" />
                                <a data-tooltip-id="tooltip_id_20" data-tooltip-html="CONFIGURATION E-LEARNING">
                                    {String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplaySetUpLMS}><FcServices className="icone_menu" />&nbsp;</div>}
                                    {String(menu) === "statistique" && <div className="sousmenu_hebergement_lms" onClick={DisplaySetUpLMS}>  <FcServices className="icone_menu" />&nbsp;</div>}

                                </a>
                            </div>}



                        </div>
                    </div>
                }

                {/* div_droite div_droite_ralonge */}
                {
                    left_menu === false && <div>

                        {String(firstConnexion) === "1" && String(part_is_partner_admin_account) === "1" &&
                            <div className="div_droite firstConnexion">
                                <div className="firstConnexion_text">
                                    <b>Bienvenue chez MySy, cher partenaire ! </b> <br /> &nbsp;<br />
                                    C'est votre première connexion, et toute l'équipe est ravie de vous accueillir dans l'aventure.<br />
                                    Pour commencer à publier vos formations et profiter pleinement de notre plateforme, il vous suffit de choisir une formule d'abonnement en cliquant  <Button onClick={ValideFirstConnexion} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; &nbsp; ici</Button><br />
                                    &nbsp; <br /> Et merci de faire partie du voyage !
                                </div>

                            </div>}

                        {String(firstConnexion) === "1" && String(part_is_partner_admin_account) !== "1" &&
                            <div className="div_droite firstConnexion">
                                <div className="firstConnexion_text">
                                    <b>Bienvenue chez MySy, cher Utilisateur </b> <br /> &nbsp;<br />
                                    C'est votre première connexion, et toute l'équipe est ravie de vous accueillir dans l'aventure.<br />
                                    Nous vous invitons à modifier votre mot de passe à partir du menu <i>"MES INFORMATIONS"</i> ==&gt; Bouton <i>"SECURITE"</i>  <br /><br />
                                    <Button onClick={(e) => setfirstConnexion()} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; Fermer</Button><br />
                                    &nbsp; <br /> Merci.
                                </div>

                            </div>}


                        {String(myApiResponse) === String("false") && <div className="div_droite div_droite_ralonge">
                            <div className="koUpdateData"> Impossible de contacter  l'hote distant. Merci de contacter votre administrateur  </div>
                        </div>

                        }

                        {String(menu) === "affichage" &&
                            <div className="div_droite div_droite_ralonge">

                                <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right}
                                    partner_lms_virtualhost_url={partner_lms_virtualhost_url} />
                            </div>
                        }

                        {String(menu) === "mes_ue" &&
                            <div className="div_droite div_droite_ralonge">
                                <DisplayPartnerUnite_Enseignement ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale} />
                            </div>
                        }


                        {String(menu) === "domaine_categorie_metier" &&
                            <div className="div_droite div_droite_ralonge">
                                <Partner_Domaine_Categorie_Metier ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale} />
                            </div>
                        }

                        {String(menu) === "part_produit_service" &&
                            <div className="div_droite div_droite_ralonge">
                                <Partner_Product_Service ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale} />
                            </div>
                        }



                        {String(menu) === "config_formation_initiale" &&
                            <div className="div_droite div_droite_ralonge">

                                <Partner_Config_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "admission_process" &&
                            <div className="div_droite div_droite_ralonge">

                                <Partner_Admission_Process_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService}
                                    conntected_employee_id={conntected_employee_id}
                                    object_key={orderid}
                                    submenu={packs}
                                    formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "administration_pedagogique" &&
                            <div className="div_droite div_droite_ralonge">

                                <Admission_Pedagogique_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    object_key={orderid}
                                    submenu={packs}
                                    formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "competence_pedagogique" &&
                            <div className="div_droite div_droite_ralonge">

                                <Config_Competence_Pedagogique_Ftion_Initiale ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    object_key={orderid}
                                    submenu={packs}
                                    formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }



                        {String(menu) === "note_evaluation" &&
                            <div className="div_droite div_droite_ralonge">

                                <Notes_Evaluation ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "jurys" && String(formation_initiale) === "1" &&
                            <div className="div_droite div_droite_ralonge">

                                <Jury ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid}
                                    class_internal_url={packs}
                                    formation_initiale={formation_initiale}
                                    read_access={check_user_acces_right("jury", "read")}
                                    write_access={check_user_acces_right("jury", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "internal_email" &&
                            <div className="div_droite div_droite_ralonge">

                                <Module_Internal_Email_Management ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid}
                                    class_internal_url={packs}
                                    formation_initiale={formation_initiale}
                                    conntected_account_id={conntected_account_id}
                                    Get_Nb_Unread_Emails={Get_Nb_Unread_Emails}

                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "tous_mes_document" &&
                            <div className="div_droite div_droite_ralonge">
                                <Modules_Mes_Documents ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right}

                                    partner_client_id={""}
                                    partner_owner_recid={conntected_account_partner_owner_recid}
                                    type_user_connected={"partner_account"}
                                    my_title={"Gestion Documentaire"}
                                    all_ged={"1"}
                                />
                            </div>
                        }


                        {String(menu) === "conseil_classe" && String(formation_initiale) === "1" &&
                            <div className="div_droite div_droite_ralonge">

                                <Conseil_Classe ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid}
                                    class_internal_url={packs}
                                    formation_initiale={formation_initiale}
                                    read_access={check_user_acces_right("jury", "read")}
                                    write_access={check_user_acces_right("jury", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "groupe_apprenant" &&
                            <div className="div_droite div_droite_ralonge">

                                <Groupe_Apprenant ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "admission_session" &&
                            <div className="div_droite div_droite_ralonge">

                                <Session_Admission_FI ispending={partnerstatus} currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                    class_external_code={orderid} class_internal_url={packs} formation_initiale={formation_initiale}
                                    check_user_acces_right={check_user_acces_right} reduce={"1"} />
                            </div>
                        }


                        {String(menu) === "checkout" && <div className="div_droite div_droite_ralonge">
                            <Button onClick={"returntoorder"} className="btn_retour_ps"> Retour aux produits & Services </Button>
                            <CheckOut packs={location.state.new_pack} periodicity={location.state.period} mypackprice={location.state.price} />
                        </div>

                        }

                        {String(menu) === "creation" &&
                            <div className="div_droite div_droite_ralonge">


                                <div className="parter_div_droite_haut">
                                    {String(apiexcelimportmessage) === String("true") &&
                                        <div className="parter_div_filtrer_row okUpdateData">
                                            {excelimportmessage}<br />&nbsp;<br />

                                        </div>

                                    }
                                    {String(apiexcelimportmessage) === String("false") &&
                                        <div className="parter_div_filtrer_row koUpdateData">
                                            Impossible de traiter le fichier <br />
                                            <u> <b> {excelimportmessage} </b></u>
                                            <br />&nbsp;<br />
                                        </div>

                                    }

                                    {String(apiexcelimportmessage) === String("-1") &&
                                        <div className="parter_div_filtrer_row koUpdateData">
                                            Impossible de traiter le fichier <br />&nbsp;<br />
                                        </div>

                                    }


                                    <div className="parter_div_filtrer_row">
                                        <div>


                                            {String(partnerstatus) === String("0") && <div className="parter_div_filtrer_row_gauche">

                                                <Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu" style={{
                                                    "background": "#c8cfd5",
                                                    "minWidth": "15rem", "color": "black", "width": "auto",

                                                }}
                                                    id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer des formations &nbsp; <SendIcon />
                                                </Button><br />
                                                {formation_file_name && <nav className="okUpdateData"><i>{formation_file_name}</i></nav>}
                                                <input type="file"
                                                    accept=".csv"
                                                    ref={hiddenFileInput_formation}
                                                    style={{ display: 'none' }}
                                                    name="liste_formation_file"
                                                    onChange={handleSubmission}
                                                />



                                                <a href='/sample/template_import_formations.csv' download>Télécharger un fichier modèle</a>

                                                <br />

                                                {/* <input type="file" name="file" accept=".csv" onChange={changeHandler} /> <br /> */}
                                                <br />&nbsp;
                                                <div className="import_excel_text">

                                                    <nav className="titre1">  Comment utiliser le fichier ? </nav>
                                                    <nav style={{ "color": "orange" }}>
                                                        Dans le fichier à importer, seules les colonnes suivantes sont obligatoires :
                                                        <ul>
                                                            <li>external_code : C'est le code de la formation chez vous, editeur de la formation </li>
                                                            <li> titre : Le titre de la formation </li>
                                                            <li> domaine : Le domaine au quel est rattaché la formation</li>
                                                            <li> description : La descriptin de la formation</li>
                                                        </ul>
                                                    </nav>
                                                    Pour le reste, <br />
                                                    <ul>
                                                        <li> Il s'agit d'un fichier csv. Les colonnes sont separées par des ";"</li>
                                                        <li> A l'interieur d'une même colonne, les informations sont separées par des ";"     </li>
                                                        <li> Champ 'Metier' :  les valeurs acceptées sont : IT, RH, vente, dev_perso, Graphisme, Management, Digital, Office, Autre</li>
                                                        <li> ...</li>
                                                    </ul>
                                                    <a href='/sample/MySy_Import_formation_csv.pdf' download>Télécharger le guide complet pour plus d'informations</a><br />
                                                </div>
                                                <div style={{ "width": "50%" }}> &nbsp; </div>





                                            </div>}

                                            {String(partnerstatus) !== String("0") && <div className="parter_div_filtrer_row_gauche">


                                                Import excel d'une formation <a href='/sample/template_import_formations.csv' download>Télécharger un fichier modèle</a>

                                                <br />

                                                <input type="file" name="file" onChange={""} accept=".csv" />


                                                <br />
                                                <div align="right">
                                                    <Button onClick={alertactivecompte} variant="contained" endIcon={<SendIcon />}> Importer </Button>
                                                </div>

                                            </div>}
                                        </div>

                                        <br />

                                    </div>
                                </div>
                                <div className="parter_div_droite_bas">
                                    <div className="titre1_bis"> Création manuelle d'une formation </div>

                                    <TrainingForm mytrainingclass={{ 'ref': '', 'dist': 'Oui', 'plus_produit': '0' }} ispending={partnerstatus}
                                        currentpack={String(partnerPackService).toUpperCase()} check_user_acces_right={check_user_acces_right} />
                                </div>

                            </div>
                        }


                        {String(menu) === "infopartner" &&
                            <div className="div_droite div_droite_ralonge">

                                <PartnerInfo_v2 check_user_acces_right={check_user_acces_right} />

                            </div>
                        }

                        {String(menu) === "statistique" &&
                            <div className="div_droite div_droite_ralonge">
                                <PartenairStat />
                            </div>
                        }

                        {String(menu) === "setuplms" &&
                            <div className="div_droite div_droite_ralonge">
                                <HebergementLms conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("lms", "read")}
                                    write_access={check_user_acces_right("lms", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "mes_sessions" &&
                            <div className="div_droite div_droite_ralonge">

                                <DisplayPartnerSession
                                    conntected_account_id={conntected_account_id}
                                    formation_initiale={formation_initiale}
                                    conntected_employee_id={conntected_employee_id} object_key={orderid} class_internal_url={packs}
                                    read_access={check_user_acces_right("session", "read")} write_access={check_user_acces_right("session", "write")}
                                    check_user_acces_right={check_user_acces_right} reduce={"1"} />
                            </div>
                        }

                        {String(menu) === "mes_sessions" &&
                            <div className="div_droite div_droite_ralonge">

                                <DisplayPartnerPromotion
                                    conntected_account_id={conntected_account_id}
                                    formation_initiale={formation_initiale}
                                    conntected_employee_id={conntected_employee_id} object_key={orderid} class_internal_url={packs}
                                    read_access={check_user_acces_right("session", "read")} write_access={check_user_acces_right("session", "write")}
                                    check_user_acces_right={check_user_acces_right} reduce={"1"} />
                            </div>
                        }


                        {String(menu) === "mes_employes" &&
                            <div className="div_droite div_droite_ralonge">
                                <Employes conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("employe", "read")}
                                    write_access={check_user_acces_right("employe", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "autre_rh" &&
                            <div className="div_droite div_droite_ralonge">
                                <Autre_RH conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("employe", "read")}
                                    write_access={check_user_acces_right("employe", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "factures_client" &&
                            <div className="div_droite div_droite_ralonge">
                                <Factures_Client conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("facture_client", "read")}
                                    write_access={check_user_acces_right("facture_client", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "prix_achat" &&
                            <div className="div_droite div_droite_ralonge">
                                <Partner_Prix_Achat conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("prix_achat", "read")} write_access={check_user_acces_right("prix_achat", "write")} />
                            </div>
                        }


                        {String(menu) === "mon_materiel" &&
                            <div className="div_droite div_droite_ralonge">
                                <Materiels conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }


                        {String(menu) === "mes_salles" &&
                            <div className="div_droite div_droite_ralonge">
                                <Materiel_Salle conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right} />
                            </div>
                        }

                        {String(menu) === "mes_opportunites" &&
                            <div className="div_droite div_droite_ralonge">
                                <CRM_Opportunite conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("materiel", "read")}
                                    write_access={check_user_acces_right("materiel", "write")}
                                    check_user_acces_right={check_user_acces_right}
                                />
                            </div>
                        }

                        {String(menu) === "equipe_team" &&
                            <div className="div_droite div_droite_ralonge">
                                <Equipe_Team conntected_employee_id={conntected_employee_id}
                                    read_access={check_user_acces_right("equipe", "read")}
                                    write_access={check_user_acces_right("equipe", "write")}
                                    check_user_acces_right={check_user_acces_right}
                                />
                            </div>
                        }


                        {String(menu) === "mes_cmd" &&
                            <div className="div_droite div_droite_ralonge">
                                <Partner_Commande conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("commande", "read")}
                                    write_access={check_user_acces_right("commande", "write")}
                                    check_user_acces_right={check_user_acces_right}
                                />
                            </div>
                        }


                        {String(menu) === "facture" && <div className="div_droite div_droite_ralonge">

                            <Facture currentpack={partnerPackService} conntected_employee_id={conntected_employee_id}
                                read_access={check_user_acces_right("compte_partner", "read")} write_access={check_user_acces_right("compte_partner", "write")}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }

                        {String(menu) === "pricing" && <div className="div_droite div_droite_ralonge">

                            <Pricing conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("prix", "read")} write_access={check_user_acces_right("prix", "write")} />
                        </div>
                        }

                        {String(menu) === "mes_apprenants" && <div className="div_droite div_droite_ralonge">

                            <Apprenant conntected_employee_id={conntected_employee_id} object_key={orderid} subdata={packs}
                                read_access={check_user_acces_right("stagiaire", "read")} write_access={check_user_acces_right("stagiaire", "write")}
                                check_user_acces_right={check_user_acces_right}
                                formation_initiale={formation_initiale} />
                        </div>
                        }

                        {String(menu) === "mes_stagiaires" && <div className="div_droite div_droite_ralonge">

                            <DisplayPartnerStagiaires conntected_employee_id={conntected_employee_id} object_key={orderid} subdata={packs}
                                read_access={check_user_acces_right("stagiaire", "read")} write_access={check_user_acces_right("stagiaire", "write")}
                                formation_initiale={formation_initiale} check_user_acces_right={check_user_acces_right} />
                        </div>
                        }


                        {String(menu) === "abonnement" && <div className="div_droite div_droite_ralonge">

                            <Abonnement currentpack={partnerPackService} conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("abonnement", "read")} write_access={check_user_acces_right("abonnement", "write")} />
                        </div>
                        }

                        {String(menu) === "ordervalide" && orderid && packs && <div className="div_droite div_droite_ralonge">
                            <OrderConfirmation num_cmd={orderid} packs={String(packs).toLocaleUpperCase()} />
                        </div>
                        }

                        {String(menu) === "mes_clients" && <div className="div_droite div_droite_ralonge">

                            <Partner_Client conntected_employee_id={conntected_employee_id} object_key={orderid}
                                read_access={check_user_acces_right("client", "read")} write_access={check_user_acces_right("client", "write")}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }



                        {String(menu) === "config_document" && <div className="div_droite div_droite_ralonge">

                            <Config_Documents conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }

                        {String(menu) === "config_technique" && <div className="div_droite div_droite_ralonge">

                            <Configuration_Technique conntected_employee_id={conntected_employee_id}
                                read_access={check_user_acces_right("config_document", "read")}
                                write_access={check_user_acces_right("config_document", "write")}
                                reduce={"1"} />
                        </div>
                        }


                        {String(menu) === "config_session_steps" && <div className="div_droite div_droite_ralonge">

                            <Partner_Configuration_Session_Steps conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }



                        {String(menu) === "config_jours_heures" && <div className="div_droite div_droite_ralonge">

                            <Partner_Configuration_Jours_Travail conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }


                        {String(menu) === "config_formulaires" && <div className="div_droite div_droite_ralonge">

                            <Partner_Config_Formulaires conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />

                        </div>
                        }


                        {String(menu) === "config_champ_specific" && <div className="div_droite div_droite_ralonge">

                            <Config_Champs_Personnalise conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("config_document", "read")} write_access={check_user_acces_right("config_document", "write")} />
                        </div>
                        }


                        {String(menu) === "module_agenda" && <div className="div_droite div_droite_ralonge">

                            <Module_Agenda conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("module_agenda", "read")}
                                write_access={check_user_acces_right("module_agenda", "write")}
                                check_user_acces_right={check_user_acces_right} />
                        </div>
                        }


                        {String(menu) === "dashbord_session" && <div className="div_droite div_droite_ralonge">

                            <Dashbord_Session conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }

                        {String(menu) === "dashbord_formation" && <div className="div_droite div_droite_ralonge">

                            <Dashbord_Formation conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }

                        {String(menu) === "dashbord_ressources_humaines" && <div className="div_droite div_droite_ralonge">

                            <Dashbord_Ressources_Humaines conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />
                        </div>
                        }


                        {String(menu) === "mon_tableau_de_bord" && <div className="div_droite div_droite_ralonge">
                            <Mon_Tableau_De_Bord conntected_employee_id={conntected_employee_id} read_access={check_user_acces_right("dashbord", "read")} write_access={check_user_acces_right("dashbord", "write")} />

                        </div>
                        }

                        {String(menu) === "monactivite" && <div className="div_droite div_droite_ralonge">
                            <PartnerClientActivite conntected_employee_id={conntected_employee_id} check_user_acces_right={check_user_acces_right}
                                email={conntected_employee_email} related_collection={"partnair_account"} update_nb_activite_en_retard={update_nb_activite_en_retard}
                                update_nb_activite_en_new={update_nb_activite_en_new} />
                        </div>
                        }



                    </div>
                }
            </div >

            <style>{local_css}</style>

        </div >


    )
}


export default Partner;


const local_css = `
:root {
  --sidebar-bg: #0d5a4b;
  --sidebar-bg-2: #0b4d40;
  --card-bg: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.08);
  --item-hover: rgba(255, 255, 255, 0.06);
  --item-active: rgba(216, 243, 234, 0.14);
  --item-active-border: rgba(216, 243, 234, 0.38);
  --text-primary: #f7fbf9;
  --text-secondary: rgba(247, 251, 249, 0.72);
  --text-muted: rgba(247, 251, 249, 0.56);
  --badge-bg: #7c3aed;
  --badge-text: #ffffff;
  --divider: rgba(255, 255, 255, 0.09);
  --shadow-lg: 0 20px 40px rgba(4, 25, 20, 0.28);
  --shadow-md: 0 8px 20px rgba(4, 25, 20, 0.18);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --sidebar-width: 340px;
  --transition: 160ms ease;
}

* {
  box-sizing: border-box;
}

.section_bloc_titre {
  height: 2rem;
  margin-left: -20px;
  margin-top: -30px;
  width: 100%;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  background: #0b4f42;
  padding-top: 5px;
}

.sidebar-premium {
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--text-primary);
  padding: 10px;
  position: sticky;
  top: 0;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - 36px);
}

.sidebar-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow: var(--shadow-md);
}

.brand-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-meta strong {
  font-size: 0.98rem;
}

.brand-meta span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sidebar-search {
  min-height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.sidebar-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
}

.sidebar-search input::placeholder {
  color: var(--text-muted);
}

.profile-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}

.profile-top {
width: 100%;
  text-align: center;
}

.profile-avatar {
 @media only screen and (max-width: 991px) {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
  }

  @media only screen and (min-width: 992px) {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
  }

}




.profile-meta h2 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.profile-meta p {
  margin: 6px 0 14px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.profile-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition),
    border-color var(--transition);
}

.profile-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.profile-extra {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
   align-items: center;
  justify-content: center;
}

.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.profile-pill-notif {
  background: rgba(124, 58, 237, 0.16);
  color: #efe8ff;
}

.sidebar-nav {
  background: rgba(0, 0, 0, 0.08);
 
  border-radius: 24px;
  padding: 10px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  flex: 1;
}

.nav-section {
  padding: 10px 6px 14px;
  margin-bottom: 1rem;
}

.nav-section+.nav-section {
  border-top: 1px solid var(--divider);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  padding: 4px 8px 10px;
}

.section-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: -12px;
}

.menu-item-wrap {
  display: flex;
  flex-direction: column;
}

.menu-item {
  width: 100%;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.menu-item:hover {
  background: var(--item-hover);
}

.menu-item.is-active {
  background: var(--item-active);
  border: 1px solid var(--item-active-border);
  box-shadow: inset 3px 0 0 rgba(216, 243, 234, 0.95);
}

.menu-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.menu-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 251, 249, 0.92);
}

.menu-label {
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

.menu-chevron {
  color: var(--text-muted);
}

.menu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}

.submenu {
  position: relative;
  margin: 4px 0 8px 42px;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.submenu::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 6px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.submenu-item {
  position: relative;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition), transform var(--transition);
}

.submenu-item:hover {
  color: var(--text-primary);
  transform: translateX(2px);
}

.submenu-line {
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-block;
}

.submenu-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.submenu-label {
  font-size: 0.93rem;
  font-weight: 500;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
}

.footer-link {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.footer-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.footer-link-danger:hover {
  color: #ffe4e6;
  background: rgba(244, 63, 94, 0.12);
}

@media (max-width: 1024px) {
  .sidebar-premium {
    width: 100%;
    min-height: auto;
    position: relative;
  }

  .sidebar-inner {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .profile-top {
    align-items: flex-start;
  }

  .profile-meta h2 {
    font-size: 1.35rem;
  }
}
`;