import React, { useState, useEffect, useCallback, useRef } from "react"; import axios from "axios"; import { Helmet } from "react-helmet"; import SideBar from "./sidebar"; import ReactPlayer from 'react-player' import { Slide } from 'react-slideshow-image'; import { Zoom } from 'react-slideshow-image'; import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; import 'react-slideshow-image/dist/styles.css' import bannerimg from "../mysy_img/MYSY_banner_compte.png"; import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; import { useParams } from 'react-router-dom' import Select, { StylesConfig } from 'react-select'; import IconButton from '@mui/material/IconButton'; import { Fade } from 'react-slideshow-image'; import { getCookie, setCookie } from 'react-use-cookie'; import Button from '@mui/material/Button'; import { FcAddColumn, FcApproval } from "react-icons/fc"; import { FaHandPointRight } from "react-icons/fa"; import Header from "./Header"; import { useLocation } from "react-router-dom"; import fileDownload from 'js-file-download' import { ReactSearchAutocomplete } from 'react-search-autocomplete' import { WorkRounded } from "@mui/icons-material"; import * as V from 'victory'; import { VictoryBar, VictoryLine, VictoryScatter, VictoryChart } from 'victory'; import Canvas from 'react-canvas-js' import { ResponsiveContainer, LineChart, Line, BarChart, Bar, CartesianGrid, XAxis, YAxis, Legend } from 'recharts'; import Chart from 'react-apexcharts' import 'react-date-range/dist/styles.css'; // main style file import 'react-date-range/dist/theme/default.css'; // theme css file import moment from "moment"; import { DateRange } from "react-date-range"; import "react-date-range/dist/styles.css"; import "react-date-range/dist/theme/default.css"; import { Editor } from '@tinymce/tinymce-react'; import { ImMobile2, ImWhatsapp, ImHome, ImOffice } from "react-icons/im"; import { BsMailbox } from "react-icons/bs"; import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; import { PaymentElement } from '@stripe/react-stripe-js'; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; import Formation from "./Formation"; import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif"; import Timeline from '@mui/lab/Timeline'; import TimelineItem from '@mui/lab/TimelineItem'; import TimelineSeparator from '@mui/lab/TimelineSeparator'; import TimelineConnector from '@mui/lab/TimelineConnector'; import TimelineContent from '@mui/lab/TimelineContent'; import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; import TimelineDot from '@mui/lab/TimelineDot'; import FastfoodIcon from '@mui/icons-material/Fastfood'; import LaptopMacIcon from '@mui/icons-material/LaptopMac'; import HotelIcon from '@mui/icons-material/Hotel'; import RepeatIcon from '@mui/icons-material/Repeat'; import Typography from '@mui/material/Typography'; import { Toolbar } from "@mui/material/Toolbar"; import { CardElement, useStripe, useElements, } from '@stripe/react-stripe-js'; import 'react-tooltip/dist/react-tooltip.css' import { Tooltip } from 'react-tooltip' import MUIDataTable from "mui-datatables"; import { createTheme, ThemeProvider } from '@mui/material/styles'; 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 TextField from '@mui/material/TextField'; import { DataGrid, GridRowsProp, GridColDef, GridToolbar, frFR } from '@mui/x-data-grid'; import { darken, lighten, styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import { makeStyles } from '@mui/styles'; // pour le payement stripe : https://stripe.com/docs/payments/quickstart?client=react&lang=python const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p'); const datagridSx = { borderRadius: 2, "& .MuiDataGrid-main": { borderRadius: 2 }, /*'& div[data-rowIndex][role="row"]:nth-of-type(5n-4)': { color: "blue", fontSize: 18, //risky minHeight: "60px !important", height: 60, "& div": { minHeight: "60px !important", height: 60, lineHeight: "59px !important" } },*/ "& .MuiDataGrid-virtualScrollerRenderZone": { "& .MuiDataGrid-row": { "&:nth-child(2n)": { backgroundColor: "rgba(235, 235, 235, .7)" } } }, "& .MuiDataGrid-columnHeaders": { backgroundColor: "rgba(0,0,255,0.6)", color: "rgba(255,0,0,0.7)", fontSize: 16 } }; const handleCellClick = (param, event) => { console.log(param); console.log(event); if (param.colIndex === 2) { event.stopPropagation(); } }; const handleRowClick = (param, event) => { console.log("Row:"); console.log(param); console.log(event); }; const columns21 = [ { field: "id", headerName: "ID", width: 70 }, { field: "firstName", headerName: "First Name", width: 130, renderCell: (cellValues) => { return (
{cellValues.value}
); } }, { field: "lastName", headerName: "Last Name", width: 130 }, { field: "age", headerName: "Age", headerAlign: "left", type: "number", //width: 90, minWidth: 90, flex: 1, align: "left" }, { field: "fullName", headerName: "Full name", description: "This column has a value getter and is not sortable.", sortable: false, minWidth: 160, flex: 2, //width: 160, valueGetter: (params) => { return `${params.getValue(params.id, "firstName") || ""} ${params.getValue(params.id, "lastName") || "" }`; } } ]; const rows21 = [ { id: 1, lastName: "Snow", firstName: "Jon", age: 35 }, { id: 2, lastName: "Lannister", firstName: "Amy", age: 42 }, { id: 3, lastName: "IGOTAREALLyLONGNAME!!!!!!!", firstName: "Jaime", age: 45 }, { id: 4, lastName: "Stark", firstName: "Arya", age: 16 }, { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: 12 }, { id: 6, lastName: "Melisandre", firstName: "Jane", age: 15 }, { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 }, { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 }, { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 } ]; const TestUrl = (props) => { const stripe = useStripe(); const elements = useElements(); const [message, setMessage] = useState(null); const options = { // passing the client secret obtained from the server clientSecret: '{{CLIENT_SECRET}}', }; const [interpolation, setinterpolation] = useState("linear"); const [polar, setpolar] = useState(false); const [suggestedwords, setsuggestedwords] = useState([]); const [texte, settext] = useState(""); const [phoneNumber, setphoneNumber] = useState("") const { classId } = useParams(); const [pokemon, setPokemon] = useState(); const location = useLocation(); useEffect(() => { }, []); const [suggestion2, setsuggestion2] = useState([]); const [data_global, setdata_global] = useState([]); const stored_part = getCookie('tokenmysypart'); /* Cette fonction recuperer les stats des TOP 5 formations sur la periode saisie par l'utilisateur */ const [detail_view_categories, setdetail_view_categories] = useState(); const detail_series = detail_view_categories; const [my_tabb, setmy_tabb] = useState([]); const [topX_formation, settopX_formation] = useState([]); const [detail_view_categorie, setdetail_view_categorie] = useState([]); const [detail_view_data1, setdetail_view_data1] = useState([]); const [detail_view_data1_name, setdetail_view_data1_name] = useState([]); const [detail_view_data2, setdetail_view_data2] = useState([]); const [detail_view_data2_name, setdetail_view_data2_name] = useState([]); const [detail_view_data3, setdetail_view_data3] = useState([]); const [detail_view_data3_name, setdetail_view_data3_name] = useState([]); const [detail_view_data4, setdetail_view_data4] = useState([]); const [detail_view_data4_name, setdetail_view_data4_name] = useState([]); var series_detail = [ { name: detail_view_data1_name, data: detail_view_data1 }, { name: detail_view_data2_name, data: detail_view_data2 }, { name: detail_view_data3_name, data: detail_view_data3 }, { name: detail_view_data4_name, data: detail_view_data4 }, ] const options_detail = { chart: { id: 'apexchart-example' }, xaxis: { categories: detail_view_categorie //['2022-09-12', '2022-09-11', '2022-09-10', '2022-09-09', '2022-09-08', '2022-09-07', '2022-09-06'] }, colors: ['#CB4335', '#1A5276', '#28B463', '#6E2C00', '#1B2631'] } // categories = aux dates // const [global_view_categories, setglobal_view_categories] = useState([]); const options_global_view = { chart: { id: 'apexchart-example' }, xaxis: { categories: global_view_categories }, colors: ['#17A8F5', '#A93226'] } const [global_view_data, setglobal_view_data] = useState([]); const [global_view_data_v2, setglobal_view_data_v2] = useState([]); const series_Gobal = [ { name: 'global_view', data: global_view_data }, ] // -- Detail series const selectionRange = { startDate: new Date(), endDate: new Date(), key: 'selection', } const today = new Date(); const tomorrow = new Date(today); const [state, setState] = useState([ { startDate: today.setDate(tomorrow.getDate() - 8), endDate: today.setDate(tomorrow.getDate() - 1), key: "selection" } ]); const editorRef = useRef(null); const log = () => { if (editorRef.current) { //console.log(editorRef.current.getContent()); alert(editorRef.current.getContent()); } setgrr(" vvvv "); }; const [grr, setgrr] = useState(" icic "); function DataUpdated() { alert(" change "); } function toto() { alert(" TOTO "); } const [price_ch, setprice_ch] = useState("price_1LpyndAbmaEugrFTKZAAkm72"); const [customer_ch, setcustomer_ch] = useState("cus_MZjO0MIKiy2t6l"); const [subscriptionData, setSubscriptionData] = useState(null); const [payement_id, setpayement_id] = useState(); const [clientSecret_id, setclientSecret_id] = useState(); const [paymentIntent, setPaymentIntent] = useState(); function initpayement_front() { alert("debut initpayement_front price_ch = " + price_ch); createSubscription(price_ch); //console.log("55"); } const createSubscription = async (priceId) => { var myurl = process.env.REACT_APP_API_URL + "myclass/api/create-subscription/"; var form = new FormData(); form.append("customerid", "cus_MZjO0MIKiy2t6l"); form.append("priceid", price_ch); fetch(myurl, { method: 'POST', body: form, }).then((data) => data.json()) .then((data) => { //console.log(' #### subscription_id:', data['subscription_id'], 'payment_intent_client_secret:', data['payment_intent_client_secret'], "data['Status'] = ", data['status'], ); if (String(data['status']) === String("true")) { //console.log(" subscriptionId = " + subscriptionId + " -- et clientSecret = " + clientSecret); //console.log("1"); setclientSecret_id(data['payment_intent_client_secret']); //console.log("2"); setpayement_id(data['subscription_id']); //console.log("3"); //setSubscriptionData(data['subscription_id'], data['payment_intent_client_secret'] ); //alert(" subscriptionId = " + data['subscription_id'] + " -- et clientSecret = " + data['payment_intent_client_secret']); } //console.log("44"); }).catch((error) => { alert("4"); //console.log('Error:', error.message); }); }; function finalize_abonnement() { alert("Finalization de l'abonnement "); // Initialize an instance of stripe. const handleSubmit_ch = async (e) => { // Get a reference to a mounted CardElement. Elements knows how // to find your CardElement because there can only ever be one of // each type of element. const cardElement = elements.getElement(CardElement); // Use card Element to tokenize payment details alert(' clientSecret_id = ' + clientSecret_id) let { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret_id, { payment_method: { card: cardElement, billing_details: { name: "cherif test MYSY", } } }); if (error) { // show error and collect new card details. alert(error.message); //console.log(error.message); return; } else { alert(" OKK paymentIntent = " + paymentIntent); //console.log(paymentIntent); } setPaymentIntent(paymentIntent); } handleSubmit_ch(); } const [cherif3DS, setcherif3DS] = useState("ok"); window.top.postMessage('3DS-authentication-complete'); function fermer() { window.close(); } function finaliser() { window.open( "/", '_self' ); } const [isLoading, setLoading] = useState(); function loading() { setLoading(true); setTimeout(() => { // simulate a delay axios.get("https://pokeapi.co/api/v2/pokemon/1") .then((response) => { // Get pokemon data setPokemon(response.data); //set pokemon state setLoading(false); //set loading state }); }, 500000); } const columns = ["Name", "Company", "City", "State"]; const data11 = [ ["Joe James", "Test Corp", "Yonkers", "NY"], ["John Walsh", "Test Corp", "Hartford", "CT"], ["Bob Herm", "Test Corp", "Tampa", "FL"], ["James Houston", "Test Corp", "Dallas", "TX"], ]; function hellofoo() { alert(" hellooooooooo"); } const options11 = { filterType: 'checkbox', selectableRows: 'single', selectableRowsOnClick: true, customToolbar: () => { return ( ); }, selectedRows: { text: "ligne(s) selectionée(s)", delete: "Supprimer", deleteAria: "Delete Selected Rows", }, toolbar: { search: "Recherche", downloadCsv: "Download CSV", print: "Imprimer", viewColumns: "Voir Columns", filterTable: "Filtrer Table", }, pagination: { next: "Prochaine Page", previous: "Page Precedente", rowsPerPage: "ligne par page:", displayRows: "of", }, }; const getMuiTheme = () => createTheme({ components: { MuiTableCell: { styleOverrides: { root: { padding: '8px', //backgroundColor: '#CDCAC6', } } }, MUIDataTableToolbar: { actions: { display: 'flex', flexDirection: 'row', flex: 'initial', }, }, MuiToolbar: { styleOverrides: { regular: { minHeight: '8px', } } }, MuiTableRow: { root: { "&.MuiTableRow-hover": { "&:hover": { backgroundColor: "yellow", } } } } } }); const [open, setOpen] = React.useState(false); const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { alert(" Utiliser le bouton 'fermer' "); //setOpen(false); }; const handleClose_buton = () => { setOpen(false); }; const rowss = [ { id: 1, col1: 'Hello', col2: 'World', col3: '12', col4: true }, { id: 2, col1: 'DataGridPro', col2: 'is Awesome', col3: '12', col4: true }, { id: 3, col1: 'MUI', col2: 'is Amazing', col3: '123', col4: false }, { id: 4, col1: 'MUI2', col2: 'is Amazing2', col3: '02', col4: true }, { id: 5, col1: 'DataGridPro 5', col2: 'is Awesome 5', col3: '17', col4: false }, ]; const columnss = [ { field: 'col1', headerName: 'Column 1', width: 150 }, { field: 'col2', headerName: 'Column 2', width: 150 }, { field: 'col3', headerName: 'montant', width: 150 }, { field: 'col4', headerName: 'statut', width: 150 }, ]; const columnsz = [ { field: 'city' }, { field: 'oct', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, { field: 'nov', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, { field: 'dec', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, { field: 'dec', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, { field: 'status', headerName: 'statut', width: 150, type: 'boolean', editable: true, }, { field: 'stape', headerName: 'étape', width: 150, type: 'string', editable: true, }, ]; const rowsz = [ { id: 1, city: 'Amsterdam', oct: 7.1, nov: 4, dec: 10.2, status: false, stape: 'planifie' }, { id: 2, city: 'Barcelona', oct: 14.9, nov: 12.3, dec: 18.2, status: true, stape: 'facturé' }, { id: 3, city: 'Paris', oct: 8.1, nov: 5.4, dec: 12.3, status: false, stape: 'encours' }, { id: 4, city: 'São Paulo', oct: 20.2, nov: 21.1, dec: 19.2, status: true, stape: 'planifie' }, ]; const useStyles = makeStyles((theme) => ({ root: { '& .MuiDataGrid-row:nth-child(odd)': { backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary[300] : theme.palette.secondary[900] }, }, }), ); return (
hihihihihi
{ if (params.field === 'city' || params.value == null) { return ''; } if (params.field === 'status' && params.value == true) { return 'true'; } if (params.field === "stape" && String(params.value) === "planifie") { return 'planifie' } if (params.field === "stape" && String(params.value) === "facturé") { return 'facturé' } return params.value >= 15 ? 'hot' : 'cold'; }} /> {/*
} headerHeight={60} rowHeight={120} sx={datagridSx} rows={rows21} columns={columns21} pageSize={5} checkboxSelection onCellClick={handleCellClick} onRowClick={handleRowClick} />
*/}
Subscribe To subscribe to this website, please enter your email address here. We will send updates occasionally.
9:30 am Eat Because you need strength 10:00 am Code Because it's awesome!

