Feat: presentation des hightlights

src/components/MonthPresentation.vue

@@ -116,8 +116,6 @@ export default {
 
         box-shadow: 2px 2px 5px gray;
         border-left: 1rem solid black;
-        align-items: center;
-        justify-content: space-between;
         width: 100%;
         border-radius: 10px;
         }

src/components/hightlights.vue

@@ -1,41 +1,44 @@
 <template>
-<div id="hightlights"> 
+<div class="hightlights"> 
     <div class="hightlight">
         <ul>
-            <li>{{ ca }}</li>
+            <li>{{ ca }} €</li>
             <li>CA</li>
         </ul>
     </div>
     <div class="hightlight">
         <ul>
-            <li>{{ caMean }}</li>
+            <li>{{ caMean }} €</li>
             <li>CA moyen</li>
         </ul>
     </div>
+    <!--
     <div class="hightlight">
         <ul>
             <li>{{ caTheo }}</li>
             <li>CA des séances effectuées</li>
         </ul>
     </div>
+    -->
     <div class="hightlight">
         <ul>
-            <li>{{ caTheo - ca }}</li>
+            <li>{{ caUnFactured }} €</li>
             <li>Non facturé</li>
         </ul>
     </div>
     <div class="hightlight">
         <ul>
-            <li>{{ remuneration }}</li>
+            <li>{{ remuneration }} €</li>
             <li>Rémunération</li>
         </ul>
     </div>
     <div class="hightlight">
         <ul>
-            <li>{{ remunerationMean }}</li>
+            <li>{{ remunerationMean }} €</li>
             <li>Rémunération moyenne</li>
         </ul>
     </div>
+    <!--
     <div class="hightlight">
         <ul>
             <li>{{ retrocession }}</li>
@@ -60,9 +63,10 @@
             <li> CA pour la partie perso</li>
         </ul>
     </div>
+    -->
     <div class="hightlight">
         <ul>
-            <li>{{ caPersoUntouch }}</li>
+            <li>{{ caPersoUntouch }} €</li>
             <li> CA perso non utilisé pour se rémunérer</li>
         </ul>
     </div>
@@ -97,16 +101,17 @@ export default {
         ...mapGetters('travail', {
             months: "months",
         }),
-        ca: function () {return caTotal(this.months)},
-        caMean: function () {return caMean(this.months)},
-        caTheo: function () {return caTheo(this.months)},
-        remuneration: function () {return remuneration(this.months)},
-        remunerationMean: function () {return remunerationMean(this.months)},
-        retrocession: function () {return retrocession(this.months)},
-        retrocessionMean: function () {return retrocessionMean(this.months)},
-        caPro: function () {return caPro(this.months, this.caProPercentage)},
-        caPerso: function () {return caPerso(this.months, this.caProPercentage)},
-        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage)},
+        ca: function () {return caTotal(this.months).toLocaleString()},
+        caMean: function () {return caMean(this.months).toLocaleString()},
+        caTheo: function () {return caTheo(this.months).toLocaleString()},
+        caUnFactured: function () {return (caTheo(this.months) - caTotal(this.months)).toLocaleString()},
+        remuneration: function () {return remuneration(this.months).toLocaleString()},
+        remunerationMean: function () {return remunerationMean(this.months).toLocaleString()},
+        retrocession: function () {return retrocession(this.months).toLocaleString()},
+        retrocessionMean: function () {return retrocessionMean(this.months).toLocaleString()},
+        caPro: function () {return caPro(this.months, this.caProPercentage).toLocaleString()},
+        caPerso: function () {return caPerso(this.months, this.caProPercentage).toLocaleString()},
+        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
 
       },
       mounted () {
@@ -117,4 +122,30 @@ export default {
 </script>
 
 <style scoped>
+.hightlights {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+.hightlight > ul{
+    list-style-type: none;
+    display: flex;
+    flex-flow: column wrap;
+    box-shadow: 2px 2px 5px gray;
+    border-left: 1rem solid black;
+    border-radius: 10px;
+    padding-inline-start: 0;
+}
+.hightlight > ul > li {
+    margin: 3px;
+    flex-direction: column-reverse;
+}
+.hightlight > ul  :first-child{
+    font-size: 3rem;
+    font-weight: bold;
+    text-align: center;
+}
+.hightlight > ul  :last-child{
+    text-align: end;
+}
 </style>

src/views/home.vue

@@ -1,11 +1,9 @@
 <template>
-<h1>Sous de Margot</h1>
 <section id="selector">
    <month-selector/> 
 </section>
 <div id="content">
     <section id="months">
-        <h2> Mois </h2>
         <create-month/>
         <months-list/>
     </section>