Feat: add current year to nav

Feat: css to hightlight selected_year
Feat: selecting a year is working
2022-02-13 18:14:54 +01:00 · 2022-02-13 18:03:44 +01:00 · 2022-02-13 17:57:40 +01:00 · 2022-02-13 17:50:55 +01:00 · 2021-10-08 05:40:10 +02:00 · 2021-08-16 14:46:11 +02:00
28 changed files with 2975 additions and 665 deletions
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,5 @@
+"eslint.validate": [
+  "javascript",
+  "javascriptreact",
+  "vue"
+]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,11 @@
  },
  "main": "background.js",
  "dependencies": {
+    "chart.js": "2.9.4",
    "core-js": "^3.6.5",
+    "date-fns": "^2.23.0",
+    "papaparse": "^5.3.1",
+    "vls": "^0.7.4",
    "vue": "^3.0.0",
    "vue-router": "^4.0.8",
    "vuex": "^4.0.2"
--- a/public/user-cog-solid.svg
+++ b/public/user-cog-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
  <Nav></Nav>
+  <div class="content">
        <router-view></router-view>
+  </div>
 </template>

 <script>
@@ -14,4 +16,5 @@ export default {
 }
 </script>

-<style></style>
+<style>
+</style>
--- a/src/background.js
+++ b/src/background.js
@@ -15,6 +15,7 @@ async function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
+        autoHideMenuBar: true,
        webPreferences: {

            // Use pluginOptions.nodeIntegration, leave this alone
--- a/src/components/CreateMonth.vue
+++ b/src/components/CreateMonth.vue
@@ -1,54 +1,36 @@
 <template>
-<div id="create-month" >
-    <div class="month-presentation" id="new-month">
+<div class="toolbar">
+    <button  v-show='!addingMonth' @click='toggleAdding'>
+        Ajouter  {{ formatedDate }}
+    </button>
+</div>
+    <div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
      <div class="date">
-          <input type="month" v-model="monthDate">
+        <div class="month">
+            {{ theMonth }} 
        </div> 
-      <div class="datas">
-        <ul>
-            <li> 
-                <label for="ca-theo">CA théorique</label>
-                <input type="number" v-model="monthCopy.ca_theo"  id="ca-theo" class="value" >
-            </li>
-            <li> 
-                <label for="ca-retro">CA rétrocession</label>
-                <input type="number" v-model="monthCopy.ca_retro" id="ca-retro" class="value" >
-            </li>
-            <li> 
-                <label for="ca-react">CA réactualisé</label>
-                <input type="number" v-model="monthCopy.ca_react" id="ca-react" class="value" >
-            </li>
-            <li> 
-                <label for="nbr-seances">Nombre de séances effectuées</label>
-                <input type="number" v-model="monthCopy.nbr_seances" id="nbr-seances" class="value" >
-            </li>
-            <li> 
-                <label for="retro">Montant de la rétrocession</label>
-                <input type="number" v-model="monthCopy.retro" id="retro" class="value" >
-            </li>
-            <li> 
-                <label for="remumeration">Rémunération effectuée</label>
-                <input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value">
-            </li>
-        </ul>
+        <div class="year">
+            {{ theYear }} 
        </div> 
+
        <div class="actions">
            <button class="validate" @click="save"> Valider </button>
            <button class="cancel" @click="cancel"> Annuler </button>
        </div>
      </div>
-</div>
+      <div class="datas">
+        <li v-for="cara in description" :key='cara.name'> 
+            <label :for='cara.name'>{{ cara.label }}</label>
+            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
+        </li>
+      </div>
+    </div>
 </template>

 <script>
 import { mapGetters, mapActions } from 'vuex'
-const today = new Date();
-function formatDate(date) {
-    var y = ''+date.getFullYear()
-    var m = ''+(date.getMonth()+1)
-    if (m.length < 2) { m = '0'+m}
-    return [y, m].join('-')
-}
+import {  parseISO, addMonths, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'

 export default {
  name: 'NewMonth',
@@ -58,28 +40,61 @@ export default {
  },
  data () {
      return {
-            monthDate: formatDate(today),
+            monthDate: new Date(),
            monthCopy: Object,
+            addingMonth: false,
          }
  },
  mounted () {
      this.monthCopy = this.theEmptyMonth
  },
+  watch: {
+    lastMonthDate: function () {
+        if (this.lastMonthDate) {
+            this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
+        } else {
+            this.monthDate = new Date()
+        }
+         
+    },
+  },
  computed: {
    ...mapGetters('travail', {
        'theEmptyMonth': 'TheEmptyMonth',
+        'lastMonthDate': 'lastMonthDate',
    }),
+    ...mapGetters('config', {
+        'description': 'descEditable',
+    }),
+        formatedDate: function () {
+          return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
+        },
+      theMonth: function () {
+          return format(this.monthDate, "MMM", {locale: frLocal})
+      },
+      theYear: function () {
+          return format(this.monthDate, "YYY", {locale: frLocal})
+      },
  },
  methods: {
    ...mapActions('travail', {
        'createMonth': 'createMonth',
    }),
+    ...mapActions('config', {
+        'writeData': 'writeData',
+    }),
+    toggleAdding: function () {
+        this.addingMonth = !this.addingMonth
+    },
    save: function () {
        console.log("save")
        console.log(this.monthCopy)
-        this.createMonth({date: this.monthDate, month: this.monthCopy})
+        this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
+        this.toggleAdding()
+        this.writeData()
    },
    cancel: function () {
+        this.toggleAdding()
        this.monthCopy = this.theEmptyMonth
    },
  },
@@ -89,13 +104,8 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
    .month-presentation {
-        display: inline-flex;
-        flex-direction: row;
-        background-color: palegreen;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: 10px;
-        width: 100%;
+        display: grid;
+        grid-template-columns: 140px 1fr;
        }
    .month-presentation > * {
        margin: 20px;
@@ -119,12 +129,17 @@ export default {
    }
    li {
        margin: 3px;
-        width: 30%;
        display: flex;
        flex-direction: column-reverse;
    }
+    label{
+        text-align: right;
+        font-size: 0.8em;
+    }
    .value {
-        font-size: 1.5em;
        font-weight: bold;
    }
+    .toolbar {
+        text-align: center;
+    }
 </style>
--- a/src/components/MonthPresentation.vue
+++ b/src/components/MonthPresentation.vue
@@ -1,52 +1,37 @@
 <template>
 <div class="month-presentation">
-  <div class="date">
-    {{ TheDate }}
+    <div id="date">
+        <div class="month">
+           {{ theMonth }} 
        </div> 
-  <div id="display">
-    <ul>
-        <li> 
-            <label for="ca-theo">CA théorique</label>
-            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="ca-retro">CA rétrocession</label>
-            <span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="ca-react">CA réactualisé</label>
-            <span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="nbr-seances">Nombre de séances effectuées</label>
-            <span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
-            <input type="number" v-model="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="retro">Montant de la rétrocession</label>
-            <span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.retro" id="retro" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="remumeration">Rémunération effectuée</label>
-            <span class="value" v-show="!editing">{{ TheMonth.remumeration ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value" v-show="editing">
-        </li>
-    </ul>
+        <div class="year">
+           {{ theYear }} 
        </div> 
-  <div class="actions">
-    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
+        <div>
+            <button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
            <button class="validate" @click="save" v-show="editing"> Valider </button>
            <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
        </div>
+    </div>
+    <div id="display" v-show="!editing">
+        <div class="hightlight" v-for="cara in descHightlights" :key='cara.name'> 
+            <label :for='cara.name'>{{ cara.label }}</label>
+            <span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
+        </div>
+    </div>
+    <div id="edit" v-show="editing">
+        <div v-for="cara in descEditable" :key='cara.name' class="cara"> 
+            <label :for='cara.name'>{{ cara.label }}</label>
+            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name">
+        </div>
+    </div>
 </div>
 </template>

 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+import {  parseISO, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'
 export default {
  name: 'MonthPresentation',
  props: {
@@ -65,16 +50,33 @@ export default {
        this.monthCopy =  {...this.TheMonth}
      },
  computed: {
+    ...mapGetters('config', {
+        'descHightlights': 'monthHightlightDesc',
+        'descEditable': 'descEditable',
+    }),
+      rawDate: function () {
+            return parseISO(this.TheDate, "yyyy-MM", new Date())
+      },
+      theMonth: function () {
+          return format(this.rawDate, "MMM", {locale: frLocal})
+      },
+      theYear: function () {
+          return format(this.rawDate, "YYY", )
+      },
  },
  methods: {
    ...mapActions('travail', {
        'updateMonth': 'updateMonth',
+    }),
+    ...mapActions('config', {
+        'writeData': 'writeData',
    }),
      toggleEdit: function () {
          this.editing = !this.editing
          },
      save: function () {
-          this.updateMonth({date: this.TheDate, month: this.monthCopy})
+          this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
+          this.writeData()
          this.toggleEdit()
          },
      cancel: function () {
@@ -88,41 +90,57 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
    .month-presentation {
-        display: inline-flex;
-        flex-direction: row;
-        background-color: mintcream;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        border-radius: 10px;
+        display: grid;
+        grid-template-columns: 140px 1fr;
        }
    .month-presentation > * {
        margin: 20px;
    }

-    .date {
-        font-size: 1.5em;
+    #date {
+        font-size: 1em;
        font-weight: bold;
+        border-right: 1px solid black;
+    }
+    .month{
+        font-size: 2em;
    }

-    ul {
+    #display {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-flow: row wrap;
+        align-items: center;
+        justify-content: space-around;
    }
-    li {
+    #display > * {
        margin: 3px;
-        width: 30%;
+        width: 80px;
        display: flex;
        flex-direction: column-reverse;
    }
+    label{
+        text-align: right;
+        font-size: 0.8em;
+    }
    .value {
        font-size: 1.5em;
+        text-align: right;
        font-weight: bold;
    }

    .novisible {
        display: None;
    }
+    button {
+        margin-top: 5px;
+        padding: 4px;
+        font-size: 0.8em;
+        width: auto;
+    }
+    .cara {
+        display: flex;
+        flex-direction: column-reverse;
+    }
 </style>
--- a/src/components/caOnPeriod.vue
+++ b/src/components/caOnPeriod.vue
@@ -0,0 +1,37 @@
+<template>
+<div class="hightlights"> 
+    <hightlight-sum :months="months" attribute="ca"/>
+    <hightlight-sum :months="months" attribute="remuneration"/>
+    <hightlight-sum :months="months" attribute="caPersoUntouch"/>
+</div>
+<revenus-chart/>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import RevenusChart from '../components/graphs/RevenusChart.vue'
+import hightlightSum from './hightlightSum.vue'
+
+export default {
+    name: 'caOnPeriod',
+    components: {
+        RevenusChart: RevenusChart,
+        hightlightSum: hightlightSum,
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+      },
+      mounted () {
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/components/caRepartition.vue
+++ b/src/components/caRepartition.vue
@@ -0,0 +1,41 @@
+<template>
+<div class="hightlights"> 
+    <hightlight-sum :months="months" attribute="caTheo"/>
+    <hightlight-sum :months="months" attribute="retro"/>
+    <hightlight-sum :months="months" attribute="notInvoiced"/>
+</div>
+<repartition-chart/>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import RepartitionChart from './graphs/RepartitionChart.vue'
+import hightlightSum from './hightlightSum.vue'
+
+export default {
+    name: 'caRepartition',
+    components: {
+        RepartitionChart: RepartitionChart,
+        hightlightSum: hightlightSum,
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+      },
+      mounted () {
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+.hightlights{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+</style>
--- a/src/components/graphs/RepartitionChart.vue
+++ b/src/components/graphs/RepartitionChart.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <canvas id="repartition-chart"></canvas>
+  </div>
+</template>
+
+<script>
+import Chart from 'chart.js'
+import { mapGetters } from 'vuex'
+import { 
+    notInvoiced,
+    caPro, 
+    caPersoUntouch,
+    sum,
+    } from '../../lib/months'
+
+export default {
+    name: 'RepartitionChart',
+    data() {
+        return {
+        }
+    },
+    watch: {
+        months: function () {
+            const ctx = document.getElementById('repartition-chart');
+            new Chart(ctx, this.graphDatas);
+        },
+    },
+    computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+        graphDatas: function () {
+            var datas = {
+                type: "pie",
+                data: {
+                    labels: ['Partie pro', 'Non facturé', 'Retrocession', 'Salaire',  '13e mois'],
+                    datasets: [ 
+                        {
+                            label: "Difference CA perso et remuneration",
+                            data: [
+                                sum(Object.values(this.months).map(a => caPro(a))),
+                                sum(Object.values(this.months).map(a => notInvoiced(a))),
+                                sum(Object.values(this.months).map(a => a.retro)),
+                                sum(Object.values(this.months).map(a => a.remuneration)),
+                                sum(Object.values(this.months).map(a => caPersoUntouch(a))),
+                            ],
+                        },
+                    ],
+                },
+                options: {
+                    legend: {position: 'right'},
+                }
+            }
+            return datas
+        },
+    },
+    methods: {
+    },
+    mounted() {
+        const ctx = document.getElementById('repartition-chart');
+        new Chart(ctx, this.graphDatas);
+    }
+}
+</script>
--- a/src/components/graphs/RevenusChart.vue
+++ b/src/components/graphs/RevenusChart.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <canvas id="revenus-chart"></canvas>
+  </div>
+</template>
+
+<script>
+import Chart from 'chart.js'
+import { mapGetters } from 'vuex'
+import { ca, caPersoUntouch, sum } from '../../lib/months'
+
+export default {
+    name: 'RevenusChart',
+    data() {
+        return {
+        }
+    },
+    watch: {
+        months: function () {
+            const ctx = document.getElementById('revenus-chart');
+            new Chart(ctx, this.graphDatas);
+        },
+    },
+    computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+        graphDatas: function () {
+            var datas = {
+                type: "bar",
+                data: {
+                    labels: Object.keys(this.months),
+                    datasets: [ 
+                        {
+                            type: "bar",
+                            label: "Difference CA perso et remuneration",
+                            data: Object.values(this.months).map(a => caPersoUntouch(a)),
+                            backgroundColor: "red",
+                            borderColor: "light-red",
+                            borderWidth: 3
+                        },
+                        {
+                            type: "bar",
+                            label: "CA",
+                            data: Object.values(this.months).map(a => ca(a)),
+                            backgroundColor: "rgba(54,73,93,.5)",
+                            borderColor: "#36495d",
+                            borderWidth: 3
+                        },
+                        {
+                            type: "line",
+                            label: "Banque",
+                            data: this.untouchEvo,
+                            backgroundColor: "rgba(71, 183,132,.5)",
+                            borderColor: "#47b784",
+                            borderWidth: 3
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    lineTension: 1,
+                    scales: {
+                      yAxes: [
+                        {
+                          ticks: {
+                            beginAtZero: true,
+                            padding: 25
+                          }
+                        }
+                      ]
+                    }
+                }
+            }
+            return datas
+        },
+        untouchEvo: function () {
+            const cumulativeArray = (arr => value => {arr.push(value); return [...arr];})([]);
+            return Object.values(this.months)
+                .map(cumulativeArray)
+                .map(a => sum(a.map(m => caPersoUntouch(m))))
+        },
+    },
+    methods: {
+    },
+    mounted() {
+        const ctx = document.getElementById('revenus-chart');
+        new Chart(ctx, this.graphDatas);
+    }
+}
+</script>
--- a/src/components/hightlightSum.vue
+++ b/src/components/hightlightSum.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ sumValue }} {{ unit }}</li>
+            <li>{{ label }} </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { 
+    sum,
+} from '../lib/months'
+
+export default {
+    name: 'hightlightSum',
+    components: {
+    },
+    props: {
+        months: Object,
+        attribute: String,
+    },
+    data () {
+        return {}
+    },
+    computed: {
+        ...mapGetters('config', {
+            descOf: "descOf",
+        }),
+        theDesc: function () {
+            return this.descOf(this.attribute)
+        },
+        sumValue: function () {
+            return sum(Object.values(this.months).map(m => this.theDesc.output(m))).toLocaleString()
+        },
+        label: function () {
+            return this.theDesc.label
+        },
+        unit: function () {
+            return this.theDesc.unit
+        },
+    },
+    mounted () {
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>
--- a/src/components/hightlights.vue
+++ b/src/components/hightlights.vue
@@ -0,0 +1,148 @@
+<template>
+<div class="hightlights"> 
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ ca }} €</li>
+            <li>CA</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caMean }} €</li>
+            <li>CA moyen</li>
+        </ul>
+    </div>
+    <!--
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caTheo }}</li>
+            <li>CA des séances effectuées</li>
+        </ul>
+    </div>
+    -->
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caUnFactured }} €</li>
+            <li>Non facturé</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ remuneration }} €</li>
+            <li>Rémunération</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ remunerationMean }} €</li>
+            <li>Rémunération moyenne</li>
+        </ul>
+    </div>
+    <!--
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ retrocession }}</li>
+            <li>Rétrocession</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ retrocessionMean }}</li>
+            <li>Rétrocession moyenne</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caPro }}</li>
+            <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caPerso }}</li>
+            <li> CA pour la partie perso</li>
+        </ul>
+    </div>
+    -->
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caPersoUntouch }} €</li>
+            <li> CA perso non utilisé pour se rémunérer</li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { caTotal,
+    caMean,
+    caTheo,
+    remuneration,
+    remunerationMean,
+    retrocession,
+    retrocessionMean,
+    caPro,
+    caPerso,
+    caPersoUntouch 
+} from '../lib/months'
+
+export default {
+    name: 'Hightlights',
+    components: {
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+        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 () {
+      },
+      methods: {
+      },
+}
+</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;
+    padding-inline-start: 0;
+}
+.hightlight > ul > li {
+    margin: 5px;
+    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>
--- a/src/components/monthSelector.vue
+++ b/src/components/monthSelector.vue
@@ -0,0 +1,135 @@
+<template>
+<ul>
+    <li>
+    <h2>Période</h2>
+    </li>
+    <li>
+      <input type="month" @input="updateStart" v-model="start">
+      <input type="month" @input="updateEnd" v-model="end">
+    </li>
+    <li>
+        <button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
+        <button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
+        <button @click="setRangeAll" :active='selected=="all"'>Tout</button>
+    </li>
+</ul>
+
+</template>
+
+<script>
+
+import { mapGetters, mapActions } from 'vuex'
+import { setMonth, addMonths, format, parseISO } from 'date-fns'
+
+const today = new Date();
+
+export default {
+    name: 'MonthSelector',
+    components: {
+    },
+    data () {
+        return {
+            selected: "",
+            start: "", 
+            end: "",
+            }
+    },
+    computed: {
+        ...mapGetters('travail', {
+            range: "range",
+            monthsDate: "MonthsDate",
+        })
+    },
+    watch: {
+        range: function () {
+            this.start = this.range.start
+            this.end = this.range.end
+        },
+    },
+    mounted () {
+        this.setRangeFromJanuary()
+        this.start = this.range.start
+        this.end = this.range.end
+    },
+    methods: {
+        ...mapActions('travail', {
+            setRange: "setRange",
+        }),
+        updateStart: function () {
+            this.selected = "custom"
+            this.setRange({start: this.start, end: this.end})
+        },
+        updateEnd: function () {
+            this.selected = "custom"
+            this.setRange({start: this.start, end: this.end})
+        },
+        setRangeFromJanuary: function () {
+            const start = setMonth(today, 0)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.selected = "january"
+            this.setRange(range)
+        }, 
+        setRange1year: function () {
+            const start = addMonths(new Date(), -12)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.selected = "year"
+            this.setRange(range)
+        }, 
+        setRangeAll: function () {
+            const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
+            const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
+            const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(end, 'yyyy-MM'),
+            }
+            this.selected = "all"
+            this.setRange(range)
+        }, 
+    },
+}
+</script>
+
+<style scoped>
+    ul {
+            list-style-type: none;
+            padding: 0;
+            display: flex;
+            flex-flow: column wrap;
+    }
+    ul > * {
+        margin-top: 10px;
+    }
+    li {
+            list-style-type: none;
+            display: flex;
+            flex-flow: row;
+            justify-content: space-around;
+
+    }
+    h2 {
+        margin: 0;
+    }
+    input {
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        display: inline-block;
+        font-size: 16px;
+        border-radius: 5px;
+        color: black;
+    }
+    button {
+        flex-basis: 33%;
+        height: 3rem;
+        background-color: white;
+
+    }
+</style>
--- a/src/components/nav.vue
+++ b/src/components/nav.vue
@@ -1,21 +1,87 @@
 <template>
    <nav>
