#43 - vacation summary for employee (#66)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* #5 - bump dependencies

* #43 - wip

* #43 - add composer script

* #43 - fix

* #43 - fix

* #43 - wip

* #43 - ecs fix

* #43 - cr fix

* #43 - cr fix

* #43 - fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

resources/js/Shared/Layout/AppLayout.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full">
     <MainMenu />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
-      <div>
+      <div class="px-4">
         <slot />
       </div>
     </main>

resources/js/Shared/MainMenu.vue

@@ -110,7 +110,7 @@
             :class="[$page.url === '/' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md']"
           >
             <HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
-            Dashboard
+            Strona główna
           </InertiaLink>
         </div>
         <div class="mt-4 pt-4">
@@ -337,8 +337,6 @@ export default {
       ].filter(item => item.can))
 
     const userNavigation = [
-      {name: 'Your Profile', href: '#'},
-      {name: 'Settings', href: '#'},
       {name: 'Wyloguj się', href: '/logout', method: 'post', as: 'button'},
     ]
 

resources/js/Shared/VacationChart.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-chart
+    style="height: 600px;"
+    :autoresize="true"
+    :option="option"
+  />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import {computed} from 'vue'
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+export default {
+  name: 'VacationChart',
+  components: {
+    VChart,
+  },
+  props: {
+    stats: {
+      type: Object,
+      default: () => ({
+        used: 0,
+        pending: 0,
+        remaining: 0,
+      }),
+    },
+  },
+  setup(props) {
+    const option = computed(() => ({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)',
+      },
+      color: [
+        '#2C466F',
+        '#AABDDD',
+        '#527ABA',
+      ],
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+        data: ['Wykorzystane', 'Rozpatrywane', 'Pozostałe'],
+      },
+      series: [
+        {
+          name: 'Urlop wypoczynkowy',
+          type: 'pie',
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            position: 'inner',
+            formatter: param => param.value !== 0 ? param.value : '' ,
+            fontWeight: 'bold',
+            fontSize: 16,
+            color: '#FFFFFF',
+            labelLine: {
+              show: false,
+            },
+          },
+          data: [
+            { value: props.stats.used, name: 'Wykorzystane' },
+            { value: props.stats.pending, name: 'Rozpatrywane' },
+            { value: props.stats.remaining, name: 'Pozostałe' },
+          ],
+          radius: ['30%', '70%'],
+        },
+      ],
+    }))
+
+    return { option }
+  },
+}
+</script>