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}
/>
*/}
Open form dialog
Subscribe
To subscribe to this website, please enter your email address here. We
will send updates occasionally.
Cancel
Subscribe
9:30 am
Eat
Because you need strength
10:00 am
Code
Because it's awesome!
cartouche formaion
Ajouter une ligne
info bull infobulle ◕‿‿◕
loading .....
payement strip
Finaliser la commande
Commande validé, fermer
Popup - Scaler Academy
Open Modal simplifié }
modal
nested
position="center center"
>
modall simple
Open Modal 2 1}
modal
nested
position="center center"
>
{(close) => (
aaaa
×
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.
{
//console.log('modal closed ');
close();
}}
>
Annuler
)}
Init Payement
{clientSecret_id &&
Valide payement {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
Full name
Finalise Subscribe
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; }'
}}
/>
Log editor content
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; }'
}}
/>
Log editor content
react-date-range Example
setState([item.selection])}
moveRangeOnFirstSelection={false}
ranges={state}
/>
Recup Stat info
Recup Stat top 5
{global_view_data && global_view_data.length > 3 &&
}
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}
))}
payement strip
setinterpolation(event.target.value)}
/>
setpolar(event.target.checked)
}
style={{ marginLeft: 25, marginRight: 5 }}
/>
polar
{
test 2
{suggestion2 && suggestion2.slice(0, 5).map((suggestion, id) =>
OnSuggestionHandler(JSON.parse(suggestion).name)}> {JSON.parse(suggestion).name}
)}
}
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
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;