-  <router-link to="/"> Home </router-link>
-  <router-link to="/config"> Config </router-link>
+        <h1><router-link to="/"> Sous Margot </router-link></h1>
+        <h2>
+        <ul id="years">
+            <li v-for="year in years" :key="year">
+                <span @click="selectYear(year)" :class="{selected_year:year==selected_year}">{{ year }}</span>
+            </li>
+        </ul>
+        </h2>
+        <div class="nav-link">
+        <router-link to="/edit"> 
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-edit" class="svg-inline--fa fa-user-edit fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
+            <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-37.8 37.8-4.1 4.1 71.8 71.7 41.8-41.8c9.3-9.4 9.3-24.5 0-33.9z"></path>
+        </svg>
+        </router-link>
+        <router-link to="/config"> 
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
+            <path fill="black" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path>
+        </svg>
+        </router-link>
+
+        </div>
    </nav>
 </template>

 <script>
+import { mapGetters } from 'vuex'
+import { mapActions } from 'vuex'
+import { getYear } from 'date-fns'
+const today = new Date()
 export default {
  name: 'Nav',
-  props: {
+  data () {
+    return {
+      current_year: getYear(today),
+      selected_year: getYear(today),
+    }
+  },
+  computed: {
+    ...mapGetters({
+        available_years: "travail/years",
+    }),
+    years: function () {
+      return [...this.available_years, this.current_year].filter((v, i, a) => a.indexOf(v) === i)
+    }
+  },
+  methods: {
+    ...mapActions('travail', {
+        'setRange': 'setRange',
+    }),
+    selectYear: function (year) {
+      this.selected_year=year
+      this.setRange({
+          start: `${this.current_year}-01`,
+          end: `${this.current_year}-12`
+      })
+    }
  }
 }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-nav {
-    background-color: green;
+
+#years {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-around;
 }
+#years > * {
+    margin: 3px;
+    width: 80px;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.selected_year {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+
 </style>
--- a/src/lib/months.js
+++ b/src/lib/months.js
@@ -0,0 +1,44 @@
+// Function on a month
+export function ca(month) {
+    // Extract the CA of the month
+    if (month.caReact) {
+        return month.caReact
+    } else {
+        return month.caRetro
+    }
+}
+
+export function notInvoiced (month) {
+    // Compute how much has not been invoiced
+    return month.caTheo - ca(month)
+}
+
+export function caPro (month) {
+    // Compute the part of the CA to go pro usage
+    return ca(month) * month.proPercentage / 100
+}
+
+export function caPerso (month) {
+    // Compute the part of the CA to go personnal usage
+    return ca(month) * (1 - month.proPercentage / 100)
+}
+
+export function caPersoUntouch (month) {
+    // Compute the part of the CA to go personnal usage
+    return caPerso(month) - month.remuneration
+}
+
+
+// Function on an array of month
+
+
+export function sum (array) {
+    // sum the array
+    return array.reduce((acc, v)=> acc + v, 0)
+}
+
+export function mean(array) {
+    console.log(array)
+    return Math.floor(array.reduce((acc, v)=> acc + v, 0) / array.length)
+}
+
--- a/src/router.js
+++ b/src/router.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'

 import Home from "@/views/home.vue"
 import Config from "@/views/config.vue"
+import Edit from "@/views/edit.vue"

 const routes = [
    {
@@ -9,6 +10,11 @@ const routes = [
        name: 'home',
        component: Home
    },
+    {
+        path: '/edit',
+        name: 'edit',
+        component: Edit
+    },
    {
        path: '/config',
        name: 'config',
--- a/src/store/config/index.js
+++ b/src/store/config/index.js
@@ -0,0 +1,175 @@
+import path from 'path'
+import Papa from 'papaparse'
+import { writeFile } from 'fs'
+import {
+    ca,
+    notInvoiced,
+    caPro,
+    caPerso,
+    caPersoUntouch,
+} from '../../lib/months.js'
+
+const config = {
+    namespaced: true,
+    state() {
+        return {
+            //userDir: '~/.config/sousmargot/',
+            userDir: './userDir/',
+            dataFile: 'datas.csv',
+            caProPercentage: 0.5,
+            descAll : [ 
+                {
+                    name: 'caTheo',
+                    color: '',
+                    label: 'CA "scéances effectuées"',
+                    type: 'editable',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => month.caTheo,
+                },
+                {
+                    name: 'caRetro',
+                    color: '',
+                    label: 'CA "Séances facturées"',
+                    type: 'editable',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => month.caRetro,
+                },
+                {
+                    name: 'caReact', 
+                    color: '',
+                    label: 'CA "Séances facturées" réactualisé',
+                    type: 'editable',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => month.caReact,
+                },
+                {
+                    name: 'sessionQty', 
+                    color: '',
+                    label: 'Nombre de séances effectuées',
+                    unit: '',
+                    hightlight: false,
+                    output: month => month.sessionQty,
+                },
+                {
+                    name: 'retro',
+                    color: '',
+                    label: 'Montant de la rétrocession',
+                    type: 'editable',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => month.retro,
+                },
+                {
+                    name: 'remuneration', 
+                    color: '',
+                    label: 'Rémuneration',
+                    type: 'editable',
+                    unit: '€',
+                    hightlight: true,
+                    output: month => month.remuneration,
+                },
+                {
+                    name: 'proPercentage', 
+                    color: '',
+                    label: 'Pourcentage du CA pour la partie pro',
+                    type: 'editable',
+                    unit: '%',
+                    hightlight: false,
+                    output: month => month.proPercentage,
+                },
+                {
+                    name: 'ca', 
+                    color: '',
+                    label: 'CA',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: true,
+                    output: month => ca(month),
+                },
+                {
+                    name: 'notInvoiced', 
+                    color: '',
+                    label: 'Non facturé',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: true,
+                    output: month => notInvoiced(month),
+                },
+                {
+                    name: 'caPro', 
+                    color: '',
+                    label: 'CA pour le partie pro',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => caPro(month),
+                },
+                {
+                    name: 'caPerso', 
+                    color: '',
+                    label: 'CA destiné à la rémuneration',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => caPerso(month),
+                },
+                {
+                    name: 'caPersoUntouch', 
+                    color: '',
+                    label: 'Banque 13e mois',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => caPersoUntouch(month),
+                },
+            ],
+        }
+    },
+    getters: {
+        userDir (state) { return state.userDir },
+        dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
+        descAll (state) { 
+            // All description of attributes for months
+            return state.descAll 
+        },
+        descEditable (state) { 
+            // All description of attributes for months that are editable
+            return state.descAll.filter(d => d.type == 'editable')
+        },
+        descComputed (state) { 
+            // All description of attributes for months that are computed
+            return state.descAll.filter(d => d.type != 'editable')
+        },
+        descOf: (state) => (desc) => {
+            return state.descAll.filter(d => d.name == desc)[0]
+        },
+        monthHightlightDesc (state) { return state.descAll.filter(a => a.hightlight) },
+        caProPercentage (state) { return state.caProPercentage },
+    },
+    mutations: {
+    },
+    actions: {
+        loadConfig (context) {
+            // load config file at  ~/.config/sousmargot/config.json
+            return context.state.userDir
+        },
+        writeData (context) {
+            // overwrite the dataFile with months datas
+            const months = context.rootGetters['travail/monthsAll']
+            const unpackMonths = Object.keys(months).map(k => {return { ...months[k], date: k}})
+            const csv = Papa.unparse(unpackMonths)
+            writeFile(context.getters.dataFilePath, csv, (err) => {
+                if (err)  {
+                    console.log(err) 
+                } else {
+                    console.log("Datas sauvegardées")
+                }
+            })
+        },
+    },
+}
+
+export default config
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,10 +1,12 @@
 import { createStore } from 'vuex'
 import travailStore from "./travail"
+import configStore from "./config"

 // Create a new store instance.
 const store = createStore({
    modules:{
        travail: travailStore,
+        config: configStore,
    }
 })

--- a/src/store/travail/index.js
+++ b/src/store/travail/index.js
@@ -1,103 +1,128 @@
+import { readFile } from 'fs'
+import Papa from 'papaparse'
+import { getYear } from 'date-fns'
+
+const today = new Date()
+
 const travail = {
    namespaced: true,
-    state () {
+    state() {
        return {
            empty: {
-                ca_theo: null, // ca théorique basé sur les séances effectuées
-                nbr_seances: null, // Nombre de séances effectuées sur le mois
-                ca_retro: null, // ca au moment de la rétrocession
-                ca_react: null, // ca réactualisé
+                caTheo: null, // ca théorique basé sur les séances effectuées
+                sessionQty: null, // Nombre de séances effectuées sur le mois
+                caRetro: null, // ca au moment de la rétrocession
+                caReact: null, // ca réactualisé
                retro: 0, // montant de la rétrocession
-                remumeration: 0, // rémunération décidée
+                remuneration: 0, // rémunération décidée
+                proPercentage: 50, // Pourcentage du CA pour la partie pro
            },
            months: {
-                "2021-01": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 6747, // ca au moment de la rétrocession
-                    ca_react: null, // ca réactualisé
-                    retro: 893, // montant de la rétrocession
-                    remumeration: 2000, // rémunération décidée
-                },
-                "2021-02": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 5183, // ca au moment de la rétrocession
-                    ca_react: null, // ca réactualisé
-                    retro: 665, // montant de la rétrocession
-                    remumeration: 1500, // rémunération décidée
-                },
-                "2021-03": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 7088, // ca au moment de la rétrocession
-                    ca_react: null, // ca réactualisé
-                    retro: 855, // montant de la rétrocession
-                    remumeration: 2000, // rémunération décidée
-                },
-                "2021-04": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 4194, // ca au moment de la rétrocession
-                    ca_react: 5630, // ca réactualisé
-                    retro: 627, // montant de la rétrocession
-                    remumeration: 2000, // rémunération décidée
-                },
-                "2021-05": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 5564, // ca au moment de la rétrocession
-                    ca_react: 6335, // ca réactualisé
-                    retro: 699, // montant de la rétrocession
-                    remumeration: 2800, // rémunération décidée
-                },
-                "2021-06": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 5442, // ca au moment de la rétrocession
-                    ca_react: 6335, // ca réactualisé
-                    retro: 638, // montant de la rétrocession
-                    remumeration: 2800, // rémunération décidée
            },
+            range: {
+                start: `${getYear(today)}-01`,
+                end: `${getYear(today)}-12`,
            },
        }
    },
    getters: {
-        Count (state) {return state.months.length},
-        TheEmptyMonth (state) {return {...state.empty}},
-        MonthsDate (state) {
-            return Object.keys(state.months).sort()
-            //return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
+        TheEmptyMonth(state) { return { ...state.empty } },
+        range(state) { return state.range },
+        MonthsDate(state) {
+            // Get months inside the range
+            return Object.keys(state.months).filter(date => (date >= state.range.start) && (date <= state.range.end)).sort().reverse()
+        },
+        MonthsAllDate(state) {
+            // Get all the months
+            return Object.keys(state.months).sort().reverse()
+        },
+        lastMonthDate(state) {
+            // Return the date of the last registered month
+            return Object.keys(state.months).sort().reverse()[0]
+        },
+        months: (state, getters) => {
+            // Get in range months
+            const a = Object.keys(state.months)
+                .filter(a => getters.MonthsDate.includes(a))
+                .reduce((acc, v) => {
+                    acc[v] = state.months[v];
+                    return acc;
+                }, {})
+            return a
+        },
+        monthsAll: (state) => {
+            // Get in range months
+            return state.months
        },
        getMonth: (state) => (date) => {
+            // Get a month by its date
            return state.months[date]
        },
+        count: (state, getters) => { 
+            // Amount of mounts
+            return Object.keys(getters.months).length 
+        },
+        years: (state) => {
+            // list of years with data
+            return Object.keys(state.months).map(k => k.slice(0,4)).filter((v, i, a) => a.indexOf(v) === i)
+        }
    },
    mutations: {
-        updateMonth (state, {date, month}) {
+        cleanMonths (state) {
+            // erase months
+            state.months = []
+        },
+        importMonths(state, months) {
+            // overwrite months
+            state.months = months
+        },
+        updateMonth(state, { date, month }) {
            state.months[date] = month
        },
-        createMonth (state, {date, month}) {
+        createMonth (state, { date, month }) {
            state.months[date] = month
        },
+            setRange(state, range) {
+        state.range = range
+        }, 
    },
    actions: {
-        updateMonth (context, {date, month}) {
+        cleanMonths (context) {
+            context.commit("cleanMonths")
+        },
+        loadMonths (context) {
+            // import all months from storage
+            readFile(context.rootGetters["config/dataFilePath"], (err, data) => {
+                if (err) throw err;
+                const months = Papa.parse(data.toString(), {header: true, dynamicTyping:true, skipEmptyLines:true})
+                    .data
+                    .reduce(
+                        (acc, el) => {
+                            acc[el.date] = el;
+                            return acc
+                        }, {})
+                context.commit("importMonths", months)
+            })
+        },
+        updateMonth(context, { date, month }) {
+            // update month's datas 
            if (date in context.state.months) {
-                context.commit('updateMonth', {date, month})
+                context.commit('updateMonth', { date, month })
            } else {
                console.log("This month does not exists")
            }
        },
-        createMonth (context, {date, month}) {
+        createMonth(context, { date, month }) {
+            // Create a new month
            if (!(date in context.state.months)) {
-                console.log(date)
-                context.commit('createMonth', {date, month})
-                console.log(context.state.months)
+                context.commit('createMonth', { date, month })
            } else {
                console.log("This month already exists")
            }
        },
+        setRange(context, range) {
+            context.commit("setRange", range)
+        },
    },
 }

--- a/src/style.css
+++ b/src/style.css
@@ -1,26 +1,110 @@
+body {
+  background-color: whitesmoke;
+  margin: 0;
+}

-.actions {
-    display: inline-flex;
-    flex-direction: column;
-    width: 120px;
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 0 20px;
+  color: black;
+}
+nav h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #000;
+}
+nav a {
+  color: black;
+  text-decoration: none;
+}
+
+.content {
+  margin: 10px;
 }

 button {
-  border: none;
-  color: white;
-  padding: 15px 32px;
+  color: black;
+  padding: 4px;
+  box-shadow: 1px 1px 2px gray;
  text-align: center;
  display: inline-block;
-  width: 100%;
-  font-size: 16px;
  border-radius: 5px;
-    }
+  background-color: white;
+  margin-top: 5px;
+  font-size: 0.8em;
+  width: auto;
+  transition: all 0.2s ease-out;
+}
+
+button:hover {
+  background-color: black;
+  color: white;
+  transition: all 0.2s ease-out;
+}
+
 .validate {
+  border: 2px solid green;
+  color: green;
+}
+.validate:hover {
  background-color: green;
+  color: white;
 }
 .cancel {
+  border: 2px solid red;
+  color: red;
+}
+.cancel:hover {
  background-color: red;
+  color: white;
 }
 .edit {
-  background-color: orange;
+  border: 2px solid orange;
+  color: orange;
+}
+.edit:hover {
+  background-color: orange;
+  color: white;
+}
+
+.boxed {
+  box-shadow: 2px 2px 5px gray;
+  border-left: 1rem solid black;
+  border-radius: 10px;
+  background-color: white;
+}
+
+.boxed-green {
+  box-shadow: 2px 2px 5px gray;
+  border-left: 1rem solid green;
+  border-radius: 10px;
+  background-color: white;
+}
+
+.hightlights {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 20px;
+}
+.hightlight > ul {
+  list-style-type: none;
+  display: flex;
+  flex-flow: column wrap;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+.hightlight > ul > li {
+  margin: 5px;
+  flex-direction: column-reverse;
+}
+.hightlight > ul :first-child {
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+}
+.hightlight > ul :last-child {
+  text-align: end;
 }
--- a/src/views/config.vue
+++ b/src/views/config.vue
@@ -1,3 +1,40 @@
 <template>
 <h1>Config</h1>
+
+<h2> Données </h2>
+<h3>Données éditables</h3>
+<ul>
+    <li v-for="param in descEditable" :key='param.name'>
+        {{ param }}
+    </li>
+</ul>
+<h3>Données calculées</h3>
+<ul>
+    <li v-for="param in descComputed" :key='param.name'>
+        {{ param }}
+    </li>
+</ul>
+
 </template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'config',
+
+    data () {
+        return {}
+    },
+    computed: {
+        ...mapGetters('config', {
+            'descEditable': 'descEditable',
+            'descComputed': 'descComputed',
+        }),
+    },
+    methods: {
+    },
+    mounted () {
+    }, 
+     
+}
+</script>
--- a/src/views/edit.vue
+++ b/src/views/edit.vue
@@ -0,0 +1,22 @@
+<template>
+<h1>Edition</h1>
+
+
+</template>
+
+<script>
+export default {
+    name: 'edit',
+
+    data () {
+        return {}
+    },
+    computed: {
+    },
+    methods: {
+    },
+    mounted () {
+    }, 
+     
+}
+</script>
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,39 +1,57 @@
 <template>
-<h1>Home</h1>
-<section id="months">
-    <h2> Mois </h2>
-    <create-month></create-month>
-    <months-list></months-list>
-</section>
+  <div id="content">
+    <section id="months">
+      <create-month />
+      <months-list />
+    </section>
+    <section id="stats">
+      <ca-on-period />
+      <ca-repartition />
+    </section>
+  </div>
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
+import caOnPeriod from '../components/caOnPeriod.vue'
+import caRepartition from '../components/caRepartition.vue'
 export default {
    name: 'home',
    components: {
        MonthsList: MonthsList,
        CreateMonth: CreateMonth,
+        caOnPeriod: caOnPeriod,
+        caRepartition: caRepartition,
    },
    data () {
        return {}
    },
    computed: {
-        ...mapGetters({
-            state: "datas/count",
-        })
    },
    methods: {
-        ...mapActions({
-        })
+        ...mapActions('travail', {
+            'loadMonths': 'loadMonths',
+        }),
+    },
+    mounted () {
+        this.loadMonths()
    }, 
 }
 </script>

 <style scoped>
+#content {
+  display: grid;
+  grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
+  grid-template-areas: "stats months";
+  gap: 1em;
+}
+#stats {
+  grid-area: stats;
+}
 #months {
-    width: 70%;
+  grid-area: months;
 }
 </style>
--- a/userDir/datas.csv
+++ b/userDir/datas.csv
@@ -0,0 +1,8 @@
+caTheo,sessionQty,caRetro,caReact,retro,remuneration,date,proPercentage
+7000,,6747,,893,2000,2021-01,50
+5200,,5183,,665,1500,2021-02,50
+7100,,7088,,855,2000,2021-03,50
+5700,,4194,5630,627,2000,2021-04,50
+6500,,5564,6335,699,2800,2021-05,50
+6725,235,5442,6376,638,2800,2021-06,50
+2176,81,1274,,172,2000,2021-07,50
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true
+    }
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,13 @@
  resolved "https://registry.npmjs.org/7zip-bin/-/7zip-bin-5.0.3.tgz"
  integrity sha512-GLyWIFBbGvpKPGo55JyRZAo4lVbnBiD52cKlw/0Vt+wnmKvWJkpZvsjVoaIolyBXDeAQKSicRtqFNPem9w0WYA==

