Feat: hightlights on the period

src/components/hightlights.vue

@@ -0,0 +1,80 @@
+<template>
+<div id="hightlights"> 
+    <div class="hightlight">
+        <ul>
+            <li>{{ ca }}</li>
+            <li>CA</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <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>Non facturé</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remuneration }}</li>
+            <li>Rémunération</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remunerationMean }}</li>
+            <li>Rémunération moyenne</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocession }}</li>
+            <li>Rétrocession</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocessionMean }}</li>
+            <li>Rétrocession moyenne</li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'Hightlights',
+    components: {
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('travail', {
+            ca: "ca",
+            caMean: "caMean",
+            caTheo: "caTheo",
+            remuneration: "remuneration",
+            remunerationMean: "remunerationMean",
+            retrocession: "retrocession",
+            retrocessionMean: "retrocessionMean",
+        })
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+</style>

src/views/home.vue

@@ -12,8 +12,7 @@
     </section>
     <section id="stats">
         <h2>Résumé</h2>
-            
+        <highlights></highlights> 
-        
     </section>
 </div>
 </template>
@@ -23,12 +22,14 @@ import { mapGetters, mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
 import MonthSelector from '../components/monthSelector.vue'
+import Highlights from '../components/hightlights.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
+        highlights: Highlights,
         },
     data () {
         return {}