feat: redesign dashboard

.babelrc

@@ -1,5 +1,14 @@
 {
   "presets": [
-    ["env", { "modules": false }]
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-nullish-coalescing-operator",
+    "@babel/plugin-transform-optional-chaining"
   ]
 }

package.json

@@ -8,15 +8,28 @@
         "build": "cross-env NODE_ENV=production webpack --no-progress --colors --hide-modules --mode=production"
     },
     "dependencies": {
-        "vue": "^2.5.16"
+        "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-brands-svg-icons": "^6.5.1",
+        "@fortawesome/free-regular-svg-icons": "^6.5.1",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/vue-fontawesome": "^2.0.10",
+        "bootstrap": "^4.6.2",
+        "chart.js": "^3.9.1",
+        "chartjs-plugin-datalabels": "^2.2.0",
+        "moment": "^2.30.1",
+        "values.js": "^2.1.1",
+        "vue": "^2.5.16",
+        "vue-chartjs": "^4.1.2",
+        "vue2-datepicker": "^3.11.1"
     },
     "devDependencies": {
-        "babel-core": "^6.26.3",
-        "babel-loader": "^7.1.4",
+        "@babel/core": "^7.24.0",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+        "@babel/plugin-transform-optional-chaining": "^7.23.4",
+        "@babel/preset-env": "^7.24.0",
+        "babel-loader": "^8.2.5",
         "babel-polyfill": "^6.26.0",
-        "babel-preset-env": "^1.7.0",
-        "bootstrap-vue": "^2.0.0-rc.25",
-        "chart.js": "^2.5.0",
+        "bootstrap-vue": "^2.23.1",
         "clean-webpack-plugin": "^0.1.19",
         "copy-webpack-plugin": "^4.0.1",
         "cross-env": "^3.0.0",
@@ -35,6 +48,8 @@
         "pug-loader": "^2.4.0",
         "pug-plain-loader": "^1.0.0",
         "raw-loader": "^0.5.1",
+        "sass": "^1.71.1",
+        "sass-loader": "^10.5.2",
         "style-loader": "^0.21.0",
         "toastr": "^2.1.4",
         "vue-clickaway": "^2.1.0",
@@ -54,9 +69,21 @@
         "vuex-router-sync": "^3.0.0",
         "webpack": "^4.8.3",
         "webpack-bundle-analyzer": "^2.11.1",
-        "webpack-cli": "^2.1.3",
+        "webpack-cli": "^3.1.1",
         "webpack-dev-server": "^3.1.4",
         "webpack-pwa-manifest": "^3.6.2",
         "workbox-webpack-plugin": "^3.6.3"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
     }
 }

src/assets/less/utils/_buttons.less

@@ -40,7 +40,3 @@
     border-color: @active-border;
   }
 }
-
-.btn-square {
-  aspect-ratio: 1 / 1;
-}

src/assets/less/utils/_spacing.less

@@ -1,9 +1,11 @@
+@import "_variables";
+
 each(range(10), {
   .gx-@{index} {
-    column-gap: 4px * @index;
+    column-gap: @default-gap * @index;
   }
 
   .gy-@{index} {
-      row-gap: 4px * @index;
+      row-gap: @default-gap * @index;
   }
 })

src/assets/less/utils/_variables.less

@@ -0,0 +1,22 @@
+@default-gap: 4px;
+
+@grey-50: #212121;
+@grey-300: #9E9D9D;
+@grey-400: #A3A3A3;
+@grey-500: #D6D6D6;
+@grey-600: #EBEBEB;
+@grey-700: #EEEEEE;
+@grey-900: #FFFFFF;
+
+@primary-soft: #D3F1F8;
+@primary-main: #0AA6C9;
+@secondary-soft: #FDEEF0;
+@secondary-main: #FBB829;
+@info-soft: #D0EDFB;
+@info-main: #59B8E6;
+@success-soft: #D1EFDD;
+@success-main: #00C851;
+@danger-soft: #F9D5D5;
+@danger-main: #FF4444;
+@inactive-soft: @grey-600;
+@inactive-main: @grey-300;