+"@babel/code-frame@7.12.11":
+  version "7.12.11"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz"
+  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13":
  version "7.12.13"
  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz"
@@ -248,7 +255,7 @@
    "@babel/traverse" "^7.14.0"
    "@babel/types" "^7.14.0"

-"@babel/highlight@^7.12.13":
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
  version "7.14.0"
  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz"
  integrity sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==
@@ -943,6 +950,21 @@
    dir-compare "^2.4.0"
    fs-extra "^9.0.1"

+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
 "@hapi/address@2.x.x":
  version "2.1.4"
  resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"
@@ -975,6 +997,20 @@
  dependencies:
    "@hapi/hoek" "^8.3.0"

+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz"
+  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
  version "1.0.6"
  resolved "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz"
@@ -1757,7 +1793,7 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
    mime-types "~2.1.24"
    negotiator "0.6.2"

-acorn-jsx@^5.2.0:
+acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
  version "5.3.1"
  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz"
  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
@@ -1810,6 +1846,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.3, ajv@^6.12.4:
    json-schema-traverse "^0.4.1"
    uri-js "^4.2.2"

+ajv@^8.0.1:
+  version "8.6.2"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz"
+  integrity sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
  version "1.0.2"
  resolved "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz"
@@ -1827,6 +1873,11 @@ ansi-colors@^3.0.0:
  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz"
  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==

