Start working on csv

package.json

@@ -14,8 +14,12 @@
   "main": "background.js",
   "dependencies": {
     "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"
+    "vue-router": "^4.0.8",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -9,7 +9,7 @@ import Nav from './components/nav.vue'
 export default {
   name: 'App',
   components: {
-    Nav
+      Nav
   }
 }
 </script>

src/components/CreateMonth.vue

@@ -0,0 +1,130 @@
+<template>
+<div id="create-month" >
+    <div class="month-presentation" id="new-month">
+      <div class="date">
+          <input type="month" v-model="monthDate">
+      </div>
+      <div class="datas">
+        <ul>
+            <li> 
+                <label for="ca-theo">CA théorique</label>
+                <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" >
+            </li>
+            <li> 
+                <label for="ca-retro">CA rétrocession</label>
+                <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" >
+            </li>
+            <li> 
+                <label for="ca-react">CA réactualisé</label>
+                <input type="number" v-model.number="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.number="monthCopy.nbr_seances" id="nbr-seances" class="value" >
+            </li>
+            <li> 
+                <label for="retro">Montant de la rétrocession</label>
+                <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" >
+            </li>
+            <li> 
+                <label for="remuneration">Rémunération effectuée</label>
+                <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
+            </li>
+        </ul>
+      </div>
+      <div class="actions">
+        <button class="validate" @click="save"> Valider </button>
+        <button class="cancel" @click="cancel"> Annuler </button>
+      </div>
+    </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('-')
+}
+
+export default {
+  name: 'NewMonth',
+  props: {
+  },
+  components: {
+  },
+  data () {
+      return {
+            monthDate: formatDate(today),
+            monthCopy: Object,
+          }
+  },
+  mounted () {
+      this.monthCopy = this.theEmptyMonth
+  },
+  computed: {
+    ...mapGetters('travail', {
+        'theEmptyMonth': 'TheEmptyMonth',
+    }),
+  },
+  methods: {
+    ...mapActions('travail', {
+        'createMonth': 'createMonth',
+    }),
+    save: function () {
+        console.log("save")
+        console.log(this.monthCopy)
+        this.createMonth({date: this.monthDate, month: this.monthCopy})
+    },
+    cancel: function () {
+      this.monthCopy = this.theEmptyMonth
+    },
+  },
+}
+</script>
+
+<!-- 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%;
+        }
+    .month-presentation > * {
+        margin: 20px;
+    }
+
+    .date > input {
+        font-size: 1.2em;
+        font-weight: bold;
+        display: inline-flex;
+        width: 6rem;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+    }
+    li {
+        margin: 3px;
+        width: 30%;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+</style>

src/components/MonthForm.vue

@@ -0,0 +1,69 @@
+<template>
+<form>
+    <ul>
+        <li>
+        <label for="ca-theo">CA théorique</label>
+        <input type="number" id="ca-theo">
+        </li>
+        <li>
+        <label for="ca-retro">CA rétrocession</label>
+        <input type="number" id="ca-retro">
+        </li>
+        <li>
+        <label for="ca-react">CA réactualisé</label>
+        <input type="number" id="ca-react">
+        </li>
+        <li>
+        <label for="nbr-seance">Nombre de séances effectuées</label>
+        <input type="number" id="nbr-seance">
+        </li>
+        <li>
+        <label for="retro">Montant de la rétrocession</label>
+        <input type="number" id="retro">
+        </li>
+        <li>
+        <label for="remumeration">Rémunération effectuée</label>
+        <input type="number" id="remumeration">
+        </li>
+    </ul>
+</form>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'MonthForm',
+  props: {
+      editMonth: {}
+  },
+  computed: {
+    ...mapGetters({
+        TheEmpty: "travail/TheEmptyMonth",
+    })
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+}
+li {
+    margin: 3px;
+    width: 30%;
+    display: flex;
+    flex-direction: column-reverse;
+}
+li > label {
+    font-size: 0.8em;
+}
+input {
+    width: 4em;
+    font-size: 1.5em;
+}
+
+</style>

src/components/MonthPresentation.vue

@@ -0,0 +1,131 @@
+<template>
+<div class="month-presentation">
+  <div class="date">
+    {{ TheDate }}
+  </div>
+  <div id="display">
+    <ul>
+        <li> 
+            <label for="ca-theo">CA "Séances effectuées"</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="ca-retro">CA "Séances facturées"</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="ca-react">CA "Séances facturées" réactualisé</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
+            <input type="number" v-model.number="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.number="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.number="monthCopy.retro" id="retro" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="remuneration">Rémunération </label>
+            <span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
+        </li>
+    </ul>
+  </div>
+  <div class="actions">
+    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
+    <button class="validate" @click="save" v-show="editing"> Valider </button>
+    <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'MonthPresentation',
+  props: {
+      TheDate: String,
+      TheMonth: {
+          type: Object,
+      }
+  },
+  data () {
+      return {
+          editing: false,
+          monthCopy: Object,
+      }
+  },
+  mounted: function () {
+        this.monthCopy =  {...this.TheMonth}
+      },
+  computed: {
+  },
+  methods: {
+    ...mapActions('travail', {
+        'updateMonth': 'updateMonth',
+    }),
+    ...mapActions('config', {
+        'loadData': 'loadData',
+    }),
+      toggleEdit: function () {
+          this.editing = !this.editing
+          },
+      save: function () {
+          this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
+          this.toggleEdit()
+          },
+      cancel: function () {
+          this.monthCopy =  {...this.TheMonth}
+          this.toggleEdit()
+          },
+  }
+}
+</script>
+
+<!-- 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;
+        }
+    .month-presentation > * {
+        margin: 20px;
+    }
+
+    .date {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+    }
+    li {
+        margin: 3px;
+        width: 30%;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    .novisible {
+        display: None;
+    }
+</style>

src/components/MonthsUl.vue

@@ -0,0 +1,42 @@
+<template>
+<ul>
+    <li v-for="date in dates" :key="date">
+         <month-presentation :TheDate=date :TheMonth=getMonth(date)></month-presentation>
+    </li>
+</ul>
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import MonthPresentation from "./MonthPresentation"
+export default {
+  name: 'Months',
+  components: {
+        MonthPresentation: MonthPresentation
+  }, 
+  props: {
+  },
+  computed: {
+    ...mapGetters({
+        dates: "travail/MonthsDate",
+        getMonth: "travail/getMonth",
+    })
+  },
+}
+</script>
+
+<style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    padding-bottom: 10px;
+}
+
+li:last-of-type {
+    padding-bottom: 0;
+    }
+
+</style>

