#44 - vacation monthly usage

resources/js/Shared/Layout/AppLayout.vue

@@ -15,7 +15,7 @@
 <script setup>
 import MainMenu from '@/Shared/MainMenu'
 import { useToast } from 'vue-toastification'
-import { defineProps, watch } from 'vue'
+import { watch } from 'vue'
 
 const props = defineProps({
   flash: Object,
@@ -30,6 +30,10 @@ watch(() => props.flash, flash => {
     toast.success(flash.success)
   }
 
+  if (flash.info) {
+    toast.info(flash.info)
+  }
+
   if (flash.error) {
     toast.error(flash.error)
   }

resources/js/Shared/MainMenu.vue

@@ -249,7 +249,7 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue'
+import { computed, ref } from 'vue'
 import {
   Dialog,
   DialogOverlay,
@@ -272,7 +272,7 @@ import {
   DocumentTextIcon,
   AdjustmentsIcon,
 } from '@heroicons/vue/outline'
-import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid'
 
 const props = defineProps({
   auth: Object,
@@ -309,7 +309,7 @@ const navigation = computed(() =>
       href: '/monthly-usage',
       component: 'MonthlyUsage',
       icon: AdjustmentsIcon,
-      can: auth.value.can.listMonthlyUsage
+      can: props.auth.can.listMonthlyUsage,
     },
     {
       name: 'Dni wolne',

resources/js/Shared/VacationBar.vue

@@ -0,0 +1,84 @@
+<template>
+  <Popper
+    hover
+    class="h-full w-full"
+  >
+    <div class="flex bg-white text-white">
+      <div
+        v-show="stats.used > 0"
+        :style="`background-color: ${colors.used}; flex-basis: ${calculatePercent(stats.used)}%;`"
+        class="flex items-center justify-center py-2 px-0.5"
+      >
+        <strong>{{ stats.used }}</strong>
+      </div>
+      <div
+        v-show="stats.pending > 0"
+        :style="`background-color: ${colors.pending}; flex-basis: ${calculatePercent(stats.pending)}%;`"
+        class="flex items-center justify-center py-2 px-0.5"
+      >
+        <strong>{{ stats.pending }}</strong>
+      </div>
+      <div
+        v-show="stats.remaining > 0"
+        :style="`background-color: ${colors.remaining}; flex-basis: ${calculatePercent(stats.remaining)}%;`"
+        class="flex items-center justify-center py-2 px-0.5"
+      >
+        <strong>{{ stats.remaining }}</strong>
+      </div>
+    </div>
+    <template #content>
+      <div class="px-4 py-2 bg-white text-md text-gray-900 rounded-md shadow-md flext">
+        <div class="flex items-center font-normal">
+          <i
+            class="inline-block w-5 h-3 mr-3"
+            :style="`background-color: ${colors.used}`"
+          />
+          Wykorzystane:
+          <span class="font-semibold ml-1">{{ stats.used }}</span>
+        </div>
+        <div class="flex items-center font-normal">
+          <i
+            class="inline-block w-5 h-3 mr-3"
+            :style="`background-color: ${colors.pending}`"
+          />
+          Rozpatrywane:
+          <span class="font-semibold ml-1">{{ stats.pending }}</span>
+        </div>
+        <div class="flex items-center font-normal">
+          <i
+            class="inline-block w-5 h-3 mr-3"
+            :style="`background-color: ${colors.remaining}`"
+          />
+          Pozostałe:
+          <span class="font-semibold ml-1">{{ stats.remaining }}</span>
+        </div>
+      </div>
+    </template>
+  </Popper>
+</template>
+
+<script setup>
+import Popper from 'vue3-popper'
+
+const props = defineProps({
+  stats: {
+    type: Object,
+    default: () => ({
+      used: 0,
+      pending: 0,
+      remaining: 0,
+    }),
+  },
+})
+
+const colors = {
+  used: '#2C466F',
+  pending: '#AABDDD',
+  remaining: '#527ABA',
+}
+
+function calculatePercent(value) {
+  return value / (props.stats.used + props.stats.pending + props.stats.remaining) * 100
+}
+
+</script>