+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
 ansi-escapes@^4.2.1:
  version "4.3.2"
  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
@@ -2049,6 +2100,11 @@ astral-regex@^1.0.0:
  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz"
  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==

+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-each@^1.0.1:
  version "1.0.3"
  resolved "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz"
@@ -2501,6 +2557,11 @@ builder-util@22.10.5:
    stat-mode "^1.0.0"
    temp-file "^3.3.7"

+builtin-modules@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz"
+  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
+
 builtin-status-codes@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz"
@@ -2713,6 +2774,29 @@ chardet@^0.7.0:
  resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==

+chart.js@2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 check-types@^8.0.3:
  version "8.0.3"
  resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
@@ -2926,7 +3010,7 @@ collection-visit@^1.0.0:
    map-visit "^1.0.0"
    object-visit "^1.0.0"

-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
  version "1.9.3"
  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -2995,7 +3079,7 @@ commander@2.9.0:
  dependencies:
    graceful-readlink ">= 1.0.0"

-commander@^2.18.0, commander@^2.20.0:
+commander@^2.12.1, commander@^2.18.0, commander@^2.20.0:
  version "2.20.3"
  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3254,7 +3338,7 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
    shebang-command "^1.2.0"
    which "^1.2.9"

-cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
  version "7.0.3"
  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3450,6 +3534,11 @@ dashdash@^1.12.0:
  dependencies:
    assert-plus "^1.0.0"

