Feat: add current year to nav

editable

jsconfig.json

@@ -0,0 +1,5 @@
+"eslint.validate": [
+  "javascript",
+  "javascriptreact",
+  "vue"
+]

package.json

@@ -13,9 +13,14 @@
   },
   "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"
+    "vue-router": "^4.0.8",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

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>

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <Nav></Nav>
-  <router-view></router-view>
+  <div class="content">
+        <router-view></router-view>
+  </div>
 </template>
 
 <script>
@@ -9,9 +11,10 @@ import Nav from './components/nav.vue'
 export default {
   name: 'App',
   components: {
-    Nav
+      Nav
   }
 }
 </script>
 
-<style></style>
+<style>
+</style>

src/background.js

@@ -7,77 +7,78 @@ const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
-  { scheme: 'app', privileges: { secure: true, standard: true } }
+    { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
 async function createWindow() {
-  // Create the browser window.
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      
-      // Use pluginOptions.nodeIntegration, leave this alone
-      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
-    }
-  })
+    // Create the browser window.
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        autoHideMenuBar: true,
+        webPreferences: {
 
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
-  } else {
-    createProtocol('app')
-    // Load the index.html when not in development
-    win.loadURL('app://./index.html')
-  }
+            // Use pluginOptions.nodeIntegration, leave this alone
+            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+            contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
+        }
+    })
+
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+        // Load the url of the dev server if in development mode
+        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+        if (!process.env.IS_TEST) win.webContents.openDevTools()
+    } else {
+        createProtocol('app')
+        // Load the index.html when not in development
+        win.loadURL('app://./index.html')
+    }
 }
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
+    // On macOS it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
 })
 
 app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) createWindow()
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    try {
-      //await installExtension(VUEJS_DEVTOOLS)
-        // vuedev tools for vue3
-        await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
+    if (isDevelopment && !process.env.IS_TEST) {
+        // Install Vue Devtools
+        try {
+            //await installExtension(VUEJS_DEVTOOLS)
+            // vuedev tools for vue3
+            await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
+        } catch (e) {
+            console.error('Vue Devtools failed to install:', e.toString())
+        }
     }
-  }
-  createWindow()
+    createWindow()
 })
 
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
-  if (process.platform === 'win32') {
-    process.on('message', (data) => {
-      if (data === 'graceful-exit') {
-        app.quit()
-      }
-    })
-  } else {
-    process.on('SIGTERM', () => {
-      app.quit()
-    })
-  }
+    if (process.platform === 'win32') {
+        process.on('message', (data) => {
+            if (data === 'graceful-exit') {
+                app.quit()
+            }
+        })
+    } else {
+        process.on('SIGTERM', () => {
+            app.quit()
+        })
+    }
 }

src/components/CreateMonth.vue

@@ -0,0 +1,145 @@
+<template>
+<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">
+        <div class="month">
+            {{ theMonth }} 
+        </div> 
+        <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 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'
+import {  parseISO, addMonths, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'
+
+export default {
+  name: 'NewMonth',
+  props: {
+  },
+  components: {
+  },
+  data () {
+      return {
+            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: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
+        this.toggleAdding()
+        this.writeData()
+    },
+    cancel: function () {
+        this.toggleAdding()
+        this.monthCopy = this.theEmptyMonth
+    },
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    .month-presentation {
+        display: grid;
+        grid-template-columns: 140px 1fr;
+        }
+    .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;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    label{
+        text-align: right;
+        font-size: 0.8em;
+    }
+    .value {
+        font-weight: bold;
+    }
+    .toolbar {
+        text-align: center;
+    }
+</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,146 @@
+<template>
+<div class="month-presentation">
+    <div id="date">
+        <div class="month">
+           {{ theMonth }} 
+        </div> 
+        <div class="year">
+           {{ theYear }} 
+        </div> 
+        <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, mapGetters } from 'vuex'
+import {  parseISO, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'
+export default {
+  name: 'MonthPresentation',
+  props: {
+      TheDate: String,
+      TheMonth: {
+          type: Object,
+      }
+  },
+  data () {
+      return {
+          editing: false,
+          monthCopy: Object,
+      }
+  },
+  mounted: function () {
+        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.writeData()
+          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: grid;
+        grid-template-columns: 140px 1fr;
+        }
+    .month-presentation > * {
+        margin: 20px;
+    }
+
+    #date {
+        font-size: 1em;
+        font-weight: bold;
+        border-right: 1px solid black;
+    }
+    .month{
+        font-size: 2em;
+    }
+
+    #display {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: space-around;
+    }
+    #display > * {
+        margin: 3px;
+        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>

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

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>

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>

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>

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>

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>

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/components/nav.vue

@@ -1,21 +1,87 @@
 <template>
-  <nav>
-  <router-link to="/"> Home </router-link>
-  <router-link to="/config"> Config </router-link>
-  </nav>
+    <nav>
+        <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>

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)
+}
+

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/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',

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

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,130 @@
+import { readFile } from 'fs'
+import Papa from 'papaparse'
+import { getYear } from 'date-fns'
+
+const today = new Date()
+
+const travail = {
+    namespaced: true,
+    state() {
+        return {
+            empty: {
+                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
+                remuneration: 0, // rémunération décidée
+                proPercentage: 50, // Pourcentage du CA pour la partie pro
+            },
+            months: {
+            },
+            range: {
+                start: `${getYear(today)}-01`,
+                end: `${getYear(today)}-12`,
+            },
+        }
+    },
+    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()
+        },
+        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: {
+        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 }) {
+            state.months[date] = month
+        },
+            setRange(state, range) {
+        state.range = range
+        }, 
+    },
+    actions: {
+        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 })
+            } else {
+                console.log("This month does not exists")
+            }
+        },
+        createMonth(context, { date, month }) {
+            // Create a new month
+            if (!(date in context.state.months)) {
+                context.commit('createMonth', { date, month })
+            } else {
+                console.log("This month already exists")
+            }
+        },
+        setRange(context, range) {
+            context.commit("setRange", range)
+        },
+    },
+}
+
+export default travail
+

src/style.css

@@ -0,0 +1,110 @@
+body {
+  background-color: whitesmoke;
+  margin: 0;
+}
+
+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 {
+  color: black;
+  padding: 4px;
+  box-shadow: 1px 1px 2px gray;
+  text-align: center;
+  display: inline-block;
+  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 {
+  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;
+}

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>

src/views/edit.vue

@@ -0,0 +1,22 @@
+<template>
+<h1>Edition</h1>
+
+
+</template>
+
+<script>
+export default {
+    name: 'edit',
+
+    data () {
+        return {}
+    },
+    computed: {
+    },
+    methods: {
+    },
+    mounted () {
+    }, 
+     
+}
+</script>

src/views/home.vue

@@ -1,3 +1,57 @@
 <template>
-<h1>Home</h1>
+  <div id="content">
+    <section id="months">
+      <create-month />
+      <months-list />
+    </section>
+    <section id="stats">
+      <ca-on-period />
+      <ca-repartition />
+    </section>
+  </div>
 </template>
+
+<script>
+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: {
+    },
+    methods: {
+        ...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 {
+  grid-area: months;
+}
+</style>

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

vue.config.js

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