src/components/hightlights.vue

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

src/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>

src/main.js

@@ -1,8 +1,11 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 import router from '@/router'
+import store from '@/store'
+import '@/style.css'
 
 
 const app = createApp(App)
 app.use(router)
+app.use(store)
 app.mount('#app')

src/store/config/index.js

@@ -0,0 +1,42 @@
+import path from 'path'
+import Papa from 'papaparse'
+
+const config = {
+    namespaced: true,
+    state() {
+        return {
+            //userDir: '~/.config/sousmargot/',
+            userDir: './userDir/',
+            dataFile: 'datas.csv'
+        }
+    },
+    getters: {
+        userDir (state) { return state.userDir },
+        dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
+    },
+    mutations: {
+    },
+    actions: {
+        loadConfig (context) {
+            // load config file at  ~/.config/sousmargot/config.json
+            return context.state.userDir
+        },
+        loadData (context) {
+            // load data in userDir on dataFile
+            console.log("Loading data")
+            console.log(context.getters.dataFilePath)
+        },
+        writeData (context) {
+            // overwrite the dataFile with months datas
+            console.log("Writing data")
+            console.log(context.getters.dataFilePath)
+            const months = context.rootGetters['travail/monthsAll']
+            console.log(Object.keys(months).map(k => {return { ...months[k], date: k}}))
+            const csv = Papa.unparse(context.rootGetters['travail/monthsAll'])
+            console.log(csv)
+        },
+    },
+}
+
+export default config
+

src/store/index.js

@@ -0,0 +1,13 @@
+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,
+    }
+})
+
+export default store

src/store/travail/index.js