+date-fns@^2.23.0:
+  version "2.23.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz"
+  integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -3505,7 +3594,7 @@ deep-extend@^0.6.0:
  resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz"
  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==

-deep-is@~0.1.3:
+deep-is@^0.1.3, deep-is@~0.1.3:
  version "0.1.3"
  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@@ -3612,6 +3701,11 @@ detect-node@^2.0.4:
  resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz"
  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==

+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
+
 diffie-hellman@^5.0.0:
  version "5.0.3"
  resolved "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz"
@@ -3936,6 +4030,13 @@ enhanced-resolve@^4.5.0:
    memory-fs "^0.5.0"
    tapable "^1.0.0"

+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
 entities@^1.1.1:
  version "1.1.2"
  resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
@@ -4049,7 +4150,7 @@ eslint-loader@^2.2.1:
    object-hash "^1.1.4"
    rimraf "^2.6.1"

-eslint-plugin-vue@^7.0.0:
+eslint-plugin-vue@^7.0.0, eslint-plugin-vue@^7.10.0:
  version "7.10.0"
  resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.10.0.tgz"
  integrity sha512-xdr6e4t/L2moRAeEQ9HKgge/hFq+w9v5Dj+BA54nTAzSFdUyKLiSOdZaRQjCHMY0Pk2WaQBFH9QiWG60xiC+6A==