cartouche formaion

Ajouter une ligne
info bull infobulle ◕‿‿◕
{isLoading &&
}

payement strip


Popup - Scaler Academy


Open Modal simplifié } modal nested position="center center" > modall simple

Open Modal 2 1} modal nested position="center center" > {(close) => (
MySy Info
{' '} Saisir les informatons pour valider la formation*

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
Valider } position="top center" nested > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam doloribus. Odit, aut.
)}


{clientSecret_id &&
} Ss

Subscribe

Try the successful test card: 4242424242424242.

Try the test card that requires SCA: 4000002500003155.

Use any future expiry date, CVC,5 digit postal code




Mysy Training Logo
Cherif BALDE
Directeur

 +337 69 20 39 45
 +331 77 00 38 57
 cbalde@mysy-training.com
 https://www.mysy-training.com/
 +337 69 20 39 45
{/*
Description:
editorRef.current = editor} initialValue="

Votre description.

" value={grr} onKeyUp={toto} onEditorChange={(newValue, editor) => { //console.log(" newValue = "+newValue); // alert(" newValue = "+newValue); //setText(editor.getContent({format: 'text'})); }} init={{ resize: false, height: 300, width: 800, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px;line-height: 0.6rem; }' }} />
Description:
editorRef.current = editor} initialValue="

Votre description.

" init={{ resize: false, height: 300, width: 800, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' + 'alignleft aligncenter alignright alignjustify | ' + 'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px;line-height: 0.6rem; }' }} />

react-date-range Example

setState([item.selection])} moveRangeOnFirstSelection={false} ranges={state} /> {global_view_data && global_view_data.length > 3 &&

Tout compilé cherif

Line Chart a (global)

Bar Chart b (global)

} detail_view_categorie = {detail_view_categorie && detail_view_categorie.map((val) => (
  • {val}
  • ))} {topX_formation && topX_formation.length > 3 &&

    Le top 5 de vos formationes de la semaine est :

    {topX_formation && topX_formation.map((val) => (
  • {val}
  • ))}
    }

    Top 5 cherif

    Le top 5 de vos formationes de la semaine est :

    {topX_formation && topX_formation.map((val) => (
  • {val}
  • ))}

    Line Chart a - la

    payement strip

    setinterpolation(event.target.value)} />
    setpolar(event.target.checked) } style={{ marginLeft: 25, marginRight: 5 }} />
    {
    test 2 {suggestion2 && suggestion2.slice(0, 5).map((suggestion, id) =>
    OnSuggestionHandler(JSON.parse(suggestion).name)}> {JSON.parse(suggestion).name}
    )}
    }

    Mysy Training Logo
    Cherif BALDE
    Directeur

     +337 69 20 39 45
     +337 69 20 39 45
     cbalde@mysy-training.com
     https://www.mysy-training.com/
     +337 69 20 39 45

    Mysy Training Logo
    Gnanki DOKOTO
    Managing Partner | Directrice Associée

     +336 68 54 36 66
     gdokoto@mysy-training.com
     https://www.mysy-training.com/
     +337 69 20 39 45
    */}
    ) } export default TestUrl;