@@ -0,0 +1,202 @@
+
+function monthCA(month) {
+    if (month.ca_react) {
+        return month.ca_react
+    } else {
+        return month.ca_retro
+    }
+}
+
+const travail = {
+    namespaced: true,
+    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é
+                retro: 0, // montant de la rétrocession
+                remuneration: 0, // rémunération décidée
+            },
+            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
+                    remuneration: 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
+                    remuneration: 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
+                    remuneration: 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
+                    remuneration: 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
+                    remuneration: 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
+                    remuneration: 2800, // rémunération décidée
+                },
+            },
+            range: {
+                start: "2021-01",
+                end: "2021-08",
+            },
+        }
+    },
+    getters: {
+        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()
+        },
+        months: (state, getters) => {
+            // Get in range months
+            return Object.keys(state.months)
+                .filter(a => getters.MonthsDate.includes(a))
+                .reduce((acc, v) => {
+                    acc[v] = state.months[v];
+                    return acc;
+                }, {})
+        },
+        monthsAll: (state) => {
+            // Get in range months
+            return state.months
+        },
+        getMonth: (state) => (date) => {
+            return state.months[date]
+        },
+        count: (state, getters) => { 
+            // Amount of mounts
+            return Object.keys(getters.months).length 
+        },
+        ca: (state, getters) => {
+            // Total CA (ca_react if sets, ca_retro otherwise)
+            return Object.values(getters.months).map(a => monthCA(a)).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        caMean: (state, getters) => {
+            // Mean of CA
+            return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        caTheo: (state, getters) => {
+            // Total theorical CA
+            return Object.values(getters.months).map(a => a.ca_theo).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remuneration: (state, getters) => {
+            // Total remuneration
+            return Object.values(getters.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remunerationMean: (state, getters) => {
+            // Mean of remuneration
+            return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        retrocession: (state, getters) => {
+            // Total retrocession
+            return Object.values(getters.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                )
+        },
+        retrocessionMean: (state, getters) => {
+            // Mean of retrocession
+            return Math.floor(
+                Object.values(getters.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                ) / getters.count
+            )
+        },
+    },
+    mutations: {
+        updateMonth(state, { date, month }) {
+            state.months[date] = month
+        },
+        createMonth (state, { date, month }) {
+            state.months[date] = month
+        },
+            setRange(state, range) {
+        state.range = range
+        }, 
+    },
+    actions: {
+        updateMonth(context, { date, month }) {
+            // update month's datas 
+            if (date in context.state.months) {
+                context.commit('updateMonth', { date, month })
+            } else {
+                console.log("This month does not exists")
+            }
+        },
+        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)
+            } else {
+                console.log("This month already exists")
+            }
+        },
+        setRange(context, range) {
+            context.commit("setRange", range)
+        },
+    },
+}
+
+export default travail
+

src/style.css

@@ -0,0 +1,27 @@
+
+.actions {
+    display: inline-flex;
+    flex-direction: column;
+    width: 120px;
+}
+
+button {
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+    font-size: 16px;
+    border-radius: 5px;
+    color: black;
+    }
+.validate {
+  background-color: green;
+}
+.cancel {
+  background-color: red;
+}
+.edit {
+  background-color: orange;
+}

src/views/home.vue

@@ -1,3 +1,65 @@
 <template>
 <h1>Home</h1>
+<button @click="writeData" ></button>
+<section id="selector">
+   <month-selector> 
+   </month-selector> 
+</section>
+<div id="content">
+    <section id="months">
+        <h2> Mois </h2>
+        <create-month></create-month>
+        <months-list></months-list>
+    </section>
+    <section id="stats">
+        <h2>Résumé</h2>
+        <highlights></highlights> 
+    </section>
+</div>
 </template>
+
+<script>
+import { mapActions } from 'vuex'
+import MonthsList from '../components/MonthsUl.vue'
+import CreateMonth from '../components/CreateMonth.vue'
+import MonthSelector from '../components/monthSelector.vue'
+import Highlights from '../components/hightlights.vue'
+export default {
+    name: 'home',
+    components: {
+        MonthsList: MonthsList,
+        CreateMonth: CreateMonth,
+        MonthSelector: MonthSelector,
+        highlights: Highlights,
+    },
+    data () {
+        return {}
+    },
+    computed: {
+    },
+    methods: {
+        ...mapActions('config', {
+            'loadData': 'loadData',
+            'writeData': 'writeData',
+        }),
+    },
+    mounted () {
+        this.loadData()
+    }, 
+}
+</script>
+
+<style scoped>
+#content {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: red;
+    margin: 0;
+}
+#content > * {
+    margin: 10px;
+}
+#months {
+    flex-basis: 60%;
+}
+</style>

userDir/datas.csv

@@ -0,0 +1 @@
+ca_theo, nbr_seances, ca_retro, ca_react, retro, remuneration,

vue.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true
+    }
+  }
+}