@@ -4067,7 +4168,7 @@ eslint-scope@^4.0.3:
    esrecurse "^4.1.0"
    estraverse "^4.1.1"

-eslint-scope@^5.0.0:
+eslint-scope@^5.0.0, eslint-scope@^5.1.1:
  version "5.1.1"
  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -4089,11 +4190,16 @@ eslint-utils@^2.1.0:
  dependencies:
    eslint-visitor-keys "^1.1.0"

-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
+eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
  version "1.3.0"
  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==

+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
 eslint@^6.7.2:
  version "6.8.0"
  resolved "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz"
@@ -4137,6 +4243,52 @@ eslint@^6.7.2:
    text-table "^0.2.0"
    v8-compile-cache "^2.0.3"

+eslint@^7.27.0:
+  version "7.32.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
 espree@^6.1.2, espree@^6.2.1:
  version "6.2.1"
  resolved "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz"
@@ -4146,6 +4298,15 @@ espree@^6.1.2, espree@^6.2.1:
    acorn-jsx "^5.2.0"
    eslint-visitor-keys "^1.1.0"

+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
 esprima@^4.0.0:
  version "4.0.1"
  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
@@ -4389,7 +4550,7 @@ extsprintf@^1.2.0:
  resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.0.tgz"
  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=

-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -4411,7 +4572,7 @@ fast-json-stable-stringify@^2.0.0:
  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==

-fast-levenshtein@~2.0.6:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
  version "2.0.6"
  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -4449,6 +4610,13 @@ file-entry-cache@^5.0.1:
  dependencies:
    flat-cache "^2.0.1"

+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
 file-loader@^4.2.0:
  version "4.3.0"
  resolved "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz"
@@ -4563,11 +4731,24 @@ flat-cache@^2.0.1:
    rimraf "2.6.3"
    write "1.0.3"

+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
 flatted@^2.0.0:
  version "2.0.2"
  resolved "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz"
  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==

+flatted@^3.1.0:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz"
+  integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
+
 flush-write-stream@^1.0.0:
  version "1.1.1"
  resolved "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz"
