#71 - annual summary (#113)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* fix

* lint fix

* cr fix

* fix

resources/js/Shared/MainMenu.vue

@@ -277,6 +277,7 @@ import {
   UserGroupIcon,
   XIcon,
   SunIcon,
+  ClipboardListIcon,
   StarIcon,
   CalendarIcon,
   DocumentTextIcon,
@@ -335,6 +336,14 @@ const navigation = computed(() =>
       icon: SunIcon,
       can: props.auth.can.manageVacationLimits,
     },
+    {
+
+      name: 'Podsumowanie roczne',
+      href: '/vacation/annual-summary',
+      component: 'AnnualSummary',
+      icon: ClipboardListIcon,
+      can: true,
+    },
     {
       name: 'Użytkownicy',
       href: '/users',

resources/js/Shared/VacationBar.vue

@@ -1,7 +1,7 @@
 <template>
   <Popper
     hover
-    class="w-full h-full"
+    class="w-full"
   >
     <div class="flex text-white bg-white">
       <div
@@ -27,7 +27,7 @@
       </div>
     </div>
     <template #content>
-      <div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md flext">
+      <div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md">
         <div class="flex items-center font-normal">
           <i
             class="inline-block mr-3 w-5 h-3"

resources/js/Shared/VacationPopup.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="py-2 px-6 text-left text-gray-900 whitespace-nowrap bg-white rounded-lg border border-gray-400">
+    <dl class="divide-y divide-gray-200">
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Nr wniosku
+        </dt>
+        <dd class="text-sm text-gray-900">
+          <InertiaLink
+            :href="`/vacation/requests/${vacation.id}`"
+            class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
+          >
+            {{ vacation.name }}
+          </InertiaLink>
+        </dd>
+      </div>
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Rodzaj urlopu
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <VacationType :type="vacation.type" />
+        </dd>
+      </div>
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Obecny status
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <Status :status="vacation.state" />
+        </dd>
+      </div>
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Data
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <template v-if="vacation.days > 1">
+            {{ vacation.from }} - {{ vacation.to }}
+          </template>
+          <template v-else>
+            {{ vacation.from }}
+          </template>
+          <span class="font-semibold">
+            [Liczba dni: {{ vacation.days }}]
+          </span>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</template>
+
+
+<script setup>
+import VacationType from '@/Shared/VacationType'
+import Status from '@/Shared/Status'
+
+defineProps({
+  vacation: Object,
+})
+
+</script>

resources/js/Shared/VacationTypeCalendarIcon.vue

@@ -8,7 +8,7 @@
       </div>
     </div>
     <template #content>
-      <div class="py-1 px-2 text-xs text-gray-900 bg-white shadow-md ">
+      <div class="py-2 px-4 text-xs text-gray-900 bg-white rounded-lg border border-gray-400 ">
         {{ typeInfo.text }}
       </div>
     </template>