maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout de scss et d'un peude back dans la page dashboard

Browse Source
master
Tristan BARLET 2 years ago
parent ef043a468c
commit aa6e45022c
4 changed files with 113 additions and 17 deletions
Show Stats Download Patch File Download Diff File

8
server-api/api.js
Unescape View File

@ -56,7 +56,7 @@ app.get('/Customer/All', (req, res) => {
db.query(sql, (err, result) => {
if (err) throw err;
console.log(result);
// console.log(result);
res.send(result);
});
});
@ -69,7 +69,7 @@ app.get('/Customer/Id/:id', (req, res) => {
db.query(sql, [id], (err, result) => {
if (err) throw err;
console.log(result);
// console.log(result);
res.send(result);
});
});
@ -150,7 +150,6 @@ app.get('/Sale/Pie/:iduser/:month/:year', (req, res) => {
db.query(sql, [iduser,month,year,year], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
@ -165,7 +164,7 @@ app.get('/Sale/KeyNumber/:iduser/:month/:year', (req, res) => {
db.query(sql, [iduser,month,year], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});
@ -180,7 +179,6 @@ app.get('/Sale/BestCustomer/:iduser', (req, res) => {
db.query(sql, [iduser], (err, result) => {
if (err) throw err;
console.log(result);
res.send(result);
});

3
src/pages/Analyse.js
Unescape View File

@ -65,13 +65,14 @@ const Analyse = () => {
};
setPieDatas(data);
*/
setPieDatas(response.data);
});
const apiStringLine = '/Sale/Line/' + Session.get("idUser") + '/' + month + '/' + year;
api.get(apiStringLine).then((response) => {
setLineDatas(response.data);
console.log(response.data);
});
}, []);

53
src/pages/Dashboard.js
Unescape View File

@ -12,6 +12,8 @@ function Dashboard() {
const [infoContactRecent, setInfoContactRecent] = useState([]);
const [dataKey, setDataKey] = useState([]);
const [infoBestCustomer, setinfoBestCustomer] = useState([]);
const [data12, setData12] = useState([]);
const [contact, setContact] = useState([]);
const [theme, setTheme] = useState("light");
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
@ -37,7 +39,6 @@ function Dashboard() {
if (response.data.length > 0)
setDataKey(response.data[0]);
});
const apiStringBestCustomer = '/Sale/BestCustomer/' + Session.get("idUser");
api.get(apiStringBestCustomer).then((response) => {
if (response.data.length > 0)
@ -45,8 +46,29 @@ function Dashboard() {
else
setinfoBestCustomer({name :"Aucun client",total: "0"});
});
}, []);
const date2 = new Date();
const nbMonths = 12;
date2.setMonth(date2.getMonth() - nbMonths);
const month12 = (date2.getMonth() + 1);
const apiStringLine = '/Sale/Line/' + Session.get("idUser") + '/' + month12 + '/' + year;
console.log(apiStringLine);
api.get(apiStringLine).then((response) => {
setData12(response.data);
console.log(response.data);
});
const apiStringGetUser = '/User/Id/' + Session.get("idUser");
api.get(apiStringGetUser).then((response) => {
setContact(response.data[0]);
console.log(response.data);
});
// setTimeout(() => {}, 500)
}, []);
if(data12.length > 0){
console.log((data12[8].total+data12[9].total+data12[10].total)/3 )
console.log(data12[11].total)}
return (
<body className={theme}>
@ -66,34 +88,43 @@ function Dashboard() {
<div className="_gauche">
<div className="_haut">
<div className="Mes_infos">
Mes infos
<p className='titre_info'>Mes infos </p>
<div className="Mes_infos_contenu">
<p className="">Nom : {contact.lastname}</p>
<p className="">Prénom : {contact.firstname}</p>
<p className="">Email : {contact.mail}</p>
<p className="">Téléphone : {contact.phone}</p>
</div>
</div>
<div className="Alertes">
Alertes
<p className='titre_alertes'>Alertes </p>
<div className="Alertes_contenu">
{ data12.length != 0 ? (data12[8].total+data12[9].total+data12[10].total)/3 > data12[11].total ? <div >Le chiffre d'affaire de ce mois est en baisse </div> : <div>Le chiffre d'affaire de ce mois est en hausse</div> : <div></div>}
</div>
</div>
</div>
<div className="_bas">
<div className="Mes_prochaines_activités">
Mes prochaines activités
<p className='titre_activites'>Mes prochaines activités </p>
</div>
<div className="Chiffre_clés">
<div className="Ch_Clé_gauche">
<div className="Ch_Clé_gauche_haut">
Chiffre_clés
<p className='titre_chiffre'>Chiffre clés</p>
<div>{dataKey.total}</div>
</div>
<div className="Ch_Clé_gauche_bas">
Chiffre_clés
<p className='titre_chiffre'>Chiffre clés</p>
<div>{dataKey.totalcontact}</div>
</div>
</div>
<div className="Ch_Clé_droite">
<div className="Ch_Clé_droite_haut">
Chiffre_clés
<p className='titre_chiffre'>Chiffre clés</p>
<div>{infoBestCustomer.name + " : " + infoBestCustomer.total}</div>
</div>
<div className="Ch_Clé_droite_bas">
Chiffre_clés
<p className='titre_chiffre'>Chiffre clés</p>
<div>{new Date().getFullYear() + " : " + (new Date().getMonth() + 1)}</div>
</div>
</div>
@ -102,10 +133,10 @@ function Dashboard() {
</div>
<div className="_droite">
<div className="clients_important">
clients important
<p className='titre_clients'>Clients importants</p>
</div>
<div className="contacts_ajouté_récemment">
contacts ajouté récemment
<p className='titre_contacts'>Contacts ajoutés récemment</p>
{infoContactRecent.map(info => (
<div>{info.firstname + " " + info.lastname}</div>
))}

66
src/styles/components/_dashboard.scss
Unescape View File

@ -139,6 +139,8 @@ body {
.Mes_infos {
display: flex;
padding : 10px;
flex-direction: column;
width: 40%;
height: auto;
@ -148,10 +150,25 @@ body {
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre_info{
padding-bottom: 10px;
font-size: 20px;
font-weight: 700;
}
.Mes_infos_contenu {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.Alertes {
display: flex;
flex-direction: column;
width: 58.5%;
height: auto;
@ -161,6 +178,19 @@ body {
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre_alertes{
padding: 10px;
font-size: 20px;
font-weight: 700;
}
.Alertes_contenu {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
}
}
@ -181,6 +211,12 @@ body {
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre_activites{
padding: 10px;
font-size: 20px;
font-weight: 700;
}
}
.Chiffre_clés {
@ -190,6 +226,12 @@ body {
width: 53.5%;
height: auto;
.titre_chiffre{
padding-bottom : 10px;
font-size: 20px;
font-weight: 700;
}
.Ch_Clé_gauche {
display: flex;
flex-direction: column;
@ -199,6 +241,9 @@ body {
.Ch_Clé_gauche_haut {
display: flex;
flex-direction: column;
padding: 10px;
width: auto;
height: 53%;
border: 1px solid #cbd0dd;
@ -211,7 +256,9 @@ body {
.Ch_Clé_gauche_bas {
display: flex;
flex-direction: column;
width: auto;
padding: 10px;
height: 43%;
border: 1px solid #cbd0dd;
@ -231,7 +278,10 @@ body {
.Ch_Clé_droite_haut {
display: flex;
flex-direction: column;
width: auto;
padding: 10px;
height: 46%;
border: 1px solid #cbd0dd;
@ -243,7 +293,9 @@ body {
.Ch_Clé_droite_bas {
display: flex;
flex-direction: column;
width: auto;
padding: 10px;
height: 50%;
border: 1px solid #cbd0dd;
@ -273,18 +325,32 @@ body {
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre_clients{
padding: 10px;
font-size: 20px;
font-weight: 700;
}
}
.contacts_ajouté_récemment {
display: flex;
flex-direction: column;
width: auto;
height: 34%;
padding: 10px;
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.titre_contacts{
padding-bottom: 10px;
font-size: 20px;
font-weight: 700;
}
}
}
}

Write Preview
Loading…
Cancel
Save