@@ -4786,7 +4967,7 @@ glob-parent@^3.1.0:
    is-glob "^3.1.0"
    path-dirname "^1.0.0"

-glob-parent@^5.0.0, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.0:
  version "5.1.2"
  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -4798,7 +4979,7 @@ glob-to-regexp@^0.3.0:
  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz"
  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=

-glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
  version "7.1.7"
  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -4852,6 +5033,13 @@ globals@^12.1.0:
  dependencies:
    type-fest "^0.8.1"

+globals@^13.6.0, globals@^13.9.0:
+  version "13.10.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz"
+  integrity sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==
+  dependencies:
+    type-fest "^0.20.2"
+
 globalthis@^1.0.1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/globalthis/-/globalthis-1.0.2.tgz"
@@ -5347,7 +5535,7 @@ import-fresh@^2.0.0:
    caller-path "^2.0.0"
    resolve-from "^3.0.0"

-import-fresh@^3.0.0:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
  version "3.3.0"
  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -5938,6 +6126,11 @@ json-schema-traverse@^0.4.1:
  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==

+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json-schema@0.2.3:
  version "0.2.3"
  resolved "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
@@ -6084,6 +6277,14 @@ levn@^0.3.0, levn@~0.3.0:
    prelude-ls "~1.1.2"
    type-check "~0.3.2"

+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
 lie@~3.3.0:
  version "3.3.0"
  resolved "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz"
@@ -6157,6 +6358,11 @@ lodash.camelcase@^4.3.0:
  resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=

+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.debounce@^4.0.8:
  version "4.0.8"
  resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -6182,7 +6388,7 @@ lodash.memoize@^4.1.2:
  resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=

-lodash.merge@^4.6.1:
+lodash.merge@^4.6.1, lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
@@ -6192,6 +6398,11 @@ lodash.transform@^4.6.0:
  resolved "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz"
  integrity sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=

+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+
 lodash.uniq@^4.5.0:
  version "4.5.0"
  resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
@@ -6535,6 +6746,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==

+moment@^2.10.2:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
@@ -6595,9 +6811,9 @@ mz@^2.4.0:
    thenify-all "^1.0.0"

 nan@^2.12.1:
-  version "2.14.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
-  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
+  integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==

 nanoid@^3.1.23:
  version "3.1.23"
@@ -6950,6 +7166,18 @@ optionator@^0.8.3:
    type-check "~0.3.2"
    word-wrap "~1.2.3"

+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
 ora@^3.4.0:
  version "3.4.0"
  resolved "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz"
@@ -7061,6 +7289,11 @@ pako@~1.0.2, pako@~1.0.5:
  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz"
  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==

+papaparse@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.3.1.tgz#770b7a9124d821d4b2132132b7bd7dce7194b5b1"
+  integrity sha512-Dbt2yjLJrCwH2sRqKFFJaN5XgIASO9YOFeFP8rIBRG2Ain8mqk5r1M6DkfvqEVozVcz3r3HaUGw253hA1nLIcA==
+
 parallel-transform@^1.1.0:
  version "1.2.0"
  resolved "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz"
@@ -7279,13 +7512,13 @@ pkg-dir@^4.1.0:
    find-up "^4.0.0"

 plist@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.2.tgz#74bbf011124b90421c22d15779cee60060ba95bc"
-  integrity sha512-MSrkwZBdQ6YapHy87/8hDU8MnIcyxBKjeF+McXnr5A9MtffPewTs7G3hlpodT5TacyfIyFTaJEhh3GGcmasTgQ==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.3.tgz#007df34c7be0e2c3dcfcf460d623e6485457857d"
+  integrity sha512-ghdOKN99hh1oEmAlwBmPYo4L+tSQ7O3jRpkhWqOrMz86CWotpVzMevvQ+czo7oPDpOZyA6K06Ci7QVHpoh9gaA==
  dependencies:
    base64-js "^1.5.1"
    xmlbuilder "^9.0.7"
-    xmldom "^0.5.0"
+    xmldom "^0.6.0"

 pnp-webpack-plugin@^1.6.4:
  version "1.6.4"
@@ -7692,6 +7925,11 @@ postcss@^8.1.10:
    nanoid "^3.1.23"
    source-map-js "^0.6.2"

+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -7712,6 +7950,11 @@ prettier@^1.18.2:
  resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz"
  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==

+prettier@^2.3.0:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz"
+  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+
 pretty-error@^2.0.2:
  version "2.1.2"
  resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz"
@@ -8018,6 +8261,11 @@ regexpp@^2.0.1:
  resolved "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz"
  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==

+regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
 regexpu-core@^4.7.1:
  version "4.7.1"
  resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz"
@@ -8118,6 +8366,11 @@ require-directory@^2.1.1:
  resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=

+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
@@ -8150,7 +8403,7 @@ resolve-url@^0.2.1:
  resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=

-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.3.2:
  version "1.20.0"
  resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz"
  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -8337,7 +8590,7 @@ semver-diff@^3.1.1:
  dependencies:
    semver "^6.3.0"

-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0, semver@^5.6.0:
  version "5.7.1"
  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -8530,6 +8783,15 @@ slice-ansi@^2.1.0:
    astral-regex "^1.0.0"
    is-fullwidth-code-point "^2.0.0"

+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 smart-buffer@^4.0.2:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.1.0.tgz#91605c25d91652f4661ea69ccf45f1b331ca21ba"
@@ -8918,7 +9180,7 @@ strip-indent@^2.0.0:
  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz"
  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=

-strip-json-comments@^3.0.1:
+strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
  version "3.1.1"
  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -9004,6 +9266,18 @@ table@^5.2.3:
    slice-ansi "^2.1.0"
    string-width "^3.0.0"

+table@^6.0.9:
+  version "6.7.1"
+  resolved "https://registry.npmjs.org/table/-/table-6.7.1.tgz"
+  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.clonedeep "^4.5.0"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+
 tapable@^1.0.0, tapable@^1.1.3:
  version "1.1.3"
  resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
@@ -9236,7 +9510,7 @@ ts-pnp@^1.1.6:
  resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz"
  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==

-tslib@^1.9.0:
+tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
  version "1.14.1"
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -9246,6 +9520,32 @@ tslib@^2.1.0:
  resolved "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz"
  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==

+tslint@6.1.3:
+  version "6.1.3"
+  resolved "https://registry.npmjs.org/tslint/-/tslint-6.1.3.tgz"
+  integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    builtin-modules "^1.1.1"
+    chalk "^2.3.0"
+    commander "^2.12.1"
+    diff "^4.0.1"
+    glob "^7.1.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.3"
+    resolve "^1.3.2"
+    semver "^5.3.0"
+    tslib "^1.13.0"
+    tsutils "^2.29.0"
+
+tsutils@^2.29.0:
+  version "2.29.0"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz"
+  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
+  dependencies:
+    tslib "^1.8.1"
+
 tty-browserify@0.0.0:
  version "0.0.0"
  resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
@@ -9268,6 +9568,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
  resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"
  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=

+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
 type-check@~0.3.2:
  version "0.3.2"
  resolved "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz"
@@ -9320,6 +9627,11 @@ typedarray@^0.0.6:
  resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

+typescript@^4.3.2:
+  version "4.3.5"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
 uglify-js@3.4.x:
  version "3.4.10"
  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz"
@@ -9628,6 +9940,17 @@ version-range@^1.0.0:
  dependencies:
    version-compare "^1.0.0"