src/assets/less/utils/utils.less

@@ -1,4 +1,5 @@
 @plugin "utils";
 
+@import "_variables";
 @import "_spacing";
 @import "_buttons";

src/assets/scss/bootstrap/_buttons.scss

@@ -0,0 +1,7 @@
+@import "bootstrap/scss/mixins/buttons";
+
+@import "variables";
+
+.btn-square {
+  aspect-ratio: 1 / 1;
+}

src/assets/scss/bootstrap/_variables.scss

@@ -0,0 +1,31 @@
+$primary: #0AA6C9;
+$secondary: #FBB829;
+$success: #00C851;
+$info: #59B8E6;
+$danger: #FF4444;
+$inactive: #9E9D9D;
+
+$gray-900: #212121;
+$gray-600: #9E9D9D;
+$gray-500: #A3A3A3;
+$gray-400: #D6D6D6;
+$gray-200: #EBEBEB;
+$gray-100: #EEEEEE;
+$white: #FFFFFF;
+
+$primary-soft: #D3F1F8;
+$secondary-soft: #FDEED0;
+$success-soft: #D1EFDD;
+$info-soft: #D0EDFB;
+$danger-soft: #F9D5D5;
+$inactive-soft: #EBEBEB;
+
+$theme-colors: (
+        "inactive": $inactive,
+        "primary-soft": $primary-soft,
+        "secondary-soft": $secondary-soft,
+        "success-soft": $success-soft,
+        "info-soft": $info-soft,
+        "danger-soft": $danger-soft,
+        "inactive-soft": $inactive-soft
+);

src/assets/scss/bootstrap/mixins/rounded.scss

@@ -0,0 +1,21 @@
+@import "bootstrap/scss/variables";
+
+@mixin rounded($coefficient: 1, $side: all, $radius: $border-radius) {
+  @if $side == all {
+    border-radius: $radius * $coefficient;
+  } @else {
+    @if $side == top {
+      border-top-left-radius: $radius * $coefficient;
+      border-top-right-radius: $radius * $coefficient;
+    } @else if $side == bottom {
+      border-bottom-left-radius: $radius * $coefficient;
+      border-bottom-right-radius: $radius * $coefficient;
+    } @else if $side == left {
+      border-top-left-radius: $radius * $coefficient;
+      border-bottom-left-radius: $radius * $coefficient;
+    } @else if $side == right {
+      border-top-right-radius: $radius * $coefficient;
+      border-bottom-right-radius: $radius * $coefficient;
+    }
+  }
+}

src/assets/scss/bootstrap/theme.scss

@@ -0,0 +1,12 @@
+@import "variables";
+
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-vue/src/index";
+
+@import "mixins/rounded";
+
+@import "utilities/spacing";
+
+@import "buttons";
+
+

src/assets/scss/bootstrap/utilities/_spacing.scss

@@ -0,0 +1,13 @@
+@for $i from 0 through 10 {
+  .gx-#{$i} {
+    column-gap: #{$i * 4}px;
+  }
+
+  .gy-#{$i} {
+    row-gap: #{$i * 4}px;
+  }
+
+  .g-#{$i} {
+    gap: #{$i * 4}px;
+  }
+}

src/assets/scss/components/_widgets.scss

@@ -0,0 +1,56 @@
+@import "../bootstrap/theme";
+
+$widget-horizontal-padding: 22px;
+$widget-vertical-padding: 14px;
+
+.widget-py {
+  padding-top: $widget-vertical-padding;
+  padding-bottom: $widget-vertical-padding;
+}
+
+.widget-px {
+  padding-left: $widget-horizontal-padding;
+  padding-right: $widget-horizontal-padding;
+}
+
+.widget-card {
+  border-radius: 12px;
+  color: $gray-900;
+  border: 1px solid $gray-400;
+  overflow: hidden;
+
+  .card-header {
+    font-size: 1.125rem;
+    font-weight: 500;
+    color: $gray-900;
+    line-height: 110%;
+
+    & > p, span {
+      font-size: 1.125rem;
+      font-weight: 500;
+      color: $gray-900;
+      line-height: 110%;
+    }
+
+    background-color: $white;
+    border-bottom: none;
+  }
+
+  .card-body {
+    padding: 0;
+
+    & .form-group {
+      label {
+        color: $gray-900;
+        font-size: 0.875rem;
+        font-weight: normal;
+        line-height: 1rem;
+        margin-bottom: 4px;
+      }
+    }
+  }
+
+  button {
+    font-variant: small-caps;
+  }
+}

