\r\n (this.animBox = ref)}\r\n >
\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default VehiclesOnTour;\r\n","export default \"data:image/png;base64,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\"","export default __webpack_public_path__ + \"static/media/headerbg.1c9e6592.svg\";","export default __webpack_public_path__ + \"static/media/Intersection 2_imac2013_right.49c53b8c.png\";","export default __webpack_public_path__ + \"static/media/Intersection 3_imac2013_left.598da0b8.png\";","export default __webpack_public_path__ + \"static/media/app.a832a925.png\";","export default __webpack_public_path__ + \"static/media/farmer.f97f9c44.svg\";","export default __webpack_public_path__ + \"static/media/mapMarker.96430cde.png\";","import React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\nimport jwt_decode from \"jwt-decode\";\r\n\r\nimport { Container, Row, Col, Form, Button, InputGroup } from \"react-bootstrap\";\r\n\r\nimport \"../App/App.scss\";\r\nimport \"./Login.scss\";\r\nimport { Redirect, withRouter, useHistory } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\nimport { authenticate, setConfiguration } from \"../../reducer/Action\";\r\nimport fleetBrand from \"../App/FleetWhite.png\";\r\nimport fleetBrandGreen from '../App/FleetMain.png';\r\nimport agrivitech from '../../assets/images/logos/logoAgrivitech.png';\r\nimport biBG from '../../assets/images/background/headerbg.svg';\r\nimport optimisation from \"../../assets/images/illustration/Intersection 2_imac2013_right.png\";\r\nimport flotte from \"../../assets/images/illustration/Intersection 3_imac2013_left.png\";\r\nimport app from \"../../assets/images/illustration/app.png\";\r\nimport farmer from \"../../assets/images/illustration/farmer.svg\";\r\nimport mapMarker from \"../../assets/images/illustration/mapMarker.png\";\r\nimport { \r\n faEnvelope,\r\n faExclamationCircle,\r\n faTruckFast,\r\n faTruckLoading,\r\n faRoute,\r\n faSmile,\r\n faFile,\r\n faParachuteBox,\r\n faStar,\r\n faShield,\r\n faLocationDot,\r\n faMessageBot,\r\n } from \"@fortawesome/pro-duotone-svg-icons\";\r\n\r\nclass Login extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n email: \"\",\r\n password: \"\",\r\n testObject: null,\r\n errorMessage: \"\",\r\n errorStatus: false,\r\n };\r\n }\r\n\r\n login = (e) => {\r\n e.preventDefault();\r\n\r\n const url = new URL(this.props.BASE_URL + \"/auth/byCredential\");\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n\r\n let myInit = {\r\n method: \"POST\",\r\n headers: myHeaders,\r\n body: JSON.stringify({\r\n email: this.state.email,\r\n password: this.state.password,\r\n }),\r\n cache: \"no-cache\",\r\n };\r\n\r\n fetch(url, myInit)\r\n .then((response) => {\r\n // console.log(\"POST request @ \", this.props.BASE_URL+'/auth/byCredential');\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Bad credentials\") {\r\n this.setState({\r\n errorMessage: \"Mot de passe ou e-mail incorrect.\",\r\n errorStatus: true,\r\n });\r\n } else {\r\n if (result.token) {\r\n localStorage.setItem(\"fleetToken\", result.token);\r\n localStorage.setItem(\"fleetClientId\", result.clientId);\r\n //decode the token and store it in state\r\n let decoded = result.token ? jwt_decode(result.token) : null;\r\n if (decoded) {\r\n this.props.setConfiguration({\r\n is_admin: decoded?.user?.is_admin === 1 ? true : false,\r\n can_upload_with_excel:\r\n decoded?.user?.can_upload_with_excel === 1 ? true : false,\r\n can_access_dashboard_v2:\r\n decoded?.user?.can_access_dashboard_v2 === 1\r\n ? true\r\n : false,\r\n fleet_optimization:\r\n decoded?.user?.fleet_optimization === 1 ? true : false,\r\n logo_url: decoded?.user?.logo_url,\r\n });\r\n }\r\n this.setState({\r\n email: \"\",\r\n password: \"\",\r\n });\r\n }\r\n }\r\n });\r\n } else if (response.status === 401) {\r\n response.json().then((result) => {\r\n // console.log(\"result\", result);\r\n\r\n if (result.status === \"Bad credentials\") {\r\n this.setState({\r\n errorMessage: \"Mot de passe ou e-mail incorrect.\",\r\n errorStatus: true,\r\n });\r\n }\r\n });\r\n } else if (response.status === 400) {\r\n this.setState({\r\n errorMessage: \"Une erreur s'est produite\",\r\n errorStatus: true,\r\n });\r\n } else {\r\n this.setState({\r\n errorMessage:\r\n \"Une erreur réseau est survenue, veuillez contacter le support client.\",\r\n errorStatus: true,\r\n });\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n\r\n //this.props.authenticate(\"teub\");\r\n\r\n // console.log(\"connected\", this.props.isAuthenticated );\r\n };\r\n\r\n handleEmailChange = (e) => {\r\n const email = e.target.value;\r\n this.setState({\r\n email: email,\r\n });\r\n };\r\n\r\n handlePasswordChange = (e) => {\r\n const password = e.target.value;\r\n this.setState({\r\n password: password,\r\n });\r\n };\r\n\r\n render() {\r\n if (checkAuth()) {\r\n let decoded = jwt_decode(localStorage.getItem(\"fleetToken\"));\r\n return (\r\n \r\n Adresse email \r\n this.handleEmailChange(e)}\r\n defaultValue={this.state.email}\r\n aria-describedby=\"basic-addon1\"\r\n />\r\n Mot de passe \r\n this.handlePasswordChange(e)}\r\n defaultValue={this.state.password}\r\n aria-describedby=\"basic-addon2\"\r\n />\r\n\r\n \r\n \r\n this.login(e)}\r\n className={\"btn-login mt-4\"}\r\n block=\"true\"\r\n disabled={\r\n this.state.email === \"\" || this.state.password === \"\"\r\n }\r\n >\r\n Connexion\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n 
\r\n 
\r\n \r\n
\r\n FLEET SIMPLIFIE LA GESTION DES TRANSPORTS D'APPRO, LA COLLECTE OU LES LIVRAISONS DU SECTEUR AGRICOLE
\r\n\r\n Solution innovante permettant d'optimiser rapidement vos tournées de livraison, de notifier en temps réel vos destinataires et de dématérialiser les documents de livraison.\r\n
\r\n\r\n Mot de passe oublié ?\r\n
\r\n \r\n\r\n \r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n\r\n \r\n Optimisez et suivez automatiquement vos tournées en temps réel\r\n
\r\n \r\n Application mobile pour l’exécution de la tournée du livreur\r\n Réduction de l’impact carbone des livraisons\r\n Notification en temps réel par sms, email, notification push, etc...\r\n Preuve de livraison par signature ou photo géolocalisée\r\n Dématérialisation des documents de livraison\r\n UX co-développée avec des chauffeurs pour une expérience optimale\r\n
\r\n \r\n\r\n 
\r\n
\r\n \r\n \r\n \r\n \r\n 
\r\n {/* 
*/}\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Documents de transport dématérialisés\r\n
\r\n \r\n Vos bons de livraison dématérialisés sont échangés en temps réel entre vos équipes et le client pour réduire les délais de traitement, facturation...\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n 30% de retours en moins\r\n
\r\n \r\n Avec la livraison sans présence du destinataire et l'affichage dans l'application du lieu de dépose en ferme réduisez retours : 30% de retours en moins !\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Gestion des anomalies\r\n
\r\n \r\n Les anomalies de livraison (annulation, refus, réserve, etc) sont remontées en temps réel pour un maximum de réactivité\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Sécurisez les lieux de livraison\r\n
\r\n \r\n Vos livreurs pourront prendre en photo les lieux de livraison dangereux ou non conformes pour vous permettre une meilleure gestion\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n {/* */}\r\n \r\n
\r\n
\r\n \r\n \r\n Générez des tournées optimisées en quelques secondes \r\n
\r\n \r\n Mesurer l'impacte financier et environnemental de vos livraisons dans le temps\r\n
\r\n \r\n Suivez votre livraisons en temps réel et gagnez en réactivité\r\n
\r\n \r\n Sécurisez vos opérations en identifiants les lieux de livraison\r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Livrez sans présence du destinataire\r\n
\r\n \r\n Preuve de livraison par photo datée et géolocalisée avec notification instantanée au destinataire\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Chargement intelligent de vos camions\r\n
\r\n \r\n Fleet génère automatiquement l'ordre de chargement optimal de vos camions standards ou citernes\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Optimisation de vos tournées\r\n
\r\n \r\n Obtenez en quelques secondes les simulations de trajets optimaux qui s'adapte à vos contraintes métiers\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Contact destinataire facilité\r\n
\r\n \r\n Appel téléphonique du destinataire depuis l'application, notification automatique à l'approche de la livraison, remontée d'anomalies\r\n
\r\n Réduisez l'empreinte carbone graçe aux fonctionalités de l'application Fleet®
\r\n\r\n Moins de kilomètres, moins de temps de livraison, moins de papier !\r\n
\r\n- \r\n
- Moins de kilomètres : l'application réduit le nombre de retours plateforme en permettant de livrer sans la présence de l'agriculteur. \r\n
- Moins de temps sur place : en prévenant les destinataires avant l'arrivée vous réduisez le temps de livraison \r\n
- Moins de papier : fin des bons de livraison papier \r\n
\r\n 
{\" \"} par {\" \"} \r\n
\r\n 51430 Bezannes\r\n \r\n
\r\n\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst checkAuth = () => {\r\n return localStorage.getItem(\"fleetToken\");\r\n};\r\n\r\nconst mapStateToProps = (state /*, ownProps*/) => {\r\n return {\r\n isAuthenticated: state.auth.isAuthenticated,\r\n BASE_URL: state.BASE_URL,\r\n config: state.config,\r\n };\r\n};\r\nconst mapDispatchToProps = { authenticate, setConfiguration };\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Login);\r\n","import React, { Component } from \"react\";\r\nimport { Badge, Col, Container, Row } from \"react-bootstrap\";\r\nimport lottie from \"lottie-web\";\r\nimport animationData from \"../../Home/3075-delivery-van\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nimport mapboxgl from \"mapbox-gl\";\r\n\r\nimport in_out_disable from \"./1.0.png\";\r\n\r\nmapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;\r\n\r\nlet animObj = null;\r\nlet mapboxInterval = null;\r\nexport class Delivery extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n componentSize: props.componentSize,\r\n tours: props.tours,\r\n firstCardCount: 0,\r\n secondCardCount: 0,\r\n thirdCardCount: 0,\r\n sumCount: 0,\r\n lng: 4.0333,\r\n lat: 49.25,\r\n zoom: 7,\r\n };\r\n this._isMounted = false;\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n const map = new mapboxgl.Map({\r\n container: this.mapContainer,\r\n style: \"mapbox://styles/bazam/ck9bl6ycn050g1ip509540isz\",\r\n center: [this.state.lng, this.state.lat],\r\n zoom: this.state.zoom,\r\n });\r\n\r\n map.on(\"load\", () => {\r\n map.loadImage(in_out_disable, function (error, image) {\r\n if (error) throw error;\r\n\r\n map.addImage(\"mapPin\", image, { sdf: true });\r\n\r\n map.on(\"click\", \"points\", function (e) {\r\n var coordinates = e.features[0].geometry.coordinates.slice();\r\n var description = e.features[0].properties.description;\r\n\r\n while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {\r\n coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;\r\n }\r\n\r\n new mapboxgl.Popup()\r\n .setLngLat(coordinates)\r\n .setHTML(description)\r\n .addTo(map);\r\n });\r\n\r\n // Change the cursor to a pointer when the mouse is over the places layer.\r\n map.on(\"mouseenter\", \"points\", function () {\r\n map.getCanvas().style.cursor = \"pointer\";\r\n });\r\n\r\n // Change it back to a pointer when it leaves.\r\n map.on(\"mouseleave\", \"points\", function () {\r\n map.getCanvas().style.cursor = \"\";\r\n });\r\n });\r\n this.drawmarker(map);\r\n });\r\n\r\n this.fetchKPI();\r\n mapboxInterval = setInterval(async () => {\r\n this.fetchKPI();\r\n this.drawmarker(map);\r\n }, 5000);\r\n }\r\n\r\n componentWillUnmount() {\r\n // Lors du déchargement de la page, on de-register le setInterval qui va fetch les étapes pour mapbox.\r\n this._isMounted = false;\r\n\r\n clearInterval(mapboxInterval);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n if (\r\n this.state.firstCardCount !== prevState.firstCardCount ||\r\n this.state.secondCardCount !== prevState.secondCardCount ||\r\n this.state.thirdCardCount !== prevState.thirdCardCount\r\n ) {\r\n this.setState({\r\n sumCount:\r\n this.state.firstCardCount +\r\n this.state.secondCardCount +\r\n this.state.thirdCardCount,\r\n });\r\n }\r\n }\r\n\r\n drawmarker = (map) => {\r\n this.fetchAllSteps().then(async (data) => {\r\n let steps = data || [];\r\n\r\n let features = [];\r\n let new_markers = [];\r\n let index = 0;\r\n\r\n for (let el2 of steps) {\r\n if (index < 50) {\r\n index++;\r\n await fetch(\r\n \"https://api.mapbox.com/geocoding/v5/mapbox.places/\" +\r\n el2.end_address?.street +\r\n \" \" +\r\n el2.end_address?.city +\r\n \" \" +\r\n el2.end_address?.zipcode +\r\n \" France.json?access_token=pk.eyJ1IjoiYmF6YW0iLCJhIjoiY2tjdnN6dXQ0MDdnaTJ2cHF1cG12Zm15NSJ9.Z1Sb2Umu0sMaw4o77CK8Sw\"\r\n )\r\n .then((response) => {\r\n return response.json();\r\n })\r\n .then((json) => {\r\n let center = \"\";\r\n\r\n center = json.features[0].center;\r\n\r\n if (json && json.features && json.features[0]) {\r\n let feature = {\r\n type: \"Feature\",\r\n properties: {\r\n step_status: el2.status,\r\n description:\r\n '\r\n 51430 Bezannes
' +\r\n '' +\r\n (el2.end_address?.name ? el2.end_address.name : \"n.c\") +\r\n \"
\" +\r\n '' +\r\n ((el2.end_address?.street\r\n ? el2.end_address?.street\r\n : \"\") +\r\n \" \" +\r\n (el2.end_address?.city ? el2.end_address?.city : \"\") +\r\n \" \" +\r\n (el2.end_address?.zipcode\r\n ? el2.end_address?.zipcode\r\n : \"\")) +\r\n \"
\" +\r\n '' +\r\n this.translateStatus(el2.status) +\r\n \"\" +\r\n \"
\",\r\n },\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [\r\n json.features[0].center[0],\r\n json.features[0].center[1],\r\n ],\r\n },\r\n };\r\n\r\n new_markers.push(new mapboxgl.Marker().setLngLat(center));\r\n\r\n return feature;\r\n }\r\n\r\n return null;\r\n })\r\n .then((feature) => {\r\n if (feature) {\r\n features.push(feature);\r\n }\r\n });\r\n }\r\n }\r\n\r\n if (map.getLayer(\"points\")) {\r\n map.removeLayer(\"points\");\r\n }\r\n if (map.getSource(\"steps\")) {\r\n map.getSource(\"steps\").setData({\r\n type: \"FeatureCollection\",\r\n features: features,\r\n });\r\n } else {\r\n map.addSource(\"steps\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: features,\r\n },\r\n cluster: false, // Enable clustering\r\n clusterRadius: 50, // Radius of each cluster when clustering points\r\n clusterMaxZoom: 12, // Max zoom to cluster points on\r\n });\r\n }\r\n\r\n map.addLayer({\r\n id: \"points\",\r\n type: \"symbol\",\r\n source: \"steps\",\r\n layout: {\r\n \"icon-allow-overlap\": true,\r\n \"icon-ignore-placement\": true,\r\n \"icon-image\": \"mapPin\",\r\n \"icon-size\": 0.6,\r\n },\r\n paint: {\r\n // make circles larger as the user zooms from z12 to z22\r\n \"icon-color\": [\r\n \"match\",\r\n [\"get\", \"step_status\"],\r\n \"CREATED\",\r\n \"#079992\",\r\n \"STARTED\",\r\n \"#079992\",\r\n \"DELIVERED\",\r\n \"#78e08f\",\r\n \"PARTIALLY_DELIVERED\",\r\n \"#e55039\",\r\n \"CANCELED\",\r\n \"#e55039\",\r\n \"LATE\",\r\n \"#fa983a\",\r\n /* other */ \"#0e44cc\",\r\n ],\r\n // color circles by ethnicity, using a match expression\r\n // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match\r\n },\r\n });\r\n });\r\n };\r\n\r\n translateStatus = (word) => {\r\n switch (word) {\r\n case \"CREATED\":\r\n return \"Planifiée\";\r\n case \"STARTED\":\r\n return \"Livraison en cours\";\r\n case \"DELIVERED\":\r\n return \"Livrée\";\r\n case \"PARTIALLY_DELIVERED\":\r\n return \"Partiellement délivrée\";\r\n case \"CANCELED\":\r\n return \"Non livrée\";\r\n case \"LATE\":\r\n return \"En retard\";\r\n }\r\n };\r\n\r\n fetchKPI = () => {\r\n const url = new URL(this.props.BASE_URL.concat(\"/steps/KPI\"));\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n // console.log(\"GET request @ \", this.props.BASE_URL.concat('/steps/KPI'));\r\n\r\n fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n this._isMounted &&\r\n this.setState({\r\n firstCardCount: result.KPI.delivered,\r\n secondCardCount: result.KPI.in_progress,\r\n thirdCardCount: result.KPI.canceled,\r\n });\r\n }\r\n });\r\n } else {\r\n console.log(\"Mauvaise réponse du réseau\");\r\n response.json().then(function (result) {\r\n // console.log(\"result\", result);\r\n });\r\n }\r\n })\r\n .catch(function (error) {\r\n // console.log('Il y a eu un problème avec l\\'opération fetch: ' + error.message);\r\n });\r\n };\r\n\r\n fetchAllSteps = () => {\r\n const url = new URL(this.props.BASE_URL + \"/steps\");\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n // console.log(\"GET request @ \", this.props.BASE_URL.concat('/steps'));\r\n\r\n return fetch(url, myInit)\r\n .then((response) => response.json())\r\n .then(async (result) => {\r\n if (result.status === \"Success\") {\r\n // console.log(result.steps)\r\n return result.steps || [];\r\n }\r\n })\r\n .then((data) => {\r\n return data;\r\n })\r\n .catch(function (error) {\r\n // console.log('Il y a eu un problème avec l\\'opération fetch: ' + error.message);\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \" +\r\n '' +\r\n ((el2.end_address?.street\r\n ? el2.end_address?.street\r\n : \"\") +\r\n \" \" +\r\n (el2.end_address?.city ? el2.end_address?.city : \"\") +\r\n \" \" +\r\n (el2.end_address?.zipcode\r\n ? el2.end_address?.zipcode\r\n : \"\")) +\r\n \"
\" +\r\n '' +\r\n this.translateStatus(el2.status) +\r\n \"\" +\r\n \"
\r\n \r\n \r\n \r\n Étapes
\r\n \r\n
\r\n \r\n \r\n \r\n {this.state.secondCardCount}\r\n \r\n \r\n En cours\r\n \r\n
\r\n \r\n {/**/}\r\n {/*Tooltip on {\"right\"}.*/}\r\n {/**/}\r\n {/*}*/}\r\n {/*>*/}\r\n {/**/}\r\n {/**/}\r\n
\r\n\r\n \r\n Étapes {this.state.sumCount} \r\n
\r\n \r\n \r\n \r\n \r\n {this.state.firstCardCount}\r\n \r\n \r\n Livrée(s)\r\n \r\n
\r\n \r\n (this.mapContainer = el)}\r\n className=\"mapContainer\"\r\n />\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Delivery;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE6WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0xMC0xNFQwOToxODo1NyswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjAtMTAtMTRUMDk6NTk6MTIrMDI6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjAtMTAtMTRUMDk6NTk6MTIrMDI6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc1OTU1YzhlLThjNTQtZTI0My1hNmQ5LTA3MTJlMGY2OTc2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NTk1NWM4ZS04YzU0LWUyNDMtYTZkOS0wNzEyZTBmNjk3NjIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NTk1NWM4ZS04YzU0LWUyNDMtYTZkOS0wNzEyZTBmNjk3NjIiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjc1OTU1YzhlLThjNTQtZTI0My1hNmQ5LTA3MTJlMGY2OTc2MiIgc3RFdnQ6d2hlbj0iMjAyMC0xMC0xNFQwOToxODo1NyswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4/1IASAAAB6UlEQVRIibXWO2gVQRTG8V80IkqCwQdYxMLCQlRsbAVfhQYsbLQWFAvRIsEQgjaCYGVloRgfhYGIIAFRq2iXVkEUBB/IjYUYMRqFiOC1mAjXvTO7s1G/avebM+e/zJwzsx3NZlNRjd7eNg/rcAi7sQFd+IZXeIQxvGmbNDX1x3tHBnAJhnASq2NfMq8ZXMQ5zKWAi0oSQDfGcbYCBj04jftYlQoqA3ZiFH0VoKJ24jaW1gWewP6asFboUB3gGgwnxiZxBHtwWCiYmAaEQssCHhDfszHswFVM4IZQtSOR2G4czAXui3jTQqX+KPhN9ONdZM7eXODGiPcMHxLxs3gS8dfnArsi3opE7G/1RLzlucCYNku3yHZsy0mSAs5EvE6hWPqwuGX+LtwU77vZWJKYJrEp4q/FPTwVimgltiZywONc4DiOliTaUjLWqjtFI7WkE3iRmTSlhnCuZgG/49JfAq/gay4Qros3c46mJT64DPgZ5xcIvCBxSFT14Qie14S9Fi7iqKqAcxisCRwW6b9cIKHv2so7oQe4VRaQe7T142NFzBfh0i5VLvCt6qU9I/zB/RMgXMPdxNhDJYWyUCAcx/uC9wnH8PN/ABva92kAL3MT1AUSfgEvzz+PCidStlK3RZUGsQyn6k78BUUkXnChKwjDAAAAAElFTkSuQmCC\"","import React from \"react\"\r\nimport ContentLoader from \"react-content-loader\";\r\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\r\nimport {faList, faStickyNote} from \"@fortawesome/free-solid-svg-icons\";\r\nimport {Link} from \"react-router-dom\";\r\n\r\n\r\nfunction IssueBoardList(props){\r\n if(props.list && props.list.length > 0){\r\n return props.list.map((value, index) => {\r\n return (\r\n \r\n {value.delivery_detail_key ? value.delivery_detail_key : \"BL 00000000\"} \r\n {value.issue_reason_message ? value.issue_reason_message : \"n.c\"} \r\n \r\n \r\n
\r\n )\r\n })\r\n }else{\r\n return (\r\n Aucun BL non livré.\r\n );\r\n\r\n }\r\n}\r\n\r\nexport default IssueBoardList\r\n","import React from \"react\"\r\n\r\nimport './FleetLoader.css'\r\n\r\nexport function FleetLoader(props){\r\n return (\r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default FleetLoader","import React, { Component } from \"react\";\r\nimport { Badge, Col, Container, Row } from \"react-bootstrap\";\r\n\r\nimport \"react-perfect-scrollbar/dist/css/styles.css\";\r\nimport PerfectScrollbar from \"react-perfect-scrollbar\";\r\nimport IssueBoardList from \"./issueBoardList/IssueBoardList\";\r\nimport FleetLoader from \"../../GenericComponent/FleetLoader/FleetLoader\";\r\n\r\nlet timerFetchIssues = null;\r\nexport class IssueBoard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n componentSize: props.componentSize,\r\n openIssues: props.openIssues,\r\n solvedIssues: props.solvedIssues,\r\n sumCount: 0,\r\n isLoading: false,\r\n error: \"\",\r\n };\r\n this._isMounted = false;\r\n }\r\n\r\n fetchIssue = () => {\r\n const url = new URL(this.props.BASE_URL.concat(\"/issues/withBlsAndTours\"));\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n if (this.props.debugMode) {\r\n console.log(\r\n \"GET request @ \",\r\n this.props.BASE_URL.concat(\"/issues/withBlsAndTours\")\r\n );\r\n }\r\n\r\n fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n this._isMounted &&\r\n this.setState({\r\n openIssues: result.openIssues,\r\n solvedIssues: result.solvedIssues,\r\n isLoading: false,\r\n });\r\n } else {\r\n this._isMounted &&\r\n this.setState({\r\n isLoading: false,\r\n });\r\n }\r\n });\r\n } else {\r\n response.json().then((result) => {\r\n this._isMounted &&\r\n this.setState({\r\n isLoading: false,\r\n });\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n this._isMounted &&\r\n this.setState({\r\n isLoading: false,\r\n error:\r\n \"Il y a eu un problème avec l'opération fetch\" + error.message,\r\n });\r\n });\r\n };\r\n\r\n solveIssue = (issueId) => {\r\n this._isMounted &&\r\n this.setState({\r\n isLoading: true,\r\n });\r\n const url = new URL(this.props.BASE_URL.concat(\"/issues/\", issueId));\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify({\r\n status: \"SOLVED\",\r\n }),\r\n };\r\n\r\n if (this.props.debugMode) {\r\n console.log(\r\n \"PUT request @ \",\r\n this.props.BASE_URL.concat(\"/issues/\", issueId)\r\n );\r\n }\r\n\r\n fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n this._isMounted &&\r\n this.setState({\r\n openIssues: result.openIssues,\r\n solvedIssues: result.solvedIssues,\r\n });\r\n this._isMounted && this.fetchIssue();\r\n }\r\n });\r\n } else {\r\n response.json().then((result) => {\r\n console.error(\"Mauvaise réponse du réseau\", result);\r\n\r\n this.setState({\r\n isLoading: false,\r\n });\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n console.error(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n };\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n this._isMounted && this.fetchIssue();\r\n timerFetchIssues = setInterval(() => {\r\n this._isMounted && this.fetchIssue();\r\n }, 10000);\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n\r\n // Lors du déchargement de la page, on de-register le setInterval qui va fetch les issues.\r\n\r\n clearInterval(timerFetchIssues);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n if (\r\n this?.state?.openIssues !== prevState?.openIssues ||\r\n this?.state?.solvedIssues !== prevState?.solvedIssues\r\n ) {\r\n this.setState({\r\n sumCount: this?.state?.openIssues?.length,\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n Réclamations
\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default IssueBoard;\r\n","import React, { Component } from \"react\";\r\nimport { Col, Table } from \"react-bootstrap\";\r\n\r\nimport \"./FacturationBoard.css\";\r\n\r\nexport class FacturationBoard extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n //convert date string to date object\r\n if (props.facturations.length > 0) {\r\n props.facturations.map((value, index) => {\r\n const factDate = new Date(value.date);\r\n props.facturations[index].date = factDate;\r\n });\r\n }\r\n\r\n this.state = {\r\n componentSize: props.componentSize,\r\n facturations: props.facturations,\r\n };\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n Réclamations {this.state.sumCount} \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {this.state.openIssues?.length > 0 ? \"Ouvertes\" : \"Ouverte\"}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {this.state.solvedIssues?.length > 0\r\n ? \"Traitées\"\r\n : \"Traitée\"}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default FacturationBoard;\r\n","export default __webpack_public_path__ + \"static/media/fleetBook_light.1e209329.png\";","export default __webpack_public_path__ + \"static/media/fleetBook_light_disabled.ff098281.png\";","import React, { Component, forwardRef } from \"react\";\r\nimport { Col } from \"react-bootstrap\";\r\nimport fr from \"date-fns/locale/fr\";\r\n\r\nimport \"react-perfect-scrollbar/dist/css/styles.css\";\r\nimport in_out from \"./fleetBook_light.png\";\r\nimport in_out_disable from \"./fleetBook_light_disabled.png\";\r\nimport FleetLoader from \"../../GenericComponent/FleetLoader/FleetLoader\";\r\nimport DatePicker, { registerLocale, setDefaultLocale } from \"react-datepicker\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport moment from \"moment\";\r\n\r\nregisterLocale(\"fr\", fr);\r\nsetDefaultLocale(\"fr\");\r\n\r\nconst ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (\r\n Véhicules actif par mois
\r\n\r\n\r\n Mois en cours\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n | Mois | \r\nCamions | \r\nPrix | \r\n
| \r\n {value.date.toLocaleDateString(\"fr-FR\", {\r\n month: \"short\",\r\n year: \"numeric\",\r\n })}\r\n | \r\n{value.truckCount} | \r\n\r\n {value.price}€ TTC\r\n | \r\n
\r\n Mois écoulés\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n
\r\n | Mois | \r\nCamions | \r\nPrix | \r\n
| \r\n {value.date.toLocaleDateString(\"fr-FR\", {\r\n month: \"short\",\r\n year: \"numeric\",\r\n })}\r\n | \r\n{value.truckCount} | \r\n\r\n {value.price}€ TTC\r\n | \r\n
\r\n \r\n this.setStartDate(date)}\r\n customInput={
\r\n \r\n \r\n Résumé
\r\n\r\n \r\n
\r\n Résumé indisponible
\r\n\r\n Des tournées sont encore en cours, revenez à la fin pour obtenir\r\n le resumé de la journée.\r\n
\r\nRésumé disponible
\r\nLe résumé des tournées de la journée est disponible.
\r\n\r\n this.downloadResume(e)}\r\n disabled={this.state.isLoading}\r\n >\r\n Télécharger\r\n \r\n
\r\n \r\n \r\n {this.state.error}\r\n
\r\n \r\n \r\n {value.delivery_detail_id ? value.delivery_detail_id : \"00000000\"} \r\n {value.message ? value.message : \"n.c\"} \r\n \r\n
\r\n )\r\n })\r\n }else{\r\n return (\r\n Aucune réserve émise.\r\n );\r\n\r\n }\r\n}\r\n\r\nexport default ReserveBoardList","import React, { Component } from \"react\";\r\nimport { Badge, Col, Container, Row } from \"react-bootstrap\";\r\n\r\nimport \"react-perfect-scrollbar/dist/css/styles.css\";\r\nimport PerfectScrollbar from \"react-perfect-scrollbar\";\r\nimport ReserveBoardList from \"./ReserveBoardList/ReserveBoardList\";\r\n\r\nlet timerFetchReserves = null;\r\nexport class ReserveBoard extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n componentSize: props.componentSize,\r\n reserves: null,\r\n sumCount: 0,\r\n };\r\n this._isMounted = false;\r\n }\r\n\r\n fetchReserves = () => {\r\n const url = new URL(this.props.BASE_URL.concat(\"/reserve\"));\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n console.log(\"GET request @ \", this.props.BASE_URL.concat(\"/reserve\"));\r\n fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n this._isMounted &&\r\n this.setState({\r\n reserves: result.reserves,\r\n });\r\n }\r\n });\r\n } else {\r\n console.log(\"Mauvaise réponse du réseau\");\r\n response.json().then(function (result) {\r\n console.log(\"result\", result);\r\n });\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n };\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n this.fetchReserves();\r\n timerFetchReserves = setInterval(() => {\r\n this.fetchReserves();\r\n }, 10000);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n if (this.state.reserves !== prevState.reserves) {\r\n this.setState({\r\n sumCount: this?.state?.reserves?.length,\r\n });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n // Lors du déchargement de la page, on de-register le setInterval qui va fetch les réserves.\r\n this._isMounted = false;\r\n clearInterval(timerFetchReserves);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n Réserves
\r\n\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default ReserveBoard;\r\n","import React, { Component } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faSignOutAlt } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nimport lottie from \"lottie-web\";\r\nimport animationData from \"./3075-delivery-van\";\r\n\r\nimport {\r\n Container,\r\n Row,\r\n Col,\r\n Form,\r\n Button,\r\n InputGroup,\r\n Badge,\r\n} from \"react-bootstrap\";\r\n\r\nimport \"../App/App.scss\";\r\nimport \"./Home.css\";\r\nimport marker from \"../EmptyListComponent/kekwgris.png\";\r\nimport { VehiclesOnTour } from \"../DashboardComponent/VehiclesOnTour/VehiclesOnTour\";\r\nimport { Delivery } from \"../DashboardComponent/Delivery/Delivery\";\r\nimport { IssueBoard } from \"../DashboardComponent/IssueBoard/IssueBoard\";\r\nimport FacturationBoard from \"../DashboardComponent/FacturationBoard/FacturationBoard\";\r\nimport { logout } from \"../../reducer/Action\";\r\nimport { connect } from \"react-redux\";\r\nimport { Login } from \"../Login/Login\";\r\nimport { withRouter } from \"react-router\";\r\nimport { compose } from \"redux\";\r\nimport ResumeBoard from \"../DashboardComponent/ResumeBoard/ResumeBoard\";\r\nimport ReserveBoard from \"../DashboardComponent/ReserveBoard/ReserveBoard\";\r\n\r\nexport class Home extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isAuthenticated: false,\r\n facturations: [\r\n {\r\n id: 1,\r\n date: \"2020-07-02T00:00\",\r\n truckCount: 42,\r\n price: 140,\r\n },\r\n {\r\n id: 1,\r\n date: \"2020-06-02T00:00\",\r\n truckCount: 23,\r\n price: 545,\r\n },\r\n {\r\n id: 1,\r\n date: \"2020-05-02T00:00\",\r\n truckCount: 45,\r\n price: 587,\r\n },\r\n {\r\n id: 1,\r\n date: \"2020-04-02T00:00\",\r\n truckCount: 903,\r\n price: 123,\r\n },\r\n ],\r\n openIssues: [],\r\n solvedIssues: [],\r\n };\r\n }\r\n\r\n componentDidMount() {}\r\n\r\n render() {\r\n return (\r\n \r\n Réserves {this.state.sumCount} \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Dashboard
\r\n\r\n {this.state.statusColorClass === \"late\" ? (\r\n En retard}\r\n >\r\n {({ ref, ...triggerHandler }) => (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default StatusComponent;\r\n","import React from \"react\";\r\nimport StatusComponent from \"../StatusComponent/StatusComponent\";\r\n\r\nimport { Card, OverlayTrigger, Tooltip } from \"react-bootstrap\";\r\n\r\nimport \"../../../App/App.scss\";\r\nimport \"./tourItemDashboard.scss\";\r\n\r\nimport Skeleton from \"react-loading-skeleton\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faExclamationCircle,\r\n faWarning,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nconst TourItemDashboard = (props) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n ) : (\r\n \r\n \r\n \r\n
\r\n )}\r\n\r\n {this.state.statusText}\r\n \r\n \r\n props.selectedTourID === props.tour.tour_id ||\r\n !props.isMapReady ||\r\n props.isMapUpdating\r\n ? props.setselectedTourID(null)\r\n : props.setselectedTourID(props.tour.tour_id)\r\n }\r\n >\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nfunction areEqual(prevProps, nextProps) {\r\n return (\r\n prevProps.tour.status === nextProps.tour.status &&\r\n prevProps.tour.vehicule_and_datas?.current_step?.step_id ===\r\n nextProps.tour.vehicule_and_datas?.current_step?.step_id &&\r\n prevProps.isMapUpdating === nextProps.isMapUpdating &&\r\n prevProps.isMapReady === nextProps.isMapReady &&\r\n prevProps.selectedTourID === nextProps.selectedTourID &&\r\n prevProps.setselectedTourID === nextProps.setselectedTourID &&\r\n prevProps.tour.issues_kpi === nextProps.tour.issues_kpi\r\n );\r\n}\r\n\r\nexport default React.memo(TourItemDashboard, areEqual);\r\n","import React, { useState, useContext, useRef } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faEllipsisV } from \"@fortawesome/free-solid-svg-icons\";\r\nimport StatusComponent from \"../StatusComponent/StatusComponent\";\r\n\r\nimport { Card } from \"react-bootstrap\";\r\n\r\nimport \"../../../App/App.scss\";\r\nimport \"./tour-item-dashboard-loader.scss\";\r\n\r\nimport SkeletonLoader from \"tiny-skeleton-loader-react\";\r\n\r\nconst TourItemDashboardLoader = (props) => {\r\n return (\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Véhicule {props.tour.vehicule_key ||
\r\n \r\n {props.tour?.issues_kpi?.number_of_open_issue > 0 ||\r\n props.tour?.issues_kpi?.number_of_solved_issue > 0 ? (\r\n
\r\n \r\n \r\n {props.tour?.issues_kpi?.number_of_open_issue > 0\r\n ? `Des réclamations sont ouvertes pour cette tournée. Vous pouvez les traiter en cliquant sur le bouton \"Réclamations\" en haut à droite.`\r\n : `Toutes les réclamations de cette tournée ont été traitées.`}\r\n \r\n }\r\n >\r\n \r\n 0\r\n ? faWarning\r\n : faExclamationCircle\r\n }\r\n color={\r\n props.tour?.issues_kpi?.number_of_open_issue > 0\r\n ? \"#ff1400\"\r\n : \"#5e5e5e\"\r\n }\r\n />\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default React.memo(TourItemDashboardLoader);\r\n","export default __webpack_public_path__ + \"static/media/background_decoration2x.0c3a14d1.png\";","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faBullhorn, faList } from \"@fortawesome/free-solid-svg-icons\";\r\nimport \"./dashboard-claim.scss\";\r\n\r\nconst DashboardClaim = (props) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {new Date(props.claim?.issue_created_at).toLocaleDateString(\r\n \"fr-FR\",\r\n {\r\n year: \"numeric\",\r\n month: \"short\",\r\n day: \"numeric\",\r\n hour: \"numeric\",\r\n minute: \"numeric\",\r\n }\r\n ) || \"Pas d'information de date\"}\r\n \r\n
\r\n \r\n props.solveIssueHandler(props.claim?.issue_id)}\r\n disabled={props.isLoading}\r\n >\r\n Traiter\r\n \r\n ) : (\r\n
\r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default DashboardClaim;\r\n","import React, { useEffect } from \"react\";\r\nimport { Modal } from \"react-bootstrap\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faBullhorn } from \"@fortawesome/free-solid-svg-icons\";\r\nimport bgdeco from \"../../../../assets/images/background/background_decoration2x.png\";\r\nimport chevrons from \"../../../../assets/images/decoration/chevron@2x.png\";\r\nimport \"./dashboard-claim-modal.scss\";\r\nimport SimpleBarReact from \"simplebar-react\";\r\nimport DashboardClaim from \"../dashboard-claim/dashboard-claim\";\r\n\r\nfunction DashboardClaimModal({date, issues, FetchClaimData, show, base_url, onHide}) {\r\n\r\n function SolveIssue(issueId) {\r\n const url = new URL(base_url.concat(\"/issues/\", issueId));\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify({\r\n status: \"SOLVED\",\r\n }),\r\n };\r\n\r\n fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\" && result.isIssueUpdated) {\r\n FetchClaimData();\r\n }\r\n });\r\n } else {\r\n response.json().then((result) => {\r\n console.error(\"Mauvaise réponse du réseau\", result);\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n console.error(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n }\r\n\r\n /******\r\n *\r\n * Effects\r\n *\r\n ******/\r\n\r\n useEffect(() => {\r\n if (show) {\r\n FetchClaimData();\r\n }\r\n }, [show]);\r\n\r\n return (\r\n \r\n {\" \"}\r\n {props.claim?.issue_reason_message ||\r\n \"Pas d'information sur la raison\"}\r\n
\r\n {props.status === \"open\" ? (\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Réclamations enregistrées
\r\n\r\n Retrouvez et gérez toutes les réclamations traitées ou non depuis\r\n cet écran.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n Réclamations ouvertes
\r\n\r\n
\r\n\r\n \r\n \r\n {issues?.openIssues?.length > 0 ? (\r\n issues?.openIssues?.map((claim, index) => (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n Aucune réclamation ouverte pour la date du{\" \"}\r\n {date?.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n Réclamations traitées
\r\n\r\n
\r\n \r\n \r\n {issues?.solvedIssues?.length > 0 ? (\r\n issues?.solvedIssues?.map((claim, index) => (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n Aucune réclamation traitée pour la date du{\" \"}\r\n {date?.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default React.memo(Kpi);\r\n","import React, { forwardRef } from \"react\";\r\nimport { Button } from \"react-bootstrap\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCalendarAlt } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nconst CustomDatePickerDashboard = forwardRef(({ value, onClick }, ref) => (\r\n \r\n \r\n
\r\n \r\n {props.value ?? 0}\r\n {props.title || \"kpi_title\"}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n
\r\n Tour de contrôle
\r\n\r\n Pilotez votre flotte de véhicules depuis cette page pour la date\r\n du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}\r\n .\r\n
\r\n\r\n setDate(date)}\r\n customInput={ DownloadResume(e)}\r\n disabled={\r\n isLoading || isDownloadingResume || tours?.length === 0\r\n }\r\n >\r\n {isDownloadingResume ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n history.replace({\r\n pathname: \"/restriction\",\r\n });\r\n }}\r\n >\r\n \r\n {kpi?.reserves_kpi?.open_reserves ?? 0}\r\n \r\n
\r\n\r\n \r\n setShowClaiming(true)}\r\n style={{ marginLeft: \"15px\" }}\r\n >\r\n \r\n {kpi?.issues_kpi?.open_issues ?? 0}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Véhicules en tournée\r\n \r\n {tours?.length ?? 0}\r\n \r\n
\r\n \r\n setTourStatus(e.target.value)}\r\n className=\"tour-select\"\r\n disabled={tours?.length === 0 || selectedTourID}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {tours?.length > 0 ? (\r\n <>\r\n {filteringFunction()?.length > 0 ? (\r\n filteringFunction()?.map((tour, tour_index) => {\r\n return (\r\n
\r\n )}\r\n \r\n \r\n
le filtre sélectionné\r\n \r\n \r\n Aucun véhicule n'est en tournée pour la date du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}{\" \"}\r\n avec le statut{\" \"}\r\n \r\n {\r\n tour_status?.properties[tourStatus]\r\n ?.display_name\r\n }\r\n \r\n .\r\n \r\n
\r\n )}\r\n \r\n ) : isLoading ? (\r\n <>\r\n le filtre sélectionné\r\n \r\n \r\n Aucun véhicule n'est en tournée pour la date du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}{\" \"}\r\n avec le statut{\" \"}\r\n \r\n {\r\n tour_status?.properties[tourStatus]\r\n ?.display_name\r\n }\r\n \r\n .\r\n \r\n
\r\n
*/}\r\n \r\n Aucun véhicule en tournée\r\n \r\n \r\n Aucun véhicule n'est en tournée pour la date du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}\r\n .\r\n \r\n \r\n \r\n Aller à la tournée\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Carte des étapes\r\n \r\n {tours?.length ?? 0}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n }\r\n >\r\n \r\n \r\n étapes\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n x.status === \"DELIVERED\" ||\r\n x.status === \"PARTIALLY_DELIVERED\" ||\r\n x.status === \"CANCELED\"\r\n )?.length ?? 0) /\r\n selectedTour?.vehicule_and_datas?.steps?.length) *\r\n 100\r\n }\r\n styles={buildStyles({\r\n stroke: \"#d6d6d6\",\r\n })}\r\n >\r\n {/* Put any JSX content in here that you'd like. It'll be vertically and horizontally centered. */}\r\n \r\n \r\n {selectedTour?.vehicule_and_datas?.steps?.filter(\r\n (x) =>\r\n x.status === \"DELIVERED\" ||\r\n x.status === \"PARTIALLY_DELIVERED\" ||\r\n x.status === \"CANCELED\"\r\n )?.length ?? 0}\r\n /\r\n {selectedTour?.vehicule_and_datas?.steps?.length ??\r\n \"00\"}\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n // // Permet de mock la réception d'un event du back\r\n // setFlux((_flux) => {\r\n // return [\r\n // {\r\n // _id: Math.random(0).toString(),\r\n // level: \"INFO\",\r\n // message: \"Test\",\r\n // type: \"CREATE\",\r\n // short_label: \"STEP_STARTED\",\r\n // creation_date: new Date().toISOString(),\r\n // client_id: 1,\r\n // vehicle_key: \"ABCD\",\r\n // },\r\n // ..._flux,\r\n // ];\r\n // });\r\n // }}\r\n >\r\n {isToday(new Date(date)) ? (\r\n <>\r\n
\r\n Flux en direct
\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n Flux du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}\r\n
\r\n \r\n )}\r\n \r\n setFluxStatus(e.target.value)}\r\n >\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n }\r\n >\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default BadgeColor;\r\n","import React, { useState, useContext, useRef, useEffect } from \"react\";\r\n\r\nimport { Card, OverlayTrigger, Tooltip, Button, Form } from \"react-bootstrap\";\r\nimport \"../../../App/App.scss\";\r\nimport \"./tour-item-fleet-management.scss\";\r\nimport truck from \"../../../../assets/images/optimisation/truck.png\";\r\nimport Skeleton from \"react-loading-skeleton\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faTrash, faWarning } from \"@fortawesome/free-solid-svg-icons\";\r\nimport BadgeColor from \"../platform-color-badge\";\r\n\r\nconst RenderTooltip = (props) => (\r\n \r\n PLATEFORME N° {props.platform || \"platform_id\"}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nfunction areEqual(prevProps, nextProps) {\r\n return (\r\n prevProps.vehicle.vehicule_id === nextProps.vehicle.vehicule_id &&\r\n prevProps.vehicle.vehicule_id === nextProps.vehicle.vehicule_id &&\r\n prevProps.vehicle.vehicule_id === nextProps.vehicle.vehicule_id &&\r\n prevProps.vehicle.vehicule_id === nextProps.vehicle.vehicule_id\r\n );\r\n}\r\n\r\nexport default TourItemFleetManagement;\r\n","// generate random string of 3 characters and number\r\nexport const generateRandomString = () => {\r\n let text = \"\";\r\n let possible =\r\n \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\r\n for (let i = 0; i < 3; i++) {\r\n text += possible.charAt(Math.floor(Math.random() * possible.length));\r\n }\r\n return text;\r\n};\r\n\r\nexport default generateRandomString;\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { Button, Col, Row, Modal, Card } from \"react-bootstrap\";\r\nimport \"./modal-management.scss\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faWeightHanging,\r\n faKey,\r\n faCube,\r\n faTrash,\r\n faPlusCircle,\r\n faTruck,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport imgBox from \"../../../../../assets/images/optimisation/box-img.png\";\r\nimport truck from \"../../../../../assets/images/optimisation/truck.png\";\r\nimport \"swiper/swiper-bundle.min.css\";\r\nimport \"swiper/components/navigation/navigation.scss\";\r\nimport \"swiper/components/pagination/pagination.scss\";\r\nimport \"swiper/components/scrollbar/scrollbar.scss\";\r\nimport SimpleBarReact from \"simplebar-react\";\r\nimport \"simplebar/dist/simplebar.min.css\";\r\n\r\nimport SwiperCore, { Navigation, Pagination } from \"swiper\";\r\nimport { Swiper, SwiperSlide } from \"swiper/react\";\r\nimport { v1 as uuidv1 } from \"uuid\";\r\nimport { generateRandomString } from \"../../../../../utils/string-generator\";\r\n\r\nimport { Formik, Form } from \"formik\";\r\nimport { useField } from \"formik\";\r\nimport * as Yup from \"yup\";\r\nimport BadgeColor from \"../../../../pages/FleetManagement/platform-color-badge\";\r\nimport SkeletonLoader from \"tiny-skeleton-loader-react\";\r\n\r\nSwiperCore.use([Navigation, Pagination]);\r\n\r\nconst add_truck_title_and_desc = [\r\n {\r\n title: \"Ajout d'un véhicule\",\r\n desc: \"Commencez par saisir les information générales du véhicule\",\r\n },\r\n {\r\n title: \"Ajout d'un véhicule: définition des compartiments\",\r\n desc: \"Décrire les compartiments de votre véhicule\",\r\n },\r\n {\r\n title: \"Ajout d'un véhicule: platforme associée\",\r\n desc: \"Choisissez la plateforme associée à ce véhicule\",\r\n },\r\n {\r\n title: \"Ajout d'un véhicule: confirmation\",\r\n desc: \"Vérifiez les paramètres de votre camion\",\r\n },\r\n];\r\n\r\nexport const GenericFomikTextInput = ({ children, ...props }) => {\r\n // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]\r\n // which we can spread on . We can use field meta to show an error\r\n // message if the field is invalid and it has been touched (i.e. visited)\r\n const [field, meta] = useField(props);\r\n\r\n return (\r\n \r\n 
\r\n
\r\n \r\n {props.vehicle.starting_platform_id ? (\r\n
\r\n \r\n {props.isFleetEditing ? (\r\n \r\n props.handleToggleVehicleForOptimization(props.vehicle.vehicule_id)}\r\n checked={props?.vehicle?.is_disabled === 0}\r\n />\r\n \r\n ) : null}\r\n {!props.vehicle.starting_platform_id && !props.isFleetEditing ? (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {children ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nfunction ModalAddVehicule(props) {\r\n const initialValues = {\r\n vehicle_type: props.selectedVehicle?.vehicle_type || null,\r\n imat: props.selectedVehicle?.imat || \"\",\r\n vehicule_key: props.selectedVehicle?.vehicule_key || generateRandomString(),\r\n pin: \"123456\",\r\n length: props.selectedVehicle?.length || 0,\r\n width: props.selectedVehicle?.width || 0,\r\n height: props.selectedVehicle?.height || 0,\r\n starting_platform_id: null,\r\n containers: props.selectedVehicle?.containers || [],\r\n is_disabled: props.selectedVehicle?.is_disabled || 0,\r\n };\r\n\r\n const [vehicle, setVehicle] = useState(initialValues);\r\n const [step, setStep] = useState(0);\r\n const [swiper, setSwiper] = useState(null);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState(false);\r\n\r\n const [toggleAddContainer, setToggleAddContainer] = useState(false);\r\n const [addContainerMaxWeight, setAddContainerMaxWeight] = useState(0);\r\n const [addContainerMaxVolume, setAddContainerMaxVolume] = useState(0);\r\n\r\n const goToNext = () => {\r\n if (swiper) {\r\n if (step + 1 < 4) {\r\n swiper.slideTo(step + 1);\r\n setStep(step + 1);\r\n }\r\n }\r\n };\r\n const goToPrev = () => {\r\n if (swiper) {\r\n if (step - 1 >= 0) {\r\n swiper.slideTo(step - 1);\r\n setStep(step - 1);\r\n }\r\n }\r\n };\r\n\r\n const canGoToNextStep = (values, errors) => {\r\n switch (step) {\r\n case 0:\r\n return (\r\n !values.vehicle_type ||\r\n !values.imat ||\r\n !values.vehicule_key ||\r\n !values.length ||\r\n !values.width ||\r\n !values.height\r\n );\r\n case 1:\r\n return (\r\n !values.containers ||\r\n values.containers.length === 0 ||\r\n errors.containers\r\n );\r\n case 3:\r\n return !values.starting_platform_id;\r\n default:\r\n return false;\r\n }\r\n };\r\n\r\n const addNewContainer = (containers, setFieldValue) => {\r\n const newContainers = [...containers];\r\n newContainers.push({\r\n uuid: uuidv1(),\r\n max_weight: addContainerMaxWeight,\r\n max_volume: addContainerMaxVolume,\r\n });\r\n setFieldValue(\"containers\", newContainers);\r\n setToggleAddContainer(false);\r\n resetAddContainerInput();\r\n };\r\n\r\n const deleteContainer = (key, containers, setFieldValue) => {\r\n let newContainers = [...containers];\r\n newContainers = newContainers.filter((x) => x.uuid !== key);\r\n\r\n setFieldValue(\"containers\", newContainers);\r\n setToggleAddContainer(false);\r\n resetAddContainerInput();\r\n };\r\n\r\n const resetAddContainerInput = () => {\r\n setAddContainerMaxWeight(0);\r\n setAddContainerMaxVolume(0);\r\n };\r\n\r\n const setStartingPlateformID = (_id, setFieldValue) => {\r\n if (_id) {\r\n setFieldValue(\"starting_platform_id\", _id);\r\n goToNext();\r\n }\r\n };\r\n\r\n /******\r\n *\r\n * functions\r\n *\r\n ******/\r\n\r\n const handleSubmitMethod = async (values) => {\r\n setIsLoading(true);\r\n\r\n if (props.selectedVehicle) {\r\n return await putVehicle(values);\r\n } else {\r\n return await postVehicle(values);\r\n }\r\n };\r\n\r\n const postVehicle = async (values) => {\r\n const url = new URL(props.BASE_URL + \"/vehicules\");\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n setIsLoading(true);\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = {\r\n method: \"POST\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify({\r\n ...values,\r\n }),\r\n };\r\n\r\n console.log(\"POST request @ \", props.BASE_URL + \"/vehicules\");\r\n\r\n return fetch(url, myInit)\r\n .then(async (response) => {\r\n return await response?.json();\r\n })\r\n .catch((error) => {\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n return false;\r\n });\r\n };\r\n\r\n const putVehicle = async (values) => {\r\n const url = new URL(\r\n props.BASE_URL + \"/vehicules/\" + props.selectedVehicle.vehicule_id\r\n );\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n setIsLoading(true);\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify({\r\n ...values,\r\n }),\r\n };\r\n\r\n console.log(\r\n \"PUT request @ \",\r\n props.BASE_URL + \"/vehicules/\" + props.selectedVehicle.vehicule_id\r\n );\r\n\r\n return fetch(url, myInit)\r\n .then(async (response) => {\r\n return await response?.json();\r\n })\r\n .catch((error) => {\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n return false;\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n {meta.touched && meta.error ? meta.error : null}\r\n
\r\n \r\n
\r\n \r\n
\r\n Configurations globales
\r\nGerez les configurations globales de votre flotte
\r\n\r\n setDepartTime(e.target.value)}\r\n defaultValue=\"08:00\"\r\n required />\r\n
\r\n \r\n Durée maximale d'une tournée\r\n \r\n
\r\n setMaxDuration(e.target.value)}\r\n defaultValue=\"08:00\"\r\n required />\r\n
\r\n \r\n Temps moyen par stop (en minutes)\r\n \r\n
\r\n
\r\n \r\n Nombre de km max pour une tournée\r\n \r\n
\r\n
\r\n \r\n Mode de finalisation des tournées\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n L'algorithme génère la tournée pour tous les BLs, tout les jours\r\n même si les camions ne sont pas remplis.\r\n
\r\n \r\n\r\n
\r\n {error}
\r\n\r\n
\r\n \r\n
\r\n Ajouter une nouvelle plateforme
\r\n\r\n Saisissez l'adresse de la plateforme pour l'ajouter à votre liste\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Plateforme N° {\"X\"}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {error}
\r\n\r\n \r\n {props.platforms?.length > 0 ? (\r\n <>\r\n {props.platforms.map((platform) => (\r\n
\r\n \r\n ))}\r\n \r\n ) : (\r\n \r\n \r\n
\r\n \r\n {/* \r\n
\r\n {platform.id}
\r\n \r\n
\r\n \r\n Aucune plateforme définie\r\n \r\n Ajouter une plateforme avec le bouton ci-dessous.\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default PlatformList;\r\n","import React from \"react\";\r\nimport { Modal, Button, Col, Row } from \"react-bootstrap\";\r\nimport \"./modal-onboarding.scss\";\r\n\r\nconst ModalOnBoarding = (props) => {\r\n return (\r\n \r\n {\r\n props.setModalShowAddPlatform(true);\r\n }}\r\n disabled={props.isFleetEditing}\r\n >\r\n
\r\n \r\n Démo\r\n
\r\n Tutoriel fleet optimisation
\r\n\r\n Notre tutoriel Youtube vous accompagnera dans la découverte de l'ensemble des outils proposés par l'optimisation Fleet. Suivez le guide !\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n
\r\n Définition de votre flotte
\r\nCréez, modifiez ou désactivez vos camions pour l'optimisation.
\r\n\r\n setModalHelp(true)}\r\n >\r\n setModalShowTwo(true)}\r\n disabled={\r\n isLoading || isDownloadingResume || vehicles?.length === 0 || isFleetEditing\r\n }\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Liste de vos véhicules\r\n \r\n \r\n {vehicles?.length ?? 0}\r\n \r\n
\r\n \r\n setModalShow(true)}\r\n className=\"btn-add-truck\"\r\n disabled={isLoading || isFleetEditing}\r\n >\r\n setIsFleetEditing(!isFleetEditing)}\r\n className=\"btn-add-truck ms-2\"\r\n disabled={isLoading}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n {vehicles?.length > 0 ? (\r\n <>\r\n {filteringFunction()?.length > 0 ? (\r\n filteringFunction()?.map((vehicle, vehicle_index) => {\r\n return (\r\n
\r\n )}\r\n \r\n \r\n
le filtre sélectionné\r\n \r\n \r\n Aucun véhicule n'est en tournée pour la date du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}{\" \"}\r\n avec le statut{\" \"}\r\n \r\n {\r\n tour_status?.properties[tourStatus]\r\n ?.display_name\r\n }\r\n \r\n .\r\n \r\n
\r\n )}\r\n \r\n ) : isVehiclesLoading ? (\r\n <>\r\n le filtre sélectionné\r\n \r\n \r\n Aucun véhicule n'est en tournée pour la date du{\" \"}\r\n {date.toLocaleDateString(\"fr-FR\", {\r\n weekday: \"long\",\r\n year: \"numeric\",\r\n month: \"long\",\r\n day: \"numeric\",\r\n })}{\" \"}\r\n avec le statut{\" \"}\r\n \r\n {\r\n tour_status?.properties[tourStatus]\r\n ?.display_name\r\n }\r\n \r\n .\r\n \r\n
\r\n
*/}\r\n \r\n Aucun véhicule défini.\r\n \r\n \r\n Vous devez définir un véhicule pour le voir ici.\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Plateformes de départ\r\n \r\n
\r\n \r\n {platforms?.length ?? 0}\r\n \r\n \r\n Définissez simplement vos différentes plateformes de\r\n départ\r\n
\r\n\r\n \r\n
\r\n }\r\n >\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Item;\r\n","import React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faComment,\r\n faList,\r\n faStickyNote,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { Card } from \"react-bootstrap\";\r\nimport \"./Bl.css\";\r\n\r\nimport inArrow from \"./BlAssets/in_arrow_v2.png\";\r\nimport outArrow from \"./BlAssets/out_arrow.png\";\r\n\r\nimport pictoPhoto from \"./BlAssets/photo.png\";\r\nimport pictoSign from \"./BlAssets/sign.png\";\r\nimport pictoSignDisabled from \"./BlAssets/signDisabled.png\";\r\nimport Item from \"../Item/Item\";\r\n\r\nexport class Bl extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {};\r\n }\r\n\r\n render() {\r\n let blImgArrow;\r\n let pictoPhotoPlaceholder;\r\n let pictoSignPlaceholder;\r\n\r\n if (this.props.bl.delivery_type === \"OUT\") {\r\n blImgArrow = (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n x\r\n {this.props.item.quantity\r\n ? this.props.item.quantity\r\n : \"qtt introuvable\"}\r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.bl?.items?.map((value, index) => {\r\n return \r\n
\r\n \r\n {this.props.bl.proofs && this.props.bl.proofs?.length > 0\r\n ? this.props.bl.proofs.map((proof, index) => {\r\n return (\r\n <>\r\n {this.props.bl.proofs?.length > 1 ? (\r\n {`${\r\n proof.doc_type === \"PROOF_SIGN\"\r\n ? \"Signature\"\r\n : \"Photo\"\r\n } ${index + 1}`}\r\n ) : null}\r\n\r\n
\r\n \r\n
\r\n \r\n );\r\n })\r\n : null}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {blImgArrow}\r\n
\r\n {this.props.bl.status === \"CANCELED\" ? (\r\n \r\n \r\n
\r\n \r\n {`Receveurs : ${\r\n this.props.bl.receiver1 ? this.props.bl.receiver1 : \"\"\r\n } ${\r\n this.props.bl.receiver2 ? this.props.bl.receiver2 : \"\"\r\n }`}\r\n
\r\n ) : null}\r\n \r\n
\r\n {pictoPhotoPlaceholder}
\r\n {pictoSignPlaceholder}
\r\n \r\n \r\n
\r\n);\r\n\r\nexport const MyStepLoader = (props) => (\r\n \r\n \r\n
\r\n);\r\n\r\nexport const MyBLLoader = (props) => (\r\n \r\n
\r\n);\r\n\r\nexport default MyLoader;\r\n","import React, { Component, useContext } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faCaretRight,\r\n faWeightHanging,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { AccordionContext } from \"react-bootstrap\";\r\n\r\nimport { Card, Badge, Accordion, useAccordionButton } from \"react-bootstrap\";\r\n\r\nimport \"../App/App.scss\";\r\nimport \"./Step.css\";\r\nimport box from \"./box.png\";\r\nimport inImg from \"./StepAssets/in_v2.png\";\r\nimport invalidImg from \"./StepAssets/in.png\";\r\nimport outImg from \"./StepAssets/out.png\";\r\nimport inOutImg from \"./StepAssets/in_out_v2.png\";\r\n\r\nimport { Bl } from \"../Bl/Bl\";\r\nimport StatusComponent from \"../StatusComponent/StatusComponent\";\r\nimport { setBlsForATour } from \"../../reducer/Action\";\r\nimport connect from \"react-redux/es/connect/connect\";\r\nimport { MyBLLoader } from \"../Loader/MyLoader\";\r\n\r\nimport pictoPhotoDisabled from \"../Bl/BlAssets/photoDisabled.png\";\r\nimport pictoPhoto from \"../Bl/BlAssets/photo.png\";\r\nimport pictoSign from \"../Bl/BlAssets/sign.png\";\r\nimport pictoSignDisabled from \"../Bl/BlAssets/signDisabled.png\";\r\nimport pictoCommentDisabled from \"./StepAssets/icon_comment_disabled.png\";\r\nimport pictoComment from \"./StepAssets/icon_comment.png\";\r\nimport informationPicto from \"./StepAssets/information.png\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nfunction CustomToggle({ children, eventKey, searchTourId, activeId, setActiveId }) {\r\n const history = useHistory()\r\n const decoratedOnClick = useAccordionButton(eventKey, () => {\r\n if(searchTourId){\r\n if (activeId === eventKey) {\r\n history.push(\"/tour?tour_id=\"+searchTourId)\r\n setActiveId && setActiveId(null)\r\n } else {\r\n history.push(\"/tour?tour_id=\"+searchTourId+\"&step_id=\"+eventKey)\r\n setActiveId && setActiveId(eventKey)\r\n }\r\n }\r\n else{\r\n history.push(\"/tour\")\r\n setActiveId && setActiveId(null)\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {\r\n this.handleStepCollapse(\r\n e,\r\n this.props.step.step_id,\r\n this.props.step.tour_id\r\n );\r\n }}\r\n >\r\n
\r\n \r\n \r\n
\r\n {imgComponent}
\r\n \r\n \r\n {this.props.step.end_address?.name || \"Étape invalide\"}{\" \"}\r\n
\r\n \r\n
\r\n \r\n {this.props.stepsNumber}\r\n
\r\n \r\n {commentComponent}\r\n {pictoComponent}\r\n
\r\n \r\n
\r\n \r\n 
\r\n \r\n {this.props.step.comments\r\n ? this.props.step.comments\r\n : \"Pas de commentaire de livraison pour cette étape.\"}\r\n \r\n
\r\n\r\n \r\n \r\n Liste des BL(s){\" \"}\r\n
\r\n
\r\n\r\n \r\n Liste des BL(s){\" \"}\r\n \r\n {this.state?.localBls ? this.state?.localBls.length : 0}\r\n \r\n
\r\n \r\n {this.state.isLoading ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {this.props?.step.step_id &&\r\n this.state?.localBls?.length > 0 &&\r\n this.state?.localBls?.map((value, index) => {\r\n return (\r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n }\r\n}\r\n\r\nexport default React.memo(StepList);\r\n","import hoistStatics from \"hoist-non-react-statics\";\r\nimport React from \"react\";\r\n\r\n/**\r\n * Allows two animation frames to complete to allow other components to update\r\n * and re-render before mounting and rendering an expensive `WrappedComponent`.\r\n */\r\nexport default function deferComponentRender(WrappedComponent) {\r\n class DeferredRenderWrapper extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = { shouldRender: false };\r\n }\r\n\r\n componentDidMount() {\r\n window.requestAnimationFrame(() => {\r\n window.requestAnimationFrame(() =>\r\n this.setState({ shouldRender: true })\r\n );\r\n });\r\n }\r\n\r\n render() {\r\n return this.state.shouldRender ? (\r\n Aucune étape n'est associée à cette tournée.
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default React.memo(TourItem);\r\n","export default __webpack_public_path__ + \"static/media/earth.ee84810d.png\";","export default __webpack_public_path__ + \"static/media/truck.7e6280e2.png\";","import React, { Component } from \"react\";\r\n\r\nimport \"./EmptyListComponent.css\";\r\nimport \"../App/App.scss\";\r\nimport componentImg from \"./earth.png\";\r\nimport componentImg2 from \"./truck.png\";\r\n\r\nimport { setStepsForATour, setTours } from \"../../reducer/Action\";\r\nimport connect from \"react-redux/es/connect/connect\";\r\n\r\nexport class EmptyListComponent extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n //this.setState((state, props) => ({\r\n // isActive: props.isActive,\r\n // status: props.status\r\n //}));\r\n }\r\n\r\n componentWillUnmount() {}\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Tournée n°{props.tour.tour_key || \"tour_key\"} - importée à {getCreationDate(props.tour.creation_date)}\r\n \r\n \r\n Véhicule {props.tour.vehicule_key ||
\r\n \r\n \r\n Livraisons\r\n \r\n \r\n {props?.tour?.steps?.reduce((acc, val) => val.status == \"DELIVERED\" ? acc + 1 : acc, 0)} sur {props?.tour?.steps?.length}\r\n \r\n
\r\n \r\n \r\n Ponctualité\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {statusTag(props.tour.status)}\r\n
\r\n \r\n
\r\n \r\n\r\n \r\n Détails\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state /*, ownProps*/) => {\r\n return {\r\n BASE_URL: state.BASE_URL,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = { setStepsForATour };\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(EmptyListComponent);\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\nimport { Accordion, AccordionContext } from \"react-bootstrap\";\r\n\r\nimport \"../App/App.scss\";\r\nimport TourItem from \"../TourItem/TourItem\";\r\nimport { EmptyListComponent } from \"../EmptyListComponent/EmptyListComponent\";\r\nimport MyLoader from \"../Loader/MyLoader\";\r\nimport SkeletonLoader from \"tiny-skeleton-loader-react\";\r\n\r\nfunction Accccordion(props) {\r\n let lastDate;\r\n const [activeId, setActiveId] = useState(null);\r\n const [searchTourId, setSearchTourId] = useState(null);\r\n const [searchStepId, setSearchStepId] = useState(null);\r\n\r\n useEffect(() => {\r\n if (props.exactMatch) {\r\n setActiveId(props.exactMatch);\r\n }\r\n }, [props.exactMatch]);\r\n\r\n useEffect(() => {\r\n const url = new URL(window.location.href)\r\n const searchParams = new URLSearchParams(url.search)\r\n if(searchParams.get(\"tour_id\")){\r\n setSearchTourId(searchParams.get(\"tour_id\"))\r\n }\r\n if(searchParams.get(\"step_id\")){\r\n setSearchStepId(searchParams.get(\"step_id\"))\r\n }\r\n }, [])\r\n \r\n return (\r\n \r\n
\r\n \r\n Pas de {this.props.type} disponible.\r\n
\r\n \r\n {this.props.type === \"véhicule\" ? \"Aucun\" : \"Aucune\"}{\" \"}\r\n {this.props.type} correpondant à votre recherche n'a été trouvée.\r\n
\r\n \r\n \r\n {props.tours.map((value, index) => {\r\n if (lastDate !== value.starting_date) {\r\n lastDate = value.starting_date;\r\n return (\r\n
\r\n );\r\n}\r\n\r\nfunction TourItemList(props) {\r\n //const DeferredTimeline = deferComponentRender(Accccordion);\r\n\r\n if (props.tours?.length > 0) {\r\n return \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n {new Date(value.starting_date).toLocaleDateString(\"fr-FR\", {\r\n day: \"numeric\",\r\n month: \"short\",\r\n year: \"numeric\",\r\n })}\r\n
\r\n\r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n }\r\n}\r\n\r\nexport default React.memo(TourItemList);\r\n","export function computeTourStatus(rawStatus) {\r\n let resultStatus = \"\";\r\n switch (rawStatus) {\r\n case \"CREATED\":\r\n case \"STARTED\":\r\n case \"DONE\":\r\n resultStatus = \"ok\";\r\n break;\r\n case \"LATE\":\r\n resultStatus = \"late\";\r\n break;\r\n case \"ISSUE\":\r\n resultStatus = \"issue\";\r\n break;\r\n default:\r\n resultStatus = \"\";\r\n break;\r\n }\r\n return resultStatus;\r\n}\r\n\r\nexport function computeTourSortStatusname(rawStatus) {\r\n let resultStatus = \"\";\r\n switch (rawStatus) {\r\n case \"asc\":\r\n resultStatus = \"Ascendant\";\r\n break;\r\n case \"desc\":\r\n resultStatus = \"Descendant\";\r\n break;\r\n default:\r\n resultStatus = \"\";\r\n break;\r\n }\r\n return resultStatus;\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faFilter, faSort, faTrash } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nimport { Row, Col, Button, Dropdown, Spinner } from \"react-bootstrap\";\r\n\r\nimport memoize from \"memoize-one\";\r\n\r\nimport \"../../App/App.scss\";\r\nimport \"./Tour.css\";\r\n\r\nimport TourItemList from \"../../TourItemList/TourItemList\";\r\nimport connect from \"react-redux/es/connect/connect\";\r\nimport { tour_status } from \"../../../constants/tour_status\";\r\nimport { computeTourSortStatusname } from \"../../../utils/tours\";\r\n\r\nexport class Tour extends Component {\r\n /*******\r\n *\r\n * States\r\n *\r\n *******/\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filterByID: null,\r\n isFiltering: true,\r\n isOrdering: true,\r\n isSorting: true,\r\n isLoading: false, // initial loading tours\r\n isLoadingMore: false, // loading more tours\r\n isLoadingSearch: false, // loading tour after user type in the search bar\r\n order: {\r\n displayName: computeTourSortStatusname(\"desc\"),\r\n status: \"desc\",\r\n },\r\n filter: {\r\n displayName: tour_status?.properties[\"all\"]?.display_name,\r\n status: \"all\",\r\n },\r\n localTours: [],\r\n localToursCount: 0,\r\n endDate: null,\r\n isReachingEnd: false,\r\n searchValue: \"\",\r\n isTyping: false,\r\n exactMatch: null,\r\n usedBlID: false,\r\n };\r\n }\r\n\r\n /*******\r\n *\r\n * Lifecycle\r\n *\r\n *******/\r\n async componentDidMount() {\r\n this.timer = null;\r\n\r\n //get the tour by id if contained in the url\r\n const { match } = this.props;\r\n\r\n // get all steps for each tour\r\n this.handleChangeSort(null, \"desc\");\r\n\r\n //set the correct status filter if contained in the url\r\n if (this.props.status == null) {\r\n this.handleChange(null, tour_status.ALL);\r\n } else {\r\n this.handleChange(null, this.props.status);\r\n }\r\n this.fetchToursAndFilter(match?.params?.id ? match.params.id : null);\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState, snapshot) {\r\n if (this.props?.match?.params?.id !== prevProps?.match?.params?.id) {\r\n this.fetchToursAndFilter(\r\n this.props?.match?.params?.id ? this.props?.match.params.id : null\r\n );\r\n }\r\n\r\n if (this.state.localTours !== prevState.localTours) {\r\n this.setState({\r\n localToursCount: this.state.localTours?.length || 0,\r\n });\r\n }\r\n if (\r\n this.state.order?.status !== prevState.order?.status ||\r\n this.state.filter?.status !== prevState.filter?.status\r\n ) {\r\n this.filteringFunction(this.state.filter, this.state.order);\r\n }\r\n\r\n if (\r\n this.props.location?.state?.blId &&\r\n this.props.location?.state?.blId !== this.state.searchValue &&\r\n !this.state.usedBlID\r\n ) {\r\n this.setState({ usedBlID: true });\r\n this.handleSearchBar(this.props.location?.state?.blId);\r\n }\r\n }\r\n\r\n /*******\r\n *\r\n * Methods\r\n *\r\n *******/\r\n\r\n async fetchToursAndFilter(_id) {\r\n this.setState({\r\n isLoading: true,\r\n });\r\n if (!_id) {\r\n await this.getTourFilter(); // this will get all tours dates for pagination purpose and store it in \"filters\" state\r\n await this.getTourPaginated(); // get all tours corresponding to the stored dates and store them to localTours state\r\n } else {\r\n await this.getTourByID(_id);\r\n }\r\n\r\n setTimeout(() => this.setState({ isLoading: false }), 100);\r\n }\r\n\r\n getTourByID = (_id) => {\r\n let loadingState = {\r\n isLoadingMore: true,\r\n isReachingEnd: false,\r\n };\r\n\r\n this.setState(loadingState);\r\n\r\n const url = new URL(\"/tours/\" + _id, this.props.BASE_URL);\r\n\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n console.log(\"GET request @ \", url.toString());\r\n return fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n // otherwise, set the result as first page index\r\n this.setState((prevState, props) => ({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n localTours: [result.tour] || [],\r\n isReachingEnd: true,\r\n filterByID: true,\r\n }));\r\n } else if (result.status === \"Failed\") {\r\n this.setState({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n localTours: [],\r\n filterByID: true,\r\n });\r\n } else {\r\n this.setState({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n filterByID: true,\r\n });\r\n }\r\n });\r\n } else {\r\n this.setState({\r\n isLoadingSearch: false,\r\n isLoadingMore: false,\r\n filterByID: true,\r\n });\r\n console.log(\"Mauvaise réponse du réseau\");\r\n response.json().then(function (result) {\r\n console.log(\"result\", result);\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n filterByID: true,\r\n });\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n };\r\n\r\n getTourPaginated = () => {\r\n let loadingState = {\r\n isLoadingMore: true,\r\n isReachingEnd: false,\r\n exactMatch: null,\r\n };\r\n\r\n // this will permit to show an indicator that the search query is loading\r\n if (this.state.searchValue !== \"\") {\r\n loadingState[\"isLoadingSearch\"] = true;\r\n }\r\n\r\n this.setState(loadingState);\r\n\r\n let params = {\r\n date: this.state.endDate\r\n ? this.state.endDate\r\n : new Date().toISOString().slice(0, 10),\r\n };\r\n\r\n // if the user is searching, we need to add the search value to the params\r\n if (this.state.searchValue !== \"\") {\r\n params[\"query\"] = this.state.searchValue;\r\n params[\"fieldToSearch\"] = \"blKey\";\r\n }\r\n\r\n // if the user is filtering, we need to add the filtering status to the params\r\n if (this.state.filter?.status && this.state.filter?.status !== \"all\") {\r\n params[\"statusFilter\"] = this.state.filter?.status.toUpperCase();\r\n }\r\n\r\n // if the user is ordering, we need to add the ordering status to the params\r\n if (this.state.order?.status) {\r\n params[\"order\"] = this.state.order?.status.toUpperCase();\r\n }\r\n\r\n const url = new URL(\"/tours\", this.props.BASE_URL);\r\n\r\n // append GET params to url\r\n for (let x in params) {\r\n url.searchParams.append(x, params[x]);\r\n }\r\n\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n // console.log(\"GET request @ \", url.toString());\r\n return fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n let actualDateIndex = null;\r\n\r\n // get the index of the actual date in the filters array\r\n if (this.state.filters) {\r\n actualDateIndex = this.state.filters.indexOf(\r\n this.state.endDate\r\n );\r\n }\r\n\r\n // if the page index is not the first one or undefined, append the result data to the list\r\n if (actualDateIndex !== -1 && actualDateIndex !== 0) {\r\n this.setState((prevState, props) => ({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n localTours: [...prevState.localTours, ...result.tours],\r\n filterByID: null,\r\n }));\r\n } else {\r\n // otherwise, set the result as first page index\r\n this.setState((prevState, props) => ({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n localTours: result.tours || [],\r\n filterByID: null,\r\n }));\r\n // if the index is the last one, set isReachingEnd to true\r\n if (\r\n !this.state.isReachingEnd &&\r\n actualDateIndex + 1 >= this.state.filters.length - 1\r\n ) {\r\n this.setState({\r\n isReachingEnd: true,\r\n });\r\n\r\n // if there is only one result & the search query is not empty, set exactMatch to true\r\n if (result.tours?.length === 1 && params.query) {\r\n this.setState({\r\n exactMatch: result.tours[0].tour_id,\r\n });\r\n }\r\n }\r\n }\r\n } else if (result.status === \"Failed\") {\r\n this.setState({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n localTours: [],\r\n filterByID: null,\r\n });\r\n } else {\r\n this.setState({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n filterByID: null,\r\n });\r\n }\r\n });\r\n } else {\r\n this.setState({\r\n isLoadingSearch: false,\r\n isLoadingMore: false,\r\n filterByID: null,\r\n });\r\n console.log(\"Mauvaise réponse du réseau\");\r\n response.json().then(function (result) {\r\n // console.log(\"result\", result);\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoadingMore: false,\r\n isLoadingSearch: false,\r\n });\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n };\r\n\r\n getTourFilter() {\r\n let _params = {};\r\n\r\n // this will permit to show an indicator that the search query is loading\r\n if (this.state?.searchValue !== \"\") {\r\n _params = {\r\n query: this.state?.searchValue,\r\n };\r\n }\r\n\r\n // if the user is filtering, we need to add the fitlering status to the params\r\n if (this.state.filter?.status && this.state.filter?.status !== \"all\") {\r\n _params[\"statusFilter\"] = this.state.filter?.status.toUpperCase();\r\n }\r\n\r\n // if the user is ordering, we need to add the ordering status to the params\r\n if (this.state.order?.status) {\r\n _params[\"order\"] = this.state.order?.status.toUpperCase();\r\n }\r\n\r\n const url = new URL(\"/filters\", this.props.BASE_URL);\r\n for (let x in _params) {\r\n url.searchParams.append(x, _params[x]);\r\n }\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n if (this.state.localTours.length === 0) {\r\n this.setState({\r\n isLoadingMore: true,\r\n });\r\n }\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n console.log(\"GET request @ \", url.toString());\r\n return fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n return response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n this.setState((prevState, props) => ({\r\n filters: result?.filters?.dates,\r\n endDate:\r\n result?.filters?.dates && result?.filters?.dates[0]\r\n ? result?.filters?.dates[0]\r\n : null,\r\n startDate:\r\n result?.filters?.dates && result?.filters?.dates[0]\r\n ? result?.filters?.dates[0]\r\n : null,\r\n }));\r\n return { filters: result?.filters?.dates };\r\n //this.props.setTours(result.tours);\r\n }\r\n });\r\n } else {\r\n console.log(\"Mauvaise réponse du réseau\");\r\n response.json().then(function (result) {\r\n console.log(\"result\", result);\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n }\r\n\r\n filteringFunction = memoize(async (filter, order) => {\r\n this.fetchToursAndFilter();\r\n });\r\n\r\n /*******\r\n *\r\n * Handlers\r\n *\r\n *******/\r\n\r\n seeMoreHandler() {\r\n // incremente l'index et la end_date ssi il existe\r\n let actualDateIndex = null;\r\n\r\n // get the index of the actual date in the filters array\r\n if (this.state.filters) {\r\n actualDateIndex = this.state.filters.indexOf(this.state.endDate);\r\n }\r\n // if the index is not the last one or second to last, increment it, else set isReachingEnd to true\r\n if (actualDateIndex !== -1 && this.state.filters) {\r\n if (actualDateIndex + 1 <= this.state.filters.length - 1) {\r\n this.setState(\r\n {\r\n endDate: this.state.filters[actualDateIndex + 1],\r\n },\r\n () => {\r\n this.getTourPaginated();\r\n }\r\n );\r\n } else {\r\n if (!this.state.isReachingEnd) {\r\n this.setState({\r\n isReachingEnd: true,\r\n });\r\n }\r\n }\r\n\r\n // if the index is the last one, set isReachingEnd to true\r\n if (\r\n !this.state.isReachingEnd &&\r\n actualDateIndex + 1 >= this.state.filters.length - 1\r\n ) {\r\n this.setState({\r\n isReachingEnd: true,\r\n });\r\n }\r\n }\r\n }\r\n\r\n handleChangeSort(e, _status) {\r\n this.setState({\r\n order: {\r\n displayName: computeTourSortStatusname(_status),\r\n status: _status,\r\n },\r\n isOrdering: true,\r\n });\r\n }\r\n\r\n handleChange(e, _status) {\r\n this.setState({\r\n filter: {\r\n displayName: tour_status?.properties[_status]?.display_name,\r\n status: _status,\r\n },\r\n isFiltering: _status !== tour_status.ALL,\r\n });\r\n }\r\n\r\n handleSearchBar(value) {\r\n // const target = e.target;\r\n // const value = target.value;\r\n\r\n clearTimeout(this.timer);\r\n\r\n this.setState({\r\n searchValue: value,\r\n isTyping: true,\r\n });\r\n\r\n this.timer = setTimeout(async () => {\r\n this.setState({\r\n isTyping: false,\r\n });\r\n\r\n if (value === \"\") {\r\n this.setState(\r\n {\r\n localTours: [],\r\n endDate:\r\n this.state.filters && this.state.filters[0]\r\n ? this.state.filters[0]\r\n : new Date().toISOString().slice(0, 10),\r\n },\r\n () => {\r\n this.fetchToursAndFilter();\r\n }\r\n );\r\n } else {\r\n this.fetchToursAndFilter();\r\n }\r\n }, 600);\r\n\r\n this.setState({ searchValue: value });\r\n }\r\n\r\n handleDeleteTourByIDFilter() {\r\n this.setState({\r\n filterByID: false,\r\n });\r\n this.props.history.push(\"/tour\");\r\n\r\n this.fetchToursAndFilter();\r\n }\r\n\r\n /*******\r\n *\r\n * Render\r\n *\r\n *******/\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n Liste des tournées
\r\n \r\n {this.state.localToursCount}\r\n \r\nRetrouvez la liste de vos tournées et leurs détails.
\r\n\r\n
\r\n \r\n \r\n {this.state.filterByID ? (\r\n this.handleDeleteTourByIDFilter()}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n this.handleChange(e, tour_status.ALL)\r\n }\r\n >\r\n {\r\n tour_status?.properties[tour_status.ALL]\r\n ?.display_name\r\n }\r\n \r\n \r\n this.handleChange(e, tour_status.CREATED)\r\n }\r\n >\r\n {\r\n tour_status?.properties[tour_status.CREATED]\r\n ?.display_name\r\n }\r\n \r\n \r\n this.handleChange(e, tour_status.STARTED)\r\n }\r\n >\r\n {\r\n tour_status?.properties[tour_status.STARTED]\r\n ?.display_name\r\n }\r\n \r\n \r\n this.handleChange(e, tour_status.ISSUE)\r\n }\r\n >\r\n {\r\n tour_status?.properties[tour_status.ISSUE]\r\n ?.display_name\r\n }\r\n \r\n \r\n this.handleChange(e, tour_status.DONE)\r\n }\r\n >\r\n {\r\n tour_status?.properties[tour_status.DONE]\r\n ?.display_name\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n ) : null}\r\n \r\n \r\n \r\n \r\n this.handleChangeSort(e, \"asc\")}\r\n >\r\n Ascendant\r\n \r\n this.handleChangeSort(e, \"desc\")}\r\n >\r\n Descendant\r\n \r\n \r\n \r\n
\r\n \r\n this.handleSearchBar(e.target.value)}\r\n placeholder=\"Rechercher par n° de BL...\"\r\n className=\"fleet-search-tour\"\r\n disabled={this.state.filterByID}\r\n />\r\n {this.state.isTyping || this.state.isLoadingSearch ? (\r\n
\r\n \r\n \r\n this.seeMoreHandler()}\r\n disabled={\r\n this.state.isReachingEnd ||\r\n this.state.isLoadingMore ||\r\n this.state.isLoading ||\r\n this.state.localTours?.length === 0\r\n }\r\n >\r\n {this.state.isReachingEnd\r\n ? \"Plus de tournées\"\r\n : this.state.isLoadingMore\r\n ? \"Chargement...\"\r\n : \"Voir +\"}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n Camion {this.props.vehicle.vehicule_key}{\" \"}\r\n \r\n \r\n Immat. {\" \"}\r\n {this.props.vehicle.imat ? this.props.vehicle.imat : \"XXXXXXX\"}\r\n \r\n
\r\n \r\n \r\n Livraisons totales\r\n \r\n \r\n {this.props.vehicle.total_steps}\r\n \r\n
\r\n {/* \r\n \r\n Distance totale\r\n \r\n \r\n nc\r\n \r\n
*/}\r\n {/* \r\n \r\n Carbon (CO2)
*/}\r\n \r\n \r\n Ponctualité\r\n \r\n \r\n
\r\n \r\n \r\n Dernière tournée\r\n \r\n \r\n {new Date(this.props.vehicle.last_tour_date).toLocaleDateString()}\r\n \r\n
\r\n \r\n
\r\n \r\n {new Date(this.props.vehicle.last_tour_date).toLocaleDateString() == new Date().toLocaleDateString() ? \"En route\" : \"Non actif\"}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state /*, ownProps*/) => {\r\n return {\r\n BASE_URL: state.BASE_URL,\r\n vehicles: state.vehicles,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = { setVehiclePin };\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(VehicleItem);\r\n","import React, { Component } from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport {\r\n faTimes,\r\n faSearch,\r\n faEdit,\r\n faInfo,\r\n} from \"@fortawesome/free-solid-svg-icons\";\r\nimport { setVehicles } from \"../../../reducer/Action\";\r\n\r\nimport { Container, Row, Col } from \"react-bootstrap\";\r\n\r\nimport \"../../App/App.scss\";\r\nimport \"./Vehicle.css\";\r\nimport VehicleItem from \"../../VehicleItem/VehicleItem\";\r\nimport connect from \"react-redux/es/connect/connect\";\r\nimport { Step } from \"../../Step/Step\";\r\nimport MyLoader from \"../../Loader/MyLoader\";\r\nimport { EmptyListComponent } from \"../../EmptyListComponent/EmptyListComponent\";\r\n\r\nexport class Vehicle extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: false,\r\n };\r\n }\r\n\r\n getVehicles = () => {\r\n const url = new URL(this.props.BASE_URL + \"/vehicules\");\r\n const token = localStorage.getItem(\"fleetToken\");\r\n\r\n if (this.props.vehicles?.length === 0) {\r\n this.setState({\r\n isLoading: true,\r\n });\r\n }\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = { method: \"GET\", headers: myHeaders, cache: \"no-cache\" };\r\n\r\n // console.log(\"GET request @ \", this.props.BASE_URL + \"/vehicules\");\r\n\r\n fetch(url, myInit)\r\n .then((response) => {\r\n if (response.ok) {\r\n response.json().then((result) => {\r\n if (result.status === \"Success\") {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n this.props.setVehicles(result.vehicules);\r\n }\r\n });\r\n } else {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n console.log(\"Mauvaise réponse du réseau\");\r\n response.json().then(function (result) {\r\n console.log(\"result\", result);\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n isLoading: false,\r\n });\r\n console.log(\r\n \"Il y a eu un problème avec l'opération fetch: \" + error.message\r\n );\r\n });\r\n };\r\n\r\n componentDidMount() {\r\n this.getVehicles();\r\n }\r\n\r\n render() {\r\n if (this.props.vehicles?.length > 0) {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Code PIN
\r\n \r\n \r\n \r\n this.handlePinChange(\r\n e,\r\n this.props.vehicle.vehicule_id\r\n )\r\n }\r\n maxLength={\"6\"}\r\n defaultValue={this.props.vehicle.pin}\r\n />\r\n \r\n Nombre à 6 chiffres utilisé pour la connexion des\r\n livreurs.\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n Flotte de véhicule
\r\n \r\n {this.props.vehicles ? this.props.vehicles.length : 0}\r\n \r\n\r\n Retrouvez la liste de vos véhicules et modifiez leur code pin.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n Flotte de véhicule
\r\n \r\n {this.props.vehicles ? this.props.vehicles.length : 0}\r\n \r\n\r\n Retrouvez la liste de vos véhicules et modifiez leur code\r\n pin.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state /*, ownProps*/) => {\r\n return {\r\n BASE_URL: state.BASE_URL,\r\n vehicles: state.vehicles,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = { setVehicles };\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Vehicle);\r\n","import React, { Component } from \"react\";\r\nimport { ButtonGroup, Button } from \"react-bootstrap\";\r\n\r\nexport class ClientFilters extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tvalidClients: [],\r\n\t\t};\r\n\t}\r\n\r\n\tcomponentDidUpdate(prevProps) {\r\n\t\tif (prevProps.invoicesPerClients !== this.props.invoicesPerClients) {\r\n\t\t\tthis.setState({\r\n\t\t\t\tvalidClients: this.props.invoicesPerClients.filter(client => {\r\n\t\t\t\t\treturn client.invoices.length > 0\r\n\t\t\t\t})\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n\t\r\n\trender() {\r\n\t\treturn this.state.validClients.length > 1\r\n\t\t\t? (<>\r\n\t\t\t\t\t\r\n \r\n \r\n
\r\n \r\n ) : !isLoading ? (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Admin;\r\n","export const reserve_status = {\r\n CREATED: \"CREATED\",\r\n SOLVED: \"SOLVED\",\r\n properties: {\r\n CREATED: {\r\n display_name: \"À traiter\",\r\n color: \"#FA983A\",\r\n },\r\n SOLVED: {\r\n display_name: \"Traitée\",\r\n color: \"#6B6B6B\",\r\n },\r\n },\r\n};\r\n","import './CardContract.css'\r\nimport { truncateString } from '../../../../utils/truncate-string';\r\nimport { reserve_status } from '../../../../constants/reserve_status'\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faClipboard } from \"@fortawesome/free-regular-svg-icons\";\r\n\r\nconst CardContract = ({ noBorderBottom, onHandleReserveClick, reserve }) => {\r\n return (\r\n \r\n
\r\n \r\n {invoicesFiltered?.length > 0 && !isLoading ? (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n Administration
\r\nConsultez le détail de vos factures.
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n | Période | \r\nVéhicules actifs | \r\nAbonnement | \r\nEmail envoyés | \r\nSMS envoyés | \r\nCoût SMS | \r\nTOTAL FACTURE | \r\n {/*Facture | */}\r\n
|---|---|---|---|---|---|---|---|
| {periode} | \r\n{invoice.vehicle_count} | \r\n{parseFloat(vehiculeAmount).toFixed(2)} € HT | \r\n{invoice.email_count} | \r\n{invoice.sms_count} | \r\n{parseFloat(smsAmount).toFixed(2)} € HT | \r\n{parseFloat(totalAmount).toFixed(2)} € HT | \r\n {/*\r\n {\" \"}\r\n {invoice.invoice_url ? (\r\n | */}\r\n
\r\n Veuillez d'abord sélectionner un client à visualiser !\r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Message\r\n \r\n \r\n {reserve?.message?.length > 0 ? `${truncateString(reserve.message, 20)}`: \"Message non défini\"}\r\n \r\n
\r\n \r\n \r\n Destinataire \r\n \r\n \r\n {reserve?.receiver_name ? reserve.receiver_name : \"n.c\"}\r\n \r\n
\r\n \r\n \r\n Provenance\r\n \r\n \r\n {reserve?.type || \"n.c\"}\r\n \r\n
\r\n \r\n \r\n {reserve_status.properties[reserve?.status]?.display_name}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CardContract;\r\n","export function truncateString(str, num) {\r\n // If the length of str is less than or equal to num\r\n // just return str--don't truncate it.\r\n if (str.length <= num) {\r\n return str;\r\n }\r\n // Return str truncated with '...' concatenated to the end of str.\r\n return str.slice(0, num) + \"...\";\r\n}\r\n","import './CardsContractLoader.css'\r\n\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faClipboard } from \"@fortawesome/free-regular-svg-icons\";\r\nimport SkeletonLoader from \"tiny-skeleton-loader-react\";\r\n\r\nconst CardContract = ({ noBorderBottom}) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default CardContract;\r\n","import React, {useState, useEffect} from 'react'\r\nimport Pagination from \"react-bootstrap/Pagination\";\r\nimport \"./Pagination.css\"\r\nexport default function PaginationComponent(props) {\r\n\r\n const LEFT_PAGE = \"LEFT\";\r\n const RIGHT_PAGE = \"RIGHT\";\r\n const [totalRecords, setTotalRecords] = useState(null);\r\n const [totalPages, setTotalPages] = useState(null);\r\n const [pageLimit, setPageLimit] = useState(30);\r\n const [pageNeighbours, setPageNeighbours] = useState(0);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n\r\n\r\n useEffect(() => {\r\n setPageLimit(typeof props.pageLimit === \"number\" ? props.pageLimit : 30);\r\n setTotalRecords(typeof props.totalRecords === \"number\" ? props.totalRecords : 0);\r\n setPageNeighbours(\r\n typeof props.pageNeighbours === \"number\"\r\n ? Math.max(0, Math.min(props.pageNeighbours, 2))\r\n : 0\r\n );\r\n setTotalPages(Math.ceil(props.totalRecords / props.pageLimit));\r\n }, [props.pageLimit, props.pageNeighbours, props.totalRecords]);\r\n\r\n /**\r\n * Helper method for creating a range of numbers\r\n * range(1, 5) => [1, 2, 3, 4, 5]\r\n */\r\n const range = (from, to, step = 1) => {\r\n let i = from;\r\n const range = [];\r\n\r\n while (i <= to) {\r\n range.push(i);\r\n i += step;\r\n }\r\n\r\n return range;\r\n };\r\n\r\n const fetchPageNumbers = () => {\r\n // const totalPages = totalPages;\r\n // const currentPage = currentPage;\r\n // const pageNeighbours = pageNeighbours;\r\n\r\n /**\r\n * totalNumbers: the total page numbers to show on the control\r\n * totalBlocks: totalNumbers + 2 to cover for the left(<) and right(>) controls\r\n */\r\n const totalNumbers = pageNeighbours * 2 + 3;\r\n const totalBlocks = totalNumbers + 2;\r\n\r\n if (totalPages > totalBlocks) {\r\n const startPage = Math.max(2, currentPage - pageNeighbours);\r\n const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);\r\n let pages = range(startPage, endPage);\r\n\r\n /**\r\n * hasLeftSpill: has hidden pages to the left\r\n * hasRightSpill: has hidden pages to the right\r\n * spillOffset: number of hidden pages either to the left or to the right\r\n */\r\n const hasLeftSpill = startPage > 2;\r\n const hasRightSpill = totalPages - endPage > 1;\r\n const spillOffset = totalNumbers - (pages.length + 1);\r\n\r\n switch (true) {\r\n // handle: (1) < {5 6} [7] {8 9} (10)\r\n case hasLeftSpill && !hasRightSpill: {\r\n const extraPages = range(startPage - spillOffset, startPage - 1);\r\n pages = [LEFT_PAGE, ...extraPages, ...pages];\r\n break;\r\n }\r\n\r\n // handle: (1) {2 3} [4] {5 6} > (10)\r\n case !hasLeftSpill && hasRightSpill: {\r\n const extraPages = range(endPage + 1, endPage + spillOffset);\r\n pages = [...pages, ...extraPages, RIGHT_PAGE];\r\n break;\r\n }\r\n\r\n // handle: (1) < {4 5} [6] {7 8} > (10)\r\n case hasLeftSpill && hasRightSpill:\r\n default: {\r\n pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];\r\n break;\r\n }\r\n }\r\n\r\n return [1, ...pages, totalPages];\r\n }\r\n\r\n return range(1, totalPages);\r\n };\r\n\r\n const gotoPage = (page) => {\r\n const { onPageChanged = (f) => f } = props.onPageChanged;\r\n const currentPage = Math.max(0, Math.min(page, totalPages));\r\n setCurrentPage(currentPage);\r\n props.onPageChanged({\r\n currentPage,\r\n totalPages,\r\n pageLimit,\r\n totalRecords\r\n })\r\n };\r\n\r\n const handleClick = (page) => (evt) => {\r\n evt.preventDefault();\r\n gotoPage(page);\r\n };\r\n\r\n const handleMoveLeft = (evt) => {\r\n evt.preventDefault();\r\n gotoPage(currentPage - pageNeighbours * 2 - 1);\r\n };\r\n\r\n const handleMoveRight = (evt) => {\r\n evt.preventDefault();\r\n gotoPage(currentPage + pageNeighbours * 2 + 1);\r\n };\r\n\r\n const pages = fetchPageNumbers();\r\n\r\n if (!totalRecords || totalPages === 1) return null;\r\n\r\n return (\r\n \r\n \r\n {pages.map((page, index) => {\r\n if (page === LEFT_PAGE)\r\n return (\r\n \r\n \r\n «\r\n Previous\r\n \r\n \r\n );\r\n\r\n if (page === RIGHT_PAGE)\r\n return (\r\n \r\n \r\n »\r\n Next\r\n \r\n \r\n );\r\n\r\n return (\r\n \r\n \r\n {page}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n )\r\n}\r\n","import React from \"react\";\r\nimport styles from \"./tchat.scss\";\r\nimport moment from \"moment\";\r\n\r\nconst getFormattedDate = (date) => {\r\n return moment(date).format(\"ddd DD MMM à HH:mm\");\r\n};\r\n\r\nexport default function Message({ message }) {\r\n return (\r\n résultats {(currentPage - 1) * pageLimit + 1} - {totalRecords < (currentPage * pageLimit) ? totalRecords : (currentPage) * pageLimit} sur {totalRecords}
\r\n\r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport Message from \"./message\";\r\nimport \"./tchat.scss\";\r\n\r\nexport default function Tchat({ messages }) {\r\n return (\r\n \r\n {message?.reserve ? \"Reserve\" : \"Réponse\"} :\r\n
\r\n \r\n \r\n
\r\n {message?.text}
\r\n \r\n {message?.reserve\r\n ? `${message?.username || \"Un utilisateur\"} a émis une réserve le`\r\n : \"Le service de livraison à répondu\"}{\" \"}\r\n {getFormattedDate(message?.date)}\r\n
\r\n \r\n {messages.map((message) => {\r\n return (\r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { Button, Col, Row, Modal, Card } from \"react-bootstrap\";\r\nimport \"./ModalAnswerReserve.scss\";\r\nimport SimpleBarReact from \"simplebar-react\";\r\n\r\nimport { Formik, Form } from \"formik\";\r\nimport { useField } from \"formik\";\r\nimport * as Yup from \"yup\";\r\nimport SkeletonLoader from \"tiny-skeleton-loader-react\";\r\nimport Tchat from \"../../../tchat/index\";\r\nimport { reserve_status } from \"../../../../constants/reserve_status\";\r\n\r\nconst GenericFomikTextInput = ({ children, ...props }) => {\r\n // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]\r\n // which we can spread on . We can use field meta to show an error\r\n // message if the field is invalid and it has been touched (i.e. visited)\r\n const [field, meta] = useField(props);\r\n\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n {children ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nfunction ModalAnswerReserve(props) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState(false);\r\n const [conversationArray, setConversationArray] = useState([]);\r\n\r\n /******\r\n *\r\n * functions\r\n *\r\n ******/\r\n\r\n const handleSubmitMethod = async (values) => {\r\n setIsLoading(true);\r\n\r\n if (!props.selectedreserve) {\r\n throw new Error(\"Impossible to find the Reserve !\");\r\n }\r\n\r\n try {\r\n const response = await putReserve(values, props.selectedreserve.id);\r\n if (!response.ok) {\r\n const error = await response.json();\r\n throw new Error(error.message || response.status);\r\n }\r\n return await response.json();\r\n } catch (error) {\r\n console.log(error);\r\n throw new Error(error?.message || \"Oops, une erreur est survenue\");\r\n }\r\n };\r\n\r\n const putReserve = async (values, id) => {\r\n const url = new URL(props.base_url + `/reserves_v2/${id}/solved`);\r\n const token = localStorage.getItem(\"fleetToken\");\r\n const body = {};\r\n\r\n setIsLoading(true);\r\n\r\n if (values?.message?.length > 0) {\r\n body[\"response\"] = values.message;\r\n }\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify(body),\r\n };\r\n\r\n return fetch(url, myInit);\r\n };\r\n\r\n useEffect(() => {\r\n setConversationArray(buildConversationArray(props.selectedreserve));\r\n\r\n function buildConversationArray(reserve) {\r\n const temporaryConversation = [];\r\n\r\n // Message de l'utilisateur créant la reserve\r\n temporaryConversation.push({\r\n text: props.selectedreserve?.message || \"Message indisponible\",\r\n reserve: true,\r\n date: new Date(props.selectedreserve?.created_at),\r\n id: 1,\r\n username: props.selectedreserve?.receiver_name || \"n.c\",\r\n });\r\n\r\n // L'administrateur n'a pas encore traité la reserve\r\n\r\n if (reserve?.response) {\r\n temporaryConversation.push({\r\n text: reserve?.response,\r\n reserve: false,\r\n date: new Date(props.selectedreserve?.created_at),\r\n id: 3,\r\n });\r\n }\r\n\r\n // L'administrateur à traitée la reserve sans laisser de message\r\n if (!reserve?.response && reserve?.status === reserve_status.SOLVED) {\r\n temporaryConversation.push({\r\n text: \"Le service de livraison a traité la réserve sans laisser de commentaire.\",\r\n reserve: false,\r\n date: new Date(reserve.updated_at),\r\n id: 3,\r\n });\r\n }\r\n return temporaryConversation;\r\n }\r\n }, [props.selectedreserve]);\r\n\r\n return (\r\n \r\n \r\n
\r\n {meta.touched && meta.error ? meta.error : null}\r\n
\r\n \r\n {children ? (\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nfunction ModalConsultReserve(props) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState(false);\r\n const [conversationArray, setConversationArray] = useState([]);\r\n\r\n useEffect(() => {\r\n setConversationArray(buildConversationArray(props.selectedreserve));\r\n\r\n function buildConversationArray(reserve) {\r\n const temporaryConversation = [];\r\n\r\n // Message de l'utilisateur créant la reserve\r\n temporaryConversation.push(\r\n {\r\n text: props.selectedreserve?.message || \"Message indisponible\",\r\n reserve: true,\r\n date: new Date(props.selectedreserve?.created_at),\r\n id: 1,\r\n },\r\n {\r\n text: \"Votre réserve à été émise et sera bientôt traitée par un de nos services\",\r\n reserve: false,\r\n date: new Date(props.selectedreserve?.created_at),\r\n id: 2,\r\n }\r\n );\r\n\r\n // L'administrateur n'a pas encore traité la reserve\r\n\r\n if (reserve?.response) {\r\n temporaryConversation.push({\r\n text: reserve?.response,\r\n reserve: false,\r\n date: new Date(props.selectedreserve?.created_at),\r\n id: 3,\r\n });\r\n }\r\n\r\n // L'administrateur à traitée la reserve sans laisser de message\r\n if (!reserve?.response && reserve?.status === reserve_status.SOLVED) {\r\n temporaryConversation.push({\r\n text: \"Le service de livraison a traité la réserve sans laisser de commentaire.\",\r\n reserve: false,\r\n date: new Date(reserve.updated_at),\r\n id: 3,\r\n });\r\n }\r\n return temporaryConversation;\r\n }\r\n }, [props.selectedreserve]);\r\n\r\n const putReserve = async (values, id) => {\r\n const url = new URL(props.base_url + `/reserves_v2/${id}/solved`);\r\n const token = localStorage.getItem(\"fleetToken\");\r\n const body = {};\r\n\r\n setIsLoading(true);\r\n\r\n if (values?.message?.length > 0) {\r\n body[\"response\"] = values.message;\r\n }\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", token);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify(body),\r\n };\r\n\r\n return fetch(url, myInit);\r\n };\r\n\r\n const handleSubmitMethod = async (values) => {\r\n setIsLoading(true);\r\n\r\n if (!props.selectedreserve) {\r\n throw new Error(\"Impossible to find the Reserve !\");\r\n }\r\n\r\n try {\r\n const response = await putReserve(values, props.selectedreserve.id);\r\n if (!response.ok) {\r\n const error = await response.json();\r\n throw new Error(error.message || response.status);\r\n }\r\n return await response.json();\r\n } catch (error) {\r\n console.log(error);\r\n throw new Error(error?.message || \"Oops, une erreur est survenue\");\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n {meta.touched && meta.error ? meta.error : null}\r\n
\r\n \r\n
\r\n )\r\n}\r\n","import React from 'react'\r\nimport \"./message.scss\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faHeadset, faTruck, faUser, faMessage } from '@fortawesome/free-solid-svg-icons'\r\n\r\nexport default function Message({message, type}) {\r\n const getIcon = () => {\r\n switch(type){\r\n case \"DIGITAPPRO\":\r\n return faUser\r\n case \"FLEET\":\r\n return faTruck\r\n case \"RESPONSE\":\r\n return faHeadset\r\n default:\r\n return faMessage\r\n }\r\n }\r\n \r\n return (\r\n {log}
\r\n \r\n
\r\n )\r\n}\r\n","import React from 'react'\r\nimport \"./product-reserve.scss\"\r\n\r\nexport default function ProductReserve({product}) {\r\n \r\n return (\r\n \r\n
\r\n {message}
\r\n \r\n
\r\n )\r\n}\r\n","import React from 'react'\r\nimport \"./select.scss\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faTimes } from '@fortawesome/free-solid-svg-icons'\r\n\r\nexport default function Select({values, selectedValues, setSelectedValues, isOpen, setIsOpen}) {\r\n const handleSelectedValues = (value, from) => {\r\n let copySelectedValues = [...selectedValues]\r\n let index = selectedValues?.indexOf(value)\r\n if(index >= 0){\r\n copySelectedValues.splice(index, 1)\r\n }\r\n else{\r\n copySelectedValues.push(value)\r\n }\r\n setSelectedValues(copySelectedValues)\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {product.item_name}
\r\n {product.item_ean}
\r\n \r\n
\r\n {product.reserve_quantity} sur {product.item_quantity}
\r\n commandé{product.item_quantity > 1 ? \"s\" : \"\"}
\r\n event.stopPropagation()} style={{position: \"relative\", maxWidth: 300}}>\r\n
\r\n )\r\n}\r\n","import React from 'react'\r\nimport \"./bl-reserve.scss\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { faStickyNote } from '@fortawesome/free-solid-svg-icons'\r\n\r\nexport default function BlReserve({bl}) {\r\n return (\r\n setIsOpen(!isOpen)} className='select-container'>\r\n {selectedValues?.map(selectedValue => {\r\n return(\r\n
\r\n {isOpen && (\r\n \r\n
\r\n )\r\n })}\r\n {selectedValues?.length < 1 && (\r\n setIsOpen(!isOpen)}>BL{selectedValue}
\r\n {event.stopPropagation();handleSelectedValues(selectedValue)}}>\r\n
\r\n Cliquez ici pour choisir des BLs...
\r\n )}\r\n \r\n {values?.map((value, index) => {\r\n return(\r\n
\r\n )}\r\n handleSelectedValues(value, \"a\")} key={value} className={`choice ${selectedValues?.includes(value) ? \"checked\" : \"\"} ${index === 0 ? \"first\" : \"\"}`}>\r\n \r\n
\r\n )\r\n })}\r\n BL{value}
\r\n \r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport { Button, Col, Row, Modal, Card } from \"react-bootstrap\";\r\nimport \"./ModalReserve.scss\";\r\n\r\nimport { reserve_status } from \"../../../../constants/reserve_status\";\r\nimport Log from \"../../../Log\";\r\nimport Message from \"../../../Message\";\r\nimport { faClipboard } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport ProductReserve from \"../../../ProductReserve\";\r\nimport Select from \"../../../Select\";\r\nimport { useSelector } from \"react-redux\";\r\nimport BlReserve from \"../../../BlReserve\";\r\n\r\nfunction ModalReserve({reserve_id, show, onHide}) {\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [error, setError] = useState(\"\");\r\n const [comment, setComment] = useState(\"\");\r\n const [events, setEvents] = useState([]);\r\n const [selectedBls, setSelectedBls] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [reserve, setReserve] = useState(null);\r\n \r\n const BASE_URL = useSelector((state) => state.BASE_URL);\r\n const TOKEN = localStorage.getItem(\"fleetToken\");\r\n\r\n const BLS_NUMBER = reserve?.delivery_details_linked?.length\r\n const CREATION_DATE = new Date(reserve?.created_at)\r\n\r\n useEffect(() => {\r\n (async() => {\r\n if(show){\r\n await getReserve()\r\n }\r\n else{\r\n setIsOpen(false)\r\n setSelectedBls([])\r\n setReserve(null)\r\n setError(\"\")\r\n setComment(\"\")\r\n setEvents([])\r\n }\r\n })()\r\n }, [show])\r\n \r\n useEffect(() => {\r\n if (reserve) {\r\n let bls_already_linked = []\r\n reserve?.delivery_details_available?.forEach(bl => {\r\n if(bl?.is_already_linked){\r\n bls_already_linked.push(bl?.delivery_detail_key)\r\n }\r\n })\r\n setSelectedBls(bls_already_linked)\r\n\r\n let events = [];\r\n let creation_log = reserve?.logs?.filter(\r\n (element) => element?.type === 'CREATION_LOG'\r\n )[0];\r\n if (creation_log) {\r\n events.push({\r\n text: creation_log?.message,\r\n type: 'LOG',\r\n });\r\n }\r\n if (reserve?.message?.length) {\r\n events.push({\r\n text: reserve?.message,\r\n type: reserve?.type,\r\n });\r\n }\r\n let response_log = reserve?.logs?.filter(\r\n (element) => element?.type === 'ANSWERED_AT'\r\n )[0];\r\n if (response_log) {\r\n events.push({\r\n text: response_log?.message,\r\n type: 'LOG',\r\n });\r\n }\r\n if (reserve?.response?.length) {\r\n events.push({\r\n text: reserve?.response,\r\n type: 'RESPONSE',\r\n });\r\n }\r\n\r\n setEvents(events);\r\n }\r\n }, [reserve]);\r\n\r\n const getReserve = async() => {\r\n if (!BASE_URL) return;\r\n\r\n setIsLoading(true);\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", TOKEN);\r\n let myInit = {\r\n method: \"GET\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n };\r\n\r\n try {\r\n const response = await fetch(BASE_URL + `/reserves_v2/${reserve_id}`, myInit);\r\n\r\n if (response.ok) {\r\n const result = await response.json();\r\n if (!result?.reserve) {\r\n throw new Error(\"reserve is not defined\");\r\n }\r\n setReserve(result.reserve);\r\n }\r\n setIsLoading(false);\r\n } catch (error) {\r\n setIsLoading(false);\r\n }\r\n }\r\n \r\n const handleSubmitMethod = async () => {\r\n setIsLoading(true);\r\n\r\n if (!reserve_id) {\r\n throw new Error(\"Impossible to find the Reserve !\");\r\n }\r\n\r\n let resultUpdateBls, resultSolve\r\n \r\n let have_to_update = false\r\n selectedBls.forEach(element => {\r\n if(!reserve?.delivery_details_linked?.map(bl => bl.delivery_detail_key)?.includes(element)){\r\n have_to_update = true\r\n }\r\n })\r\n \r\n if(have_to_update){\r\n try {\r\n const response = await updateBls();\r\n if (!response.ok) {\r\n const error = await response.json();\r\n setError(error.message)\r\n throw new Error(error.message || response.status);\r\n }\r\n resultUpdateBls = await response.json();\r\n } catch (error) {\r\n setError(error.toString())\r\n }\r\n }\r\n if(!have_to_update || resultUpdateBls?.has_been_updated){\r\n try {\r\n const response = await solveReserve();\r\n if (!response.ok) {\r\n const error = await response.json();\r\n throw new Error(error || response.status);\r\n }\r\n resultSolve = await response.json();\r\n } catch (error) {\r\n setError(error.toString())\r\n }\r\n }\r\n setIsLoading(false)\r\n if(resultSolve?.has_been_updated){\r\n onHide(true)\r\n }\r\n };\r\n \r\n const updateBls = async () => {\r\n const body = {};\r\n let selectedBlsIds = reserve?.delivery_details_linked?.filter(bl => selectedBls.includes(bl?.delivery_detail_key))?.map(bl => bl?.delivery_detail_id)\r\n if (selectedBlsIds?.length) {\r\n body[\"delivery_detail_ids\"] = selectedBlsIds;\r\n }\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", TOKEN);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify(body),\r\n };\r\n\r\n return fetch(BASE_URL + `/reserves_v2/${reserve_id}/change-delivery-details`, myInit);\r\n };\r\n\r\n const solveReserve = async () => {\r\n const body = {};\r\n \r\n if (comment?.length) {\r\n body[\"response\"] = comment;\r\n }\r\n\r\n let myHeaders = new Headers();\r\n myHeaders.append(\"Content-Type\", \"application/json\");\r\n myHeaders.append(\"Authorization\", TOKEN);\r\n let myInit = {\r\n method: \"PUT\",\r\n headers: myHeaders,\r\n cache: \"no-cache\",\r\n body: JSON.stringify(body),\r\n };\r\n\r\n return fetch(BASE_URL + `/reserves_v2/${reserve_id}/solved`, myInit);\r\n };\r\n \r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n BL{bl?.delivery_detail_key}
\r\n \r\n
\r\n \r\n {`${reserve?.status !== reserve_status.SOLVED ? \"Traiter r\" : \"R\"}éserve ${reserve?.delivery_detail_key}`}\r\n
\r\n \r\n
\r\n
\r\n\r\n {reserve?.status === reserve_status.SOLVED && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {`BL${reserve?.delivery_detail_key}${BLS_NUMBER > 1 ? \", +\"+(BLS_NUMBER-1)+\" BL\"+(BLS_NUMBER-1 > 1 ? \"s\" : \"\") : \"\"}`}
\r\n \r\n {`Créée le ${CREATION_DATE.toLocaleDateString(\"fr-FR\", {\r\n year: \"numeric\",\r\n month: \"short\",\r\n day: \"numeric\",\r\n })} à ${CREATION_DATE.toLocaleTimeString(\"fr-FR\", {\r\n hour: \"2-digit\", \r\n minute: \"2-digit\"\r\n })}`}\r\n
\r\n \r\n \r\n {reserve_status.properties[reserve?.status]?.display_name}\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n BONS DE LIVRAISON
\r\n Retrouvez la liste des BLs concernés par la réserve.
\r\n\r\n \r\n {reserve?.delivery_details_linked?.map(bl => (\r\n
\r\n \r\n
\r\n\r\n {reserve?.products?.length > 0 && (\r\n HISTORIQUE DE L'ÉCHANGE
\r\n Retrouvez l'entièreté de l'historique des échanges concernant cette réserve.
\r\n\r\n \r\n {events.map(event => {\r\n return(\r\n event?.type === \"LOG\" ? \r\n
\r\n \r\n
\r\n )}\r\n\r\n {reserve?.status !== reserve_status.SOLVED && (\r\n <>\r\n PRODUITS CONCERNÉS
\r\n Veuillez retrouver ci-dessous la liste des produits signalés par l'utilisateur pour réclamation :
\r\n\r\n \r\n {reserve?.products?.map(product => {\r\n return(\r\n
\r\n \r\n
\r\n\r\n BONS DE LIVRAISON CONCERNÉS
\r\n Vous pouvez réassigner les BLs concernés par la réserve si besoin.
\r\n\r\n \r\n
\r\n \r\n
AJOUTER UN COMMENTAIRE (OPTIONNEL)
\r\n Ajoutez un message visible par le destinataire sur sa commande digitappro.
\r\n\r\n