Feat: create hightlightSum component

editable

jsconfig.json

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

package.json

@@ -13,8 +13,10 @@
   },
   "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",

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="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">
-        <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>
+        <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>
-</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,29 +40,62 @@ 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.monthCopy = this.theEmptyMonth
+        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>

src/components/MonthPresentation.vue

@@ -1,52 +1,37 @@
 <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 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 } 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.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>

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

@@ -1,58 +1,92 @@
 <template>
-<div id="hightlights"> 
-    <div class="hightlight">
+<div class="hightlights"> 
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ ca }}</li>
+            <li>{{ ca }} €</li>
             <li>CA</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ caMean }}</li>
+            <li>{{ caMean }} €</li>
             <li>CA moyen</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <!--
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caTheo }}</li>
             <li>CA des séances effectuées</li>
         </ul>
     </div>
-    <div class="hightlight">
+    -->
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ caTheo - ca }}</li>
+            <li>{{ caUnFactured }} €</li>
             <li>Non facturé</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ remuneration }}</li>
+            <li>{{ remuneration }} €</li>
             <li>Rémunération</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ remunerationMean }}</li>
+            <li>{{ remunerationMean }} €</li>
             <li>Rémunération moyenne</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <!--
+    <div class="hightlight boxed">
         <ul>
             <li>{{ retrocession }}</li>
             <li>Rétrocession</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <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: {
@@ -61,15 +95,26 @@ export default {
         return {}
         },
     computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
         ...mapGetters('travail', {
-            ca: "ca",
-            caMean: "caMean",
-            caTheo: "caTheo",
-            remuneration: "remuneration",
-            remunerationMean: "remunerationMean",
-            retrocession: "retrocession",
-            retrocessionMean: "retrocessionMean",
-        })
+            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: {
       },
@@ -77,4 +122,27 @@ export default {
 </script>
 
 <style scoped>
+.hightlights {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+.hightlight > ul{
+    list-style-type: none;
+    display: flex;
+    flex-flow: column wrap;
+    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/nav.vue

@@ -1,8 +1,11 @@
 <template>
-  <nav>
-  <router-link to="/"> Home </router-link>
-  <router-link to="/config"> Config </router-link>
-  </nav>
+    <h1>Sous Margot</h1>
+    <!--
+    <nav>
+        <router-link to="/"> Home </router-link>
+        <router-link to="/config"> Config </router-link>
+    </nav>
+    -->
 </template>
 
 <script>
@@ -15,7 +18,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-nav {
-    background-color: green;
-}
 </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/store/config/index.js

@@ -0,0 +1,171 @@
+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
+            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

@@ -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,
     }
 })
 

src/store/travail/index.js

@@ -1,72 +1,21 @@
-function monthCA(month) {
-    if (month.ca_react) {
-        return month.ca_react
-    } else {
-        return month.ca_retro
-    }
-}
+import { readFile } from 'fs'
+import Papa from 'papaparse'
+
 
 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é
+                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: {
-                "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",
@@ -85,14 +34,23 @@ const travail = {
             // 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
-            return Object.keys(state.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) => {
             return state.months[date]
@@ -101,63 +59,16 @@ const travail = {
             // 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: {
+        cleanMonths (state) {
+            // erase months
+            state.months = []
+        },
+        importMonths(state, months) {
+            // overwrite months
+            state.months = months
+        },
         updateMonth(state, { date, month }) {
             state.months[date] = month
         },
@@ -169,6 +80,23 @@ const travail = {
         }, 
     },
     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) {
@@ -180,9 +108,7 @@ const travail = {
         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")
             }
@@ -190,7 +116,6 @@ const travail = {
         setRange(context, range) {
             context.commit("setRange", range)
         },
-
     },
 }
 

src/style.css

@@ -1,27 +1,88 @@
-
-.actions {
-    display: inline-flex;
-    flex-direction: column;
-    width: 120px;
+body {
+    background-color: whitesmoke;
 }
 
 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;
-    color: black;
-    }
+    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 {
-  background-color: green;
+    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;
 }

src/views/home.vue

@@ -1,62 +1,58 @@
 <template>
-<h1>Home</h1>
-<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>
+        <create-month/>
+        <months-list/>
     </section>
     <section id="stats">
-        <h2>Résumé</h2>
-        <highlights></highlights> 
+        <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 MonthSelector from '../components/monthSelector.vue'
-import Highlights from '../components/hightlights.vue'
+import caOnPeriod from '../components/caOnPeriod.vue'
+import caRepartition from '../components/caRepartition.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
-        MonthSelector: MonthSelector,
-        highlights: Highlights,
-        },
+        caOnPeriod: caOnPeriod,
+        caRepartition: caRepartition,
+    },
     data () {
         return {}
-        },
+    },
     computed: {
-        ...mapGetters({
-            count: "datas/count",
-        })
-      },
-      methods: {
-        ...mapActions({
-        })
-      },
+    },
+    methods: {
+        ...mapActions('travail', {
+            'loadMonths': 'loadMonths',
+        }),
+    },
+    mounted () {
+        this.loadMonths()
+    }, 
 }
 </script>
 
 <style scoped>
 #content {
-    display: inline-flex;
-    flex-direction: row;
-    background-color: red;
-    margin: 0;
+    display: grid;
+    grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
+    grid-template-areas: 
+        "stats months";
+    gap: 1em; 
 }
-#content > * {
-    margin: 10px;
+#stats {
+    grid-area: stats;
 }
 #months {
-    flex-basis: 60%;
+    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