src/assets/scss/components/components.scss

@@ -0,0 +1 @@
+@import "widgets";

src/assets/scss/styles.scss

@@ -0,0 +1,2 @@
+@import "bootstrap/theme";
+@import "components/components";

src/components/Availability.vue

@@ -187,7 +187,6 @@ export default {
 
   computed: {
     countriesFilter: function() {
-      console.log(this.countries);
       return [
         {label: 'All', value: ''},
         ...this.countries.map(country => {

src/components/Dashboard.vue

@@ -4,34 +4,40 @@ div
     div(class='col')
       DueTimesheetWarningWidget
 
-  div(class='row')
+  div(class='row statistics full-height mb-3')
+    div(class='col-xl-3')
+      WorkSummaryWidget(v-if='timesheet' :timesheet='timesheet')
+    div(class='col-xl-3')
+      ContractsChartWidget(v-if='timesheet' :timesheet='timesheet')
     div(class='col-xl-6')
       PerformanceWidget(v-if='timesheet' :timesheet='timesheet')
-      TimesheetWidget(v-if='timesheet' :timesheet='timesheet' v-on:submit='reloadTimesheets')
 
+  div(class='row')
     div(class='col-xl-6')
-      AbsenceWidget
-      BirthdayWidget
+      LeavesWidget
       LeaveWidget
+
+    div(class='col-xl-6')
+      AgendaWidget
 </template>
 
 <script>
 import store from '../store';
 import * as types from '../store/mutation-types';
-import moment from 'moment';
 import PerformanceWidget from './widgets/PerformanceWidget.vue';
-import AbsenceWidget from './widgets/AbsenceWidget.vue';
-import BirthdayWidget from './widgets/BirthdayWidget.vue';
 import DueTimesheetWarningWidget from './widgets/DueTimesheetWarningWidget.vue';
-import TimesheetWidget from './widgets/TimesheetWidget.vue';
 import LeaveWidget from './widgets/LeaveWidget.vue';
+import LeavesWidget from "./widgets/LeavesWidget/LeavesWidget.vue";
+import ContractsChartWidget from "./widgets/Charts/ContractsChartWidget.vue";
+import WorkSummaryWidget from "./widgets/Charts/WorkSummaryWidget.vue";
+import AgendaWidget from "./widgets/AgendaWidget/AgendaWidget.vue";
 
 
 export default {
   name: 'dashboard',
 
   created: function() {
-    new Promise((resolve, reject) => {
+    new Promise((resolve) => {
       if (!store.getters.current_timesheet) {
         store.dispatch(types.NINETOFIVER_RELOAD_TIMESHEETS).then(() => resolve())
       } else{
@@ -45,12 +51,13 @@ export default {
   },
 
   components: {
+    AgendaWidget,
+    LeavesWidget,
     PerformanceWidget,
-    AbsenceWidget,
-    BirthdayWidget,
     DueTimesheetWarningWidget,
-    TimesheetWidget,
     LeaveWidget,
+    ContractsChartWidget,
+    WorkSummaryWidget,
   },
 
   methods: {
@@ -61,5 +68,20 @@ export default {
 }
 </script>
 
-<style lang='less'>
+<style scoped lang='scss'>
+.row {
+  --gap: 12px;
+  margin-left: calc(var(--gap) * -0.5);
+  margin-right: calc(var(--gap) * -0.5);
+
+  & > div {
+    padding: 0 calc(var(--gap) / 2);
+  }
+
+  &.full-height {
+    & > div > div {
+      height: 100%;
+    }
+  }
+}
 </style>