+vls@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.npmjs.org/vls/-/vls-0.7.4.tgz"
+  integrity sha512-uU5HCIK5vX096eMA5fBwyR7tv36m1Ssy910w5ILT5OvCUTXgBR58gZRJWrL2HxCyG8oYXC+oFWjhJc7+ExBUgQ==
+  dependencies:
+    eslint "^7.27.0"
+    eslint-plugin-vue "^7.10.0"
+    prettier "^2.3.0"
+    tslint "6.1.3"
+    typescript "^4.3.2"
+
 vm-browserify@^1.0.1:
  version "1.1.2"
  resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz"
@@ -9944,7 +10267,7 @@ widest-line@^3.1.0:
  dependencies:
    string-width "^4.0.0"

-word-wrap@~1.2.3:
+word-wrap@^1.2.3, word-wrap@~1.2.3:
  version "1.2.3"
  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
@@ -10027,10 +10350,10 @@ xmlbuilder@^9.0.7:
  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
  integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=

-xmldom@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.5.0.tgz#193cb96b84aa3486127ea6272c4596354cb4962e"
-  integrity sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA==
+xmldom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.6.0.tgz#43a96ecb8beece991cef382c08397d82d4d0c46f"
+  integrity sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg==

 xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
  version "4.0.2"
Author	SHA1	Message	Date
Bertrand Benjamin	da5f53c267	Feat: add current year to nav	2022-02-13 18:14:54 +01:00
Bertrand Benjamin	8b92697870	Feat: css to hightlight selected_year	2022-02-13 18:03:44 +01:00
Bertrand Benjamin	4ddfa1654f	Feat: selecting a year is working	2022-02-13 17:57:40 +01:00
Bertrand Benjamin	acab0a9d68	Feat: list years	2022-02-13 17:50:55 +01:00
Bertrand Benjamin	e22445646a	Fix: current year default range	2021-10-08 05:40:10 +02:00
Bertrand Benjamin	e191a47be5	Feat: prepare editing page	2021-08-16 14:46:11 +02:00
Bertrand Benjamin	08c14e1887	Feat: remove applicationMenu	2021-08-16 14:30:45 +02:00
Bertrand Benjamin	9e123a9542	Feat: create hightlightSum component	2021-08-13 10:54:47 +02:00
Bertrand Benjamin	2d0c2c4df9	Feat: ca -> CA	2021-08-13 10:43:29 +02:00
Bertrand Benjamin	da86f4b9f1	Feat: change type base to editable and add getters for hightlights and editable	2021-08-13 10:42:01 +02:00
Bertrand Benjamin	5eb9837e1c	Feat: computed attributes for months	2021-08-13 10:19:26 +02:00
Bertrand Benjamin	9cf4cf934b	Feat: use output function for month description	2021-08-13 09:43:47 +02:00
Bertrand Benjamin	710015a37b	Feat: hightlight for month presentation	2021-08-12 15:17:22 +02:00
Bertrand Benjamin	35666dce00	Feat: locale for date and button for adding next month	2021-08-12 15:12:57 +02:00
Bertrand Benjamin	37d1967343	Feat: simplify createMonth	2021-08-12 14:28:00 +02:00
Bertrand Benjamin	cdbc5f9d51	Feat: add unit and percent to real percent	2021-08-12 14:21:25 +02:00
Bertrand Benjamin	d690bcac56	Feat: add individual percentage and individualize functions on months	2021-08-12 14:12:24 +02:00
Bertrand Benjamin	db21bc1275	Feat: use store/config to display attributs of months	2021-08-12 12:22:03 +02:00
Bertrand Benjamin	4e8189da38	Feat: rename months attributs	2021-08-12 12:09:18 +02:00
Bertrand Benjamin	1e2005613b	Feat: cleaning local css and invert columns	2021-08-12 11:44:09 +02:00
Bertrand Benjamin	8f32f5b1b9	Feat: use boxed for createMonth	2021-08-12 09:48:30 +02:00
Bertrand Benjamin	a61fe7e10c	Feat: fake number in datas.csv and reset default in store	2021-08-12 06:16:32 +02:00
Bertrand Benjamin	2212ff4afe	Feat: split stats in 2 components caOnPeriod and caRepartition	2021-08-12 06:15:36 +02:00
Bertrand Benjamin	ed90959687	Fix: caMean is rounded	2021-08-11 20:49:02 +02:00
Bertrand Benjamin	deb5a61add	Feat: boxed class and tweek button	2021-08-11 20:46:39 +02:00
Bertrand Benjamin	e082bf7164	Feat: button with hover	2021-08-11 18:54:17 +02:00
Bertrand Benjamin	803c695909	Feat: presentation des hightlights	2021-08-11 18:46:10 +02:00
Bertrand Benjamin	c2cc0d0e9c	Feat: goto grid display	2021-08-11 15:27:24 +02:00
Bertrand Benjamin	52c627c4f4	Feat: Move button close to date	2021-08-11 15:01:48 +02:00
Bertrand Benjamin	43e29653ba	Feat: date display	2021-08-11 14:54:27 +02:00
Bertrand Benjamin	9328e2c821	Feat: add datas for july	2021-08-11 14:32:02 +02:00
Bertrand Benjamin	a092549c15	add something for linting	2021-08-10 16:49:33 +02:00
Bertrand Benjamin	e7eb6f87b1	Feat: basic datafile	2021-08-10 11:19:03 +02:00
Bertrand Benjamin	6c006a15fe	Feat: chart delta et banque	2021-08-10 11:17:53 +02:00
Bertrand Benjamin	cb39fbe5dd	Feat: CA chart!!	2021-08-10 10:46:05 +02:00
Bertrand Benjamin	a3cd3864ce	Feat: clean home	2021-08-10 09:16:21 +02:00
Bertrand Benjamin	78bb4cb1ff	Feat: functionnalize months calculus	2021-08-09 14:43:24 +02:00
Bertrand Benjamin	c47062ce86	Feat: add hightlights	2021-08-09 14:07:42 +02:00
Bertrand Benjamin	5020479b0a	Feat: write data on edit	2021-08-09 11:48:24 +02:00
Bertrand Benjamin	899fd95dbd	Feat: restore state and fix hightlights numbers	2021-08-09 11:38:51 +02:00
Bertrand Benjamin	1a2799e986	Feat: read data from csv file	2021-08-09 10:28:01 +02:00
Bertrand Benjamin	7ca7af24b9	Feat: Write data in csv	2021-08-09 09:29:58 +02:00
Bertrand Benjamin	6188337140	Fix: remove useless state	2021-08-09 09:17:11 +02:00
Bertrand Benjamin	791aa12d2d	Start working on csv	2021-08-09 09:09:58 +02:00
Bertrand Benjamin	4a9e49fc20	Feat: fs is now working!!	2021-08-05 09:59:08 +02:00
Bertrand Benjamin	0bd48159a4	Fix: remove unnecessary function parameters	2021-08-05 08:47:01 +02:00
Bertrand Benjamin	b266e9de9b	Fix: Update month input when clicking on preselected ranges	2021-08-04 21:49:07 +02:00
Bertrand Benjamin	4d77e61b25	Fix: hightlights depends on period	2021-08-04 21:20:21 +02:00
Bertrand Benjamin	5683b57e24	Fix: output number in month form	2021-08-04 21:17:40 +02:00
Bertrand Benjamin	a021fe8093	Dev: installation de vls	2021-08-04 19:55:33 +02:00
Bertrand Benjamin	6f43c03808	Feat: hightlights on the period	2021-08-04 19:55:13 +02:00
Bertrand Benjamin	3a0141f961	Fix: orthographe de remuneration	2021-08-04 19:54:30 +02:00
Bertrand Benjamin	7b742d599a	Feat: improve month selector	2021-08-03 16:57:16 +02:00
Bertrand Benjamin	7f9cecf06d	Feat: month selector	2021-08-03 11:34:49 +02:00
Bertrand Benjamin	820bf435e8	Feat: reverse month order	2021-08-03 08:20:54 +02:00
				`@@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path></svg>