lafrite/Sousmargot
1
0
Fork 0
Code Issues Pull Requests Packages Releases Wiki Activity

Compare commits

base: lafrite:a61fe7e10ce436585bee999f0a9ce8aa69db8ae5
Branches Tags
lafrite:master
lafrite:split_front_back
lafrite:dev
lafrite:passleouinj
..
compare: lafrite:e7eb6f87b17174757a3575e011a9aeaf87048777
Branches Tags
lafrite:split_front_back
lafrite:dev
lafrite:passleouinj
lafrite:master

No commits in common. "a61fe7e10ce436585bee999f0a9ce8aa69db8ae5" and "e7eb6f87b17174757a3575e011a9aeaf87048777" have entirely different histories.
a61fe7e10c ... e7eb6f87b1

13 changed files with 123 additions and 467 deletions
Show Stats Expand all files Collapse all files

5
jsconfig.json
View File

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

3
src/components/CreateMonth.vue
View File

@ -95,8 +95,7 @@ export default {
.month-presentation {
display: inline-flex;
flex-direction: row;
box-shadow: 5px 5px 10px gray;
border-left: 1rem solid green;
background-color: palegreen;
align-items: center;
justify-content: space-between;
border-radius: 10px;

51
src/components/MonthPresentation.vue
View File

@ -1,17 +1,7 @@
<template>
<div class="boxed month-presentation">
<div class="month-presentation">
<div class="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>
{{ TheDate }}
</div>
<div id="display">
<ul>
@ -47,12 +37,16 @@
</li>
</ul>
</div>
<div class="actions">
<button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
<button class="validate" @click="save" v-show="editing"> Valider </button>
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import { parseISO, format } from 'date-fns'
export default {
name: 'MonthPresentation',
props: {
@ -71,15 +65,6 @@ export default {
this.monthCopy = {...this.TheMonth}
},
computed: {
rawDate: function () {
return parseISO(this.TheDate, "yyyy-MM", new Date())
},
theMonth: function () {
return format(this.rawDate, "MMM", )
},
theYear: function () {
return format(this.rawDate, "YYY", )
},
},
methods: {
...mapActions('travail', {
@ -107,26 +92,21 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
/*
display: inline-flex;
flex-direction: row;
*/
display: grid;
grid-template-columns: 140px 6fr;
background-color: mintcream;
align-items: center;
justify-content: space-between;
width: 100%;
border-radius: 10px;
}
.month-presentation > * {
margin: 20px;
}
.date {
font-size: 1em;
font-size: 1.5em;
font-weight: bold;
border-right: 1px solid black;
}
.month{
font-size: 2em;
}
ul {
@ -149,11 +129,4 @@ export default {
.novisible {
display: None;
}
button {
margin-top: 5px;
padding: 4px;
font-size: 0.8em;
width: auto;
}
</style>

86
src/components/caOnPeriod.vue
View File

@ -1,86 +0,0 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<ul>
<li>{{ ca }} €</li>
<li>CA</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ remuneration }} €</li>
<li>Rémunération</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ caPersoUntouch }} €</li>
<li>13e mois</li>
</ul>
</div>
</div>
<revenus-chart/>
</template>
<script>
import { mapGetters } from 'vuex'
import { caTotal,
caMean,
remuneration,
caPersoUntouch
} from '../lib/months'
import RevenusChart from '../components/graphs/RevenusChart.vue'
export default {
name: 'caOnPeriod',
components: {
RevenusChart: RevenusChart,
},
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()},
remuneration: function () {return remuneration(this.months).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>

66
src/components/caRepartition.vue
View File

@ -1,66 +0,0 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<ul>
<li>{{ caTheo }} €</li>
<li>CA "séances effectuées"</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ notInvoiced }} €</li>
<li>Non facturé</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ retrocession }} €</li>
<li>Rétrocession</li>
</ul>
</div>
</div>
<repartition-chart/>
</template>
<script>
import { mapGetters } from 'vuex'
import {
caTheo,
notInvoiced,
retrocession,
} from '../lib/months'
import RepartitionChart from './graphs/RepartitionChart.vue'
export default {
name: 'caRepartition',
components: {
RepartitionChart: RepartitionChart,
},
data () {
return {}
},
computed: {
...mapGetters('config', {
caProPercentage: 'caProPercentage',
}),
...mapGetters('travail', {
months: "months",
}),
caTheo: function () {return caTheo(this.months).toLocaleString()},
notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
retrocession: function () {return retrocession(this.months).toLocaleString()},
},
mounted () {
},
methods: {
},
}
</script>
<style scoped>
.hightlights{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

69
src/components/graphs/RepartitionChart.vue
View File

@ -1,69 +0,0 @@
<template>
<div>
<canvas id="repartition-chart"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js'
import { mapGetters } from 'vuex'
import {
notInvoiced,
caPro,
remuneration,
retrocession,
caPersoUntouch,
} 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: [
caPro(this.months, this.caProPercentage),
notInvoiced(this.months),
retrocession(this.months),
remuneration(this.months),
caPersoUntouch(this.months, this.caProPercentage),
],
},
],
},
options: {
legend: {position: 'right'},
}
}
return datas
},
},
methods: {
},
mounted() {
const ctx = document.getElementById('repartition-chart');
new Chart(ctx, this.graphDatas);
}
}
</script>

84
src/components/hightlights.vue
View File

@ -1,72 +1,68 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<div id="hightlights">
<div class="hightlight">
<ul>
<li>{{ ca }} €</li>
<li>{{ ca }}</li>
<li>CA</li>
</ul>
</div>
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ caMean }} €</li>
<li>{{ caMean }}</li>
<li>CA moyen</li>
</ul>
</div>
<!--
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ caTheo }}</li>
<li>CA des séances effectuées</li>
</ul>
</div>
-->
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ caUnFactured }} €</li>
<li>{{ caTheo - ca }}</li>
<li>Non facturé</li>
</ul>
</div>
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ remuneration }} €</li>
<li>{{ remuneration }}</li>
<li>Rémunération</li>
</ul>
</div>
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ remunerationMean }} €</li>
<li>{{ remunerationMean }}</li>
<li>Rémunération moyenne</li>
</ul>
</div>
<!--
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ retrocession }}</li>
<li>Rétrocession</li>
</ul>
</div>
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ retrocessionMean }}</li>
<li>Rétrocession moyenne</li>
</ul>
</div>
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ caPro }}</li>
<li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
</ul>
</div>
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ caPerso }}</li>
<li> CA pour la partie perso</li>
</ul>
</div>
-->
<div class="hightlight boxed">
<div class="hightlight">
<ul>
<li>{{ caPersoUntouch }} €</li>
<li>{{ caPersoUntouch }}</li>
<li> CA perso non utilisé pour se rémunérer</li>
</ul>
</div>
@ -101,17 +97,16 @@ export default {
...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()},
ca: function () {return caTotal(this.months)},
caMean: function () {return caMean(this.months)},
caTheo: function () {return caTheo(this.months)},
remuneration: function () {return remuneration(this.months)},
remunerationMean: function () {return remunerationMean(this.months)},
retrocession: function () {return retrocession(this.months)},
retrocessionMean: function () {return retrocessionMean(this.months)},
caPro: function () {return caPro(this.months, this.caProPercentage)},
caPerso: function () {return caPerso(this.months, this.caProPercentage)},
caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage)},
},
mounted () {
@ -122,27 +117,4 @@ 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>

6
src/components/nav.vue
View File

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

9
src/lib/months.js
View File

@ -22,10 +22,10 @@ export function caTotal (months) {
}
export function caMean (months) {
// Mean of CA
return Math.floor(caTotal(months) / count(months))
return caTotal(months) / count(months)
}
export function caTheo (months) {
// Total theorical CA
return Object.values(months).map(a => a.ca_theo).reduce(
@ -34,11 +34,6 @@ export function caTheo (months) {
)
}
export function notInvoiced (months) {
// Total of not invoiced sessions
return caTheo(months) - caTotal(months)
}
export function remuneration (months) {
// Total remuneration
return Object.values(months).map(a => a.remuneration).reduce(

96
src/store/travail/index.js
View File

@ -15,54 +15,54 @@ const travail = {
remuneration: 0, // rémunération décidée
},
months: {
// "2021-01": {
// ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 6747, // ca au moment de la rétrocession
// ca_react: null, // ca réactualisé
// retro: 893, // montant de la rétrocession
// remuneration: 2000, // rémunération décidée
// },
// "2021-02": {
// ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 5183, // ca au moment de la rétrocession
// ca_react: null, // ca réactualisé
// retro: 665, // montant de la rétrocession
// remuneration: 1500, // rémunération décidée
// },
// "2021-03": {
// ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 7088, // ca au moment de la rétrocession
// ca_react: null, // ca réactualisé
// retro: 855, // montant de la rétrocession
// remuneration: 2000, // rémunération décidée
// },
// "2021-04": {
// ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 4194, // ca au moment de la rétrocession
// ca_react: 5630, // ca réactualisé
// retro: 627, // montant de la rétrocession
// remuneration: 2000, // rémunération décidée
// },
// "2021-05": {
// ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 5564, // ca au moment de la rétrocession
// ca_react: 6335, // ca réactualisé
// retro: 699, // montant de la rétrocession
// remuneration: 2800, // rémunération décidée
// },
// "2021-06": {
// ca_theo: null, // ca théorique basé sur les séances effectuées
// nbr_seances: null, // Nombre de séances effectuées sur le mois
// ca_retro: 5442, // ca au moment de la rétrocession
// ca_react: 6335, // ca réactualisé
// retro: 638, // montant de la rétrocession
// remuneration: 2800, // rémunération décidée
// },
"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",

60
src/style.css
View File

@ -1,6 +1,3 @@
body {
background-color: whitesmoke;
}
.actions {
display: inline-flex;
@ -9,75 +6,22 @@ body {
}
button {
border: none;
color: white;
padding: 15px 32px;
box-shadow: 1px 1px 2px gray;
text-align: center;
display: inline-block;
width: 100%;
font-size: 16px;
border-radius: 5px;
background-color: white;
transition: all 0.2s ease-out;
color: black;
}
button:hover {
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;
}
.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: 3rem;
font-weight: bold;
text-align: center;
}
.hightlight > ul :last-child{
text-align: end;
}

32
src/views/home.vue
View File

@ -1,15 +1,18 @@
<template>
<h1>Home</h1>
<revenus-chart/>
<section id="selector">
<month-selector/>
</section>
<div id="content">
<section id="months">
<h2> Mois </h2>
<create-month/>
<months-list/>
</section>
<section id="stats">
<ca-on-period/>
<ca-repartition/>
<h2>Résumé</h2>
<highlights/>
</section>
</div>
</template>
@ -19,16 +22,16 @@ import { mapActions } from 'vuex'
import MonthsList from '../components/MonthsUl.vue'
import CreateMonth from '../components/CreateMonth.vue'
import MonthSelector from '../components/monthSelector.vue'
import caOnPeriod from '../components/caOnPeriod.vue'
import caRepartition from '../components/caRepartition.vue'
import Highlights from '../components/hightlights.vue'
import RevenusChart from '../components/graphs/RevenusChart.vue'
export default {
name: 'home',
components: {
MonthsList: MonthsList,
CreateMonth: CreateMonth,
MonthSelector: MonthSelector,
caOnPeriod: caOnPeriod,
caRepartition: caRepartition,
highlights: Highlights,
RevenusChart: RevenusChart,
},
data () {
return {}
@ -41,25 +44,22 @@ export default {
}),
},
mounted () {
this.loadMonths()
//this.loadMonths()
},
}
</script>
<style scoped>
#selector {
display: none;
background-color: gray;
padding: 10px;
}
#content {
display: grid;
grid-template-columns: 1fr 3fr;
display: inline-flex;
flex-direction: row;
background-color: red;
margin: 0;
}
#content > * {
margin: 20px;
margin: 10px;
}
#stats {
#months {
flex-basis: 60%;
}
</style>

13
userDir/datas.csv
View File

@ -1,8 +1,7 @@
ca_theo,nbr_seances,ca_retro,ca_react,retro,remuneration,date
7000,,6747,,893,2000,2021-01
5200,,5183,,665,1500,2021-02
7100,,7088,,855,2000,2021-03
5700,,4194,5630,627,2000,2021-04
6500,,5564,6335,699,2800,2021-05
6725,235,5442,6376,638,2800,2021-06
2176,81,1274,,172,2000,2021-07
,,6747,,893,2000,2021-01
,,5183,,665,1500,2021-02
,,7088,,855,2000,2021-03
,,4194,5630,627,2000,2021-04
,,5564,6335,699,2800,2021-05
,,5442,6335,638,2800,2021-06
1 ca_theo nbr_seances ca_retro ca_react retro remuneration date
2 7000 6747 893 2000 2021-01
3 5200 5183 665 1500 2021-02
4 7100 7088 855 2000 2021-03
5 5700 4194 5630 627 2000 2021-04
6 6500 5564 6335 699 2800 2021-05
7 6725 235 5442 6376 6335 638 2800 2021-06
2176 81 1274 172 2000 2021-07