#44 - ui for summary

resources/js/Composables/monthInfo.js

@@ -2,50 +2,62 @@ const months = [
   {
     'name': 'Styczeń',
     'value': 'january',
+    'shortcut': 'Sty',
   },
   {
     'name': 'Luty',
     'value': 'february',
+    'shortcut': 'Lut',
   },
   {
     'name': 'Marzec',
     'value': 'march',
+    'shortcut': 'Mar',
   },
   {
     'name': 'Kwiecień',
     'value': 'april',
+    'shortcut': 'Kwi',
   },
   {
     'name': 'Maj',
     'value': 'may',
+    'shortcut':'Maj',
   },
   {
     'name': 'Czerwiec',
     'value': 'june',
+    'shortcut': 'Cze',
   },
   {
     'name': 'Lipiec',
     'value': 'july',
+    'shortcut': 'Lip',
   },
   {
     'name': 'Sierpień',
     'value': 'august',
+    'shortcut': 'Sie',
   },
   {
     'name': 'Wrzesień',
     'value': 'september',
+    'shortcut': 'Wrz',
   },
   {
     'name': 'Październik',
     'value': 'october',
+    'shortcut': 'Paź',
   },
   {
     'name': 'Listopad',
     'value': 'november',
+    'shortcut': 'Lis',
   },
   {
     'name': 'Grudzień',
     'value': 'december',
+    'shortcut': 'Gru',
   },
 ]
 

resources/js/Pages/MonthlyUsage.vue

@@ -0,0 +1,120 @@
+<template>
+  <InertiaHead title="Wykorzystanie miesięczne urlopu" />
+  <div class="bg-white shadow-md">
+    <div class="flex justify-between items-center p-4 sm:px-6">
+      <div class="flex items-center">
+        <h2 class="text-lg leading-6 font-medium text-gray-900">
+          Wykorzystanie miesięczne urlopu
+        </h2>
+        <div class="ml-5">
+          ROK TUTAJ
+        </div>
+        <div class="ml-5">
+          Select z typami urlopów
+        </div>
+      </div>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-center text-sm border border-gray-300">
+        <thead>
+          <tr>
+            <th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300" />
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Limit zaległy (2021)
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Limit obecny (2022)
+            </th>
+            <th
+              v-for="month in months"
+              :key="month"
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+              style="min-width: 46px;"
+            >
+              <div>
+                {{ month.shortcut }}
+              </div>
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Wykorzystany
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Rozpatrywany
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Pozostało
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="user in users.data"
+            :key="user.id"
+          >
+            <th
+              class="border border-gray-300 py-2 px-4"
+            >
+              <div class="flex justify-start items-center">
+                <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                  <img
+                    class="h-10 w-10 rounded-full"
+                    :src="user.avatar"
+                  >
+                </span>
+                <div class="ml-3">
+                  <div
+                    class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  >
+                    {{ user.name }}
+                  </div>
+                </div>
+              </div>
+            </th>
+            <td
+              v-for="index in 17"
+              :key="index"
+              class="border border-gray-300"
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useMonthInfo} from '@/Composables/monthInfo'
+
+export default {
+  name: 'MonthlyUsage',
+  components: {
+  },
+  props: {
+    users: {
+      type: Object,
+      default: () => null,
+    },
+    can: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  setup() {
+    const {getMonths} = useMonthInfo()
+    const months = getMonths()
+    return {
+      months,
+    }
+  },
+}
+</script>

resources/js/Shared/MainMenu.vue

@@ -281,7 +281,9 @@ import {
   XIcon,
   SunIcon,
   StarIcon,
-  CalendarIcon, DocumentTextIcon,
+  CalendarIcon,
+  DocumentTextIcon,
+  AdjustmentsIcon,
 } from '@heroicons/vue/outline'
 import {
   CashIcon,
@@ -320,6 +322,7 @@ export default {
     UserGroupIcon,
     SunIcon,
     CalendarIcon,
+    AdjustmentsIcon,
   },
   setup() {
     const sidebarOpen = ref(false)
@@ -332,6 +335,7 @@ export default {
         {name: 'Moje wnioski', href: '/vacation-requests/me', component: 'VacationRequest/Index' , icon: DocumentTextIcon, can: true},
         {name: 'Wnioski urlopowe', href: '/vacation-requests', component: 'VacationRequest/IndexForApprovers', icon: CollectionIcon, can: auth.value.can.listAllVacationRequests},
         {name: 'Kalendarz urlopów', href: '/vacation-calendar', component: 'Calendar', icon: CalendarIcon, can: true},
+        {name: 'Wykorzystanie urlopu', href: '/monthly-usage', component: 'MonthlyUsage', icon: AdjustmentsIcon, can: auth.value.can.listMonthlyUsage},
         {name: 'Dni wolne', href: '/holidays', component: 'Holidays/Index', icon: StarIcon, can: true},
         {name: 'Limity urlopów', href: '/vacation-limits', component: 'VacationLimits', icon: SunIcon, can: auth.value.can.manageVacationLimits},
         {name: 'Użytkownicy', href: '/users', component: 'Users/Index', icon: UserGroupIcon, can: auth.value.can.manageUsers},