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 { 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 { 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'; // pour le payement stripe : https://stripe.com/docs/payments/quickstart?client=react&lang=python const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p'); 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([]); function changech(e) { var val = e.target.value; let matches = []; if (String(val).length > 0) { matches = suggestedwords.filter(usr => { //alert(JSON.parse(usr).name ); const regex = new RegExp(`${val}`, "gi"); return JSON.parse(usr).name.match(regex); } ) } //console.log("matches = " + matches); setsuggestion2(matches); settext(e.target.value); } function OnSuggestionHandler(text) { var val = text; settext(val); } function OnblurHandle(e) { setTimeout(() => { setsuggestion2([]) }, 100) } function GetInvoice() { //alert(" recup facture "); var form = new FormData(); form.append("invoice_id", "num_facture"); var url = process.env.REACT_APP_API_URL + "myclass/api/GetCustomerInvoice/token11111/facture122"; var nom_facture = "cheifff.pdf"; axios.get(url, { responseType: 'blob', },) .then((res) => { fileDownload(res.data, nom_facture) }) } const [data_global, setdata_global] = useState([]); const stored_part = getCookie('tokenmysypart'); function getStatData() { var form = new FormData(); const ch_array = []; const ch_categories = []; var ch_data2 = ""; var date_start = "" var date_end = "" if (state[0].startDate) { //console.log("Start = " + state[0].startDate); //console.log("Start = " + moment(state[0].startDate).format('YYYY-MM-DD')); date_start = moment(state[0].startDate).format('YYYY-MM-DD'); } if (state[0].endDate) { //console.log("endDate = " + state[0].endDate); //console.log("END = " + moment(state[0].endDate).format('YYYY-MM-DD')); date_end = moment(state[0].endDate).format('YYYY-MM-DD'); } var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetStat_class_view/"; form.append("date_start", date_start); form.append("date_end", date_end); form.append('token', 'cherif'); //alert("myurl = "+myurl); axios.post(myurl, form).then(res => { if (String(res.data.status) != String("false")) { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); res.data.message.map(obj => { if (JSON.parse(obj).Date_view) { //console.log("Date_view " + JSON.parse(obj).Date_view + " nb_view = " + JSON.parse(obj).nb_view); ch_array.push(parseInt(JSON.parse(obj).nb_view)); ch_categories.push(JSON.parse(obj).Date_view); } else if (JSON.parse(obj).data) { //ch_data2 = String(obj.data); //console.log("data ok " + JSON.parse(obj).data) ch_data2 = JSON.parse(obj).data; } }); //console.log(" ch_array = " + ch_array); //console.log(" ch_data2 = " + ch_data2); var new_data2 = ch_data2.split(',').map(Number); new_data2.push(123); //console.log(" new_data2 = " + new_data2); setglobal_view_data(ch_array); //console.log(global_view_data); setglobal_view_categories(ch_categories); setglobal_view_data_v2(new_data2); } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); //setmyApimyApiMessage("") }) } /* 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; function Get_Top5_Stat() { var form = new FormData(); var date_start = "" var date_end = "" if (state[0].startDate) { //console.log("Start = " + state[0].startDate); //console.log("Start = " + moment(state[0].startDate).format('YYYY-MM-DD')); date_start = moment(state[0].startDate).format('YYYY-MM-DD'); } if (state[0].endDate) { //console.log("endDate = " + state[0].endDate); //console.log("END = " + moment(state[0].endDate).format('YYYY-MM-DD')); date_end = moment(state[0].endDate).format('YYYY-MM-DD'); } var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetStat_class_view_topX/"; form.append("date_start", date_start); form.append("date_end", date_end); form.append('token', 'cherif'); form.append('topX', '5'); //alert("myurl = "+myurl); var top5training = []; axios.post(myurl, form).then(res => { if (String(res.data.status) != String("false")) { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); res.data.message.map(obj => { if (JSON.parse(obj).name1) { //console.log(" ---name_serie = " + JSON.parse(obj).name1 + " data_series = " + JSON.parse(obj).data1); top5training.push(JSON.parse(obj).name1); var ch_data2 = JSON.parse(obj).data1; let new_data2 = ch_data2.map(i => Number(i)); setdetail_view_data1(new_data2); var nom = JSON.parse(obj).name1; setdetail_view_data1_name(nom); //console.log("new_data2 = ", ch_data2); //console.log("result = ", new_data2); } if (JSON.parse(obj).name2) { //console.log(" ---name_serie = " + JSON.parse(obj).name2 + " data_series = " + JSON.parse(obj).data2); top5training.push(JSON.parse(obj).name2); var ch_data2 = JSON.parse(obj).data2; let new_data2 = ch_data2.map(i => Number(i)); setdetail_view_data2(new_data2); var nom = JSON.parse(obj).name2; setdetail_view_data2_name(nom); } if (JSON.parse(obj).name3) { //console.log(" ---name_serie = " + JSON.parse(obj).name3 + " data_series = " + JSON.parse(obj).data3); top5training.push(JSON.parse(obj).name3); var ch_data2 = JSON.parse(obj).data3; let new_data2 = ch_data2.map(i => Number(i)); setdetail_view_data3(new_data2); var nom = JSON.parse(obj).name3; setdetail_view_data3_name(nom); } if (JSON.parse(obj).name4) { //console.log(" ---name_serie = " + JSON.parse(obj).name4 + " data_series = " + JSON.parse(obj).data4); top5training.push(JSON.parse(obj).name4); var ch_data2 = JSON.parse(obj).data4; let new_data2 = ch_data2.map(i => Number(i)); setdetail_view_data4(new_data2); var nom = JSON.parse(obj).name4; setdetail_view_data4_name(nom); } if (JSON.parse(obj).categories) { //console.log(" ---categories = " + JSON.parse(obj).categories); var ch_data2 = JSON.parse(obj).categories; var new_data2 = ch_data2.split(','); setdetail_view_categorie(new_data2); } }); settopX_formation(top5training); } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); //setmyApimyApiMessage("") }) } 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", } } } } } }); return (
hihihihihi

cartouche formaion

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

payement strip


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;