#99 - ui changes

app/Eloquent/Models/User.php

@@ -103,9 +103,9 @@ class User extends Authenticatable
         }
 
         return $query
-            ->where("first_name", "ILIKE", $text)
+            ->where("first_name", "ILIKE", "%{$text}%")
-            ->orWhere("last_name", "ILIKE", $text)
+            ->orWhere("last_name", "ILIKE", "%{$text}%")
-            ->orWhere("email", "ILIKE", $text);
+            ->orWhere("email", "ILIKE", "%{$text}%");
     }
 
     public function scopeWithVacationLimitIn(Builder $query, YearPeriod $yearPeriod): Builder

app/Infrastructure/Http/Controllers/VacationRequestController.php

@@ -113,7 +113,7 @@ class VacationRequestController extends Controller
             "users" => UserResource::collection($users),
             "filters" => [
                 "status" => $status,
-                "user" => $user,
+                "user" => (int)$user,
             ],
         ]);
     }

public/img/logo-white.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="247.56mm" height="84.867mm" version="1.1" viewBox="0 0 247.56 84.867" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-24.251 -29.695)">
+    <text transform="matrix(.28744 0 0 .28614 -24.649 -29.82)" fill="#ffffff" font-family="sans-serif" font-size="133.33px" style="line-height:1.25;shape-inside:url(#rect1079);white-space:pre" xml:space="preserve"><tspan x="485.27344" y="426.98435"><tspan font-family="'Noto Sans'" font-weight="bold">blumilk</tspan></tspan></text>
+    <rect x="49.391" y="55.396" width="36.399" height="31.455" fill="none" stroke-width=".26458"/>
+    <rect x="78.629" y="48.576" width="11.849" height="22.76" fill="none" stroke-width=".26458"/>
+    <rect x="34.217" y="41.501" width="52.169" height="17.731" fill="none" stroke-width=".28432"/>
+    <rect x="29.563" y="50.338" width="21.5" height="59.423" fill="none" stroke-width=".43534"/>
+    <rect x="51.948" y="83.526" width="37.677" height="24.976" fill="none" stroke-width=".25616"/>
+    <path d="m30.841 107.97h18.175v-53.797l-8.9598-9.4978-9.2153 9.5215zm21.47 6.5913h-24.765c-1.8203 0-3.2956-1.476-3.2956-3.2956v-58.402c0-0.85478 0.33302-1.6771 0.92745-2.2909l12.542-12.959c0.62618-0.64734 1.4817-0.99236 2.389-1.004 0.89994 6e-3 1.7582 0.37959 2.3756 1.034l12.224 12.959c0.57644 0.61101 0.89747 1.4199 0.89747 2.2613v58.402c0 1.8196-1.475 3.2956-3.2953 3.2956" fill="#fff"/>
+    <path d="m91.783 114.55h-39.526c-1.8196 0-3.2953-1.4746-3.2953-3.2942v-56.774c0-1.8196 1.4757-3.2956 3.2953-3.2956 1.8203 0 3.2957 1.476 3.2957 3.2956v53.479h32.935v-19.798l-8.3273-8.4141c-0.62195-0.629-0.96555-1.4803-0.95215-2.365 0.012-0.88335 0.37924-1.7254 1.0192-2.3357l8.2603-7.8835v-14.892c0-1.8203 1.4757-3.2956 3.2957-3.2956 1.8203 0 3.2949 1.4753 3.2949 3.2956v16.302c0 0.90064-0.36759 1.7625-1.0195 2.3837l-6.8534 6.5405 6.9201 6.9914c0.61066 0.61736 0.95285 1.4503 0.95285 2.3181v24.447c0 1.8196-1.4746 3.2942-3.2949 3.2942" fill="#fff"/>
+    <path d="m91.785 55.564c-0.95638 0-1.9053-0.41381-2.5573-1.2146l-9.615-11.809-38.795 0.049h-0.0042c-1.8186 0-3.2921-1.4714-3.2953-3.2907-0.0025-1.8189 1.4714-3.2956 3.2911-3.2985l40.363-0.0529h0.0056c0.98883 0 1.9283 0.44661 2.5538 1.2153l10.606 13.025c1.1497 1.4125 0.93768 3.4876-0.47308 4.6369-0.61207 0.49777-1.349 0.73978-2.0793 0.73978" fill="#fff"/>
+    <path d="m81.455 42.589h-40.642c-1.8203 0-3.2953-1.475-3.2953-3.2949v-6.3034c0-1.82 1.475-3.2956 3.2953-3.2956h40.642c1.8196 0 3.2942 1.4757 3.2942 3.2956v6.3034c0 1.82-1.4746 3.2949-3.2942 3.2949" fill="#fff"/>
+    <path d="m55.657 80.088c0-27.744-3.53e-4 -27.811-0.24152-28.455-0.24946-0.66676-0.39359-0.82818-6.5083-7.2892l-1.6452-1.7384h32.308l8.8511 10.869v13.63l-3.9188 3.7465c-2.1553 2.0606-4.1251 3.9568-4.3772 4.2139-0.66375 0.67676-0.94174 1.3731-0.94517 2.3675-0.0049 1.4251 0.0387 1.4818 4.8994 6.3692l4.3418 4.3656v19.731h-32.764z" fill="none" stroke-width=".11786"/>
+    <path d="m30.911 81.056 0.0038-26.842 4.5152-4.6554c2.4834-2.5604 4.565-4.6554 4.626-4.6554 0.06091 0 2.0846 2.0913 4.4971 4.6472l4.3863 4.6472v53.7h-18.032z" fill="none" stroke-width=".11786"/>
+    <rect x="262.33" y="89.057" width="11.698" height="3.2982" fill="#fff" stroke-width=".31054"/>
+  </g>
+</svg>

resources/js/Pages/Calendar.vue

@@ -3,28 +3,28 @@
   <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">
+        <h2 class="text-lg leading-6 text-center font-medium text-gray-900">
           Kalendarz urlopów
         </h2>
-        <div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch">
+        <div class="ml-3 flex items-center rounded-md shadow-sm md:items-stretch">
           <InertiaLink
             v-if="previousMonth"
             as="button"
             :href="`/vacation/calendar/${previousMonth.value}`"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="h-5 w-5" />
           </InertiaLink>
           <span
             v-else
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="h-5 w-5" />
           </span>
           <InertiaLink
             as="button"
             :href="`/vacation/calendar/${currentMonth.value}`"
-            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            class="hidden border-t border-b border-gray-300 bg-white px-2 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
           >
             Dzisiaj
           </InertiaLink>
@@ -32,13 +32,13 @@
             v-if="nextMonth"
             as="button"
             :href="`/vacation/calendar/${nextMonth.value}`"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
           >
             <ChevronRightIcon class="h-5 w-5" />
           </InertiaLink>
           <span
             v-else
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 px-2 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
           >
             <ChevronRightIcon class="h-5 w-5" />
           </span>
@@ -47,7 +47,7 @@
       <div v-if="can.generateTimesheet">
         <a
           :href="`/vacation/timesheet/${selectedMonth.value}`"
-          class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="block text-center ml-3 px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
         >
           Pobierz plik Excel
         </a>

resources/js/Pages/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <InertiaHead title="Strona główna" />
-  <div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
+  <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
-    <div class="grid grid-cols-1 gap-4 lg:col-span-2">
+    <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
       <VacationStats :stats="stats" />
     </div>

resources/js/Pages/Holidays/Create.vue

@@ -5,9 +5,6 @@
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Dodaj dzień wolny
       </h2>
-      <p class="mt-1 text-sm text-gray-500">
-        Użytkownik nie będzie miał możliwości wzięcia urlopu w dzień wolny.
-      </p>
     </div>
     <form
       class="border-t border-gray-200 px-6"

resources/js/Pages/Holidays/Edit.vue

@@ -5,9 +5,6 @@
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Edytuj dzień wolny
       </h2>
-      <p class="mt-1 text-sm text-gray-500">
-        Użytkownik nie będzie miał możliwości wzięcia urlopu w dzień wolny.
-      </p>
     </div>
     <form
       class="border-t border-gray-200 px-6"

resources/js/Pages/Holidays/Index.vue

@@ -6,16 +6,13 @@
         <h2 class="text-lg leading-6 font-medium text-gray-900">
           Dni wolne od pracy
         </h2>
-        <p class="mt-1 text-sm text-gray-500">
-          Lista dni wolnych od pracy w danym roku
-        </p>
       </div>
       <div v-if="can.manageHolidays">
         <InertiaLink
           href="holidays/create"
           class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
         >
-          Dodaj dzień wolny
+          Dodaj dzień
         </InertiaLink>
       </div>
     </div>
@@ -26,25 +23,25 @@
             <tr>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Nazwa
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Data
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Dzień tygodnia
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               />
             </tr>
           </thead>

resources/js/Pages/Users/Create.vue

@@ -5,9 +5,6 @@
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Dodaj użytkownika
       </h2>
-      <p class="mt-1 text-sm text-gray-500">
-        Tylko dodani użytkownicy będą mogli zalogować się do aplikacji.
-      </p>
     </div>
     <form
       class="border-t border-gray-200 px-6"
@@ -116,7 +113,7 @@
         <div class="mt-1 relative sm:mt-0 sm:col-span-2">
           <ListboxButton
             class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
+            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.role, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.role }"
           >
             <span class="block truncate">{{ form.role.label }}</span>
             <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">

resources/js/Pages/Users/Edit.vue

@@ -5,9 +5,6 @@
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Edytuj użytkownika
       </h2>
-      <p class="mt-1 text-sm text-gray-500">
-        Edytuj dane użytkownika, takie jak e-mail czy formę zatrudnienia.
-      </p>
     </div>
     <form
       class="border-t border-gray-200 px-6"

resources/js/Pages/Users/Index.vue

@@ -4,16 +4,13 @@
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
         <h2 class="text-lg leading-6 font-medium text-gray-900">
-          Użytkownicy w organizacji
+          Użytkownicy
         </h2>
-        <p class="mt-1 text-sm text-gray-500">
-          Lista użytkowników w organizacji.
-        </p>
       </div>
       <div>
         <InertiaLink
           href="users/create"
-          class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+          class="inline-flex items-center text-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
         >
           Dodaj użytkownika
         </InertiaLink>
@@ -39,37 +36,37 @@
             <tr>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Imię i nazwisko
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Rola
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Stanowisko
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Forma zatrudnienia
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               >
                 Data rozpoczęcia
               </th>
               <th
                 scope="col"
-                class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
               />
             </tr>
           </thead>

resources/js/Pages/VacationLimits.vue

@@ -6,44 +6,41 @@
         <h2 class="text-lg leading-6 font-medium text-gray-900">
           Dostępne dni urlopu dla użytkowników
         </h2>
-        <p class="mt-1 text-sm text-gray-500">
-          Zarządzaj dostępnymi dniami urlopów dla użytkowników.
-        </p>
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
       <form @submit.prevent="submitVacationDays">
+        <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
           <table class="min-w-full divide-y divide-gray-200 border-b">
             <thead class="bg-gray-50">
               <tr>
                 <th
                   scope="col"
-                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
                 >
                   Imię i nazwisko
                 </th>
                 <th
                   scope="col"
-                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
                 >
                   Forma zatrudnienia
                 </th>
                 <th
                   scope="col"
-                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
                 >
                   Posiada urlop?
                 </th>
                 <th
                   scope="col"
-                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
                 >
                   Pozostałe dni z poprzedniego roku
                 </th>
                 <th
                   scope="col"
-                  class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                  class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
                 >
                   Dostępne dni w roku
                 </th>
@@ -120,6 +117,7 @@
               </tr>
             </tbody>
           </table>
+        </div>
         <div class="flex justify-end py-3 px-4">
           <button
             type="submit"
@@ -131,7 +129,6 @@
       </form>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>

resources/js/Pages/VacationRequest/Create.vue

@@ -1,7 +1,7 @@
 <template>
   <InertiaHead title="Złóż wniosek urlopowy" />
-  <div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
+  <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
-    <div class="lg:col-span-2 h-full bg-white shadow-md flex flex-col">
+    <div class="xl:col-span-2 h-full bg-white shadow-md flex flex-col">
       <div class="p-4 sm:px-6">
         <h2 class="text-lg leading-6 font-medium text-gray-900">
           Złóż wniosek urlopowy
@@ -43,7 +43,7 @@
               <div class="mt-1 relative sm:mt-0 sm:col-span-2">
                 <ListboxButton
                   class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
-                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+                  :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
                 >
                   <span class="flex items-center">
                     <img
@@ -129,44 +129,39 @@
               </div>
             </div>
             <Listbox
-              v-model="form.type"
+              v-model="form.vacationType"
               as="div"
               class="sm:grid sm:grid-cols-3 py-4 items-center"
             >
               <ListboxLabel class="block text-sm font-medium text-gray-700">
-                Rodzaj wniosku
+                Rodzaj urlopu
               </ListboxLabel>
               <div class="mt-1 relative sm:mt-0 sm:col-span-2">
                 <ListboxButton
                   class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
                   :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
                 >
-                  <span class="block truncate">{{ form.type.label }}</span>
+                  <span class="block truncate">{{ form.vacationType.label }}</span>
                   <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
                     <SelectorIcon class="h-5 w-5 text-gray-400" />
                   </span>
                 </ListboxButton>
-
                 <transition
                   leave-active-class="transition ease-in duration-100"
                   leave-from-class="opacity-100"
                   leave-to-class="opacity-0"
                 >
-                  <ListboxOptions
+                  <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                    class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                  >
                     <ListboxOption
-                      v-for="type in vacationTypes"
+                      v-for="vacationType in vacationTypes"
-                      :key="type.value"
+                      :key="vacationType.value"
                       v-slot="{ active, selected }"
                       as="template"
-                      :value="type"
+                      :value="vacationType"
-                    >
-                      <li
-                        :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                     >
+                      <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
                         <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                          {{ type.label }}
+                          {{ vacationType.label }}
                         </span>
 
                         <span
@@ -271,7 +266,7 @@
               >
                 Natychmiastowo zatwierdź wniosek
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-2 sm:mt-0 sm:col-span-2">
                 <Switch
                   id="flowSkipped"
                   v-model="form.flowSkipped"
@@ -346,7 +341,7 @@ const form = useForm({
     : props.auth.user,
   from: null,
   to: null,
-  type: props.vacationTypes[0],
+  vacationType: props.vacationTypes[0],
   comment: null,
   flowSkipped: false,
 })
@@ -385,7 +380,7 @@ function createForm() {
   form
     .transform(data => ({
       ...data,
-      type: data.type.value,
+      type: data.vacationType.value,
       user: data.user.id,
     }))
     .post('/vacation/requests')
@@ -418,20 +413,20 @@ function resetForm() {
 
 async function refreshEstimatedDays(from, to) {
   if (from && to) {
-    const res = await axios.post('/api/calculate-vacation/days', { from, to })
+    const res = await axios.post('/api/vacation/calculate-days', { from, to })
 
     estimatedDays.value = res.data
   }
 }
 
 async function refreshVacationStats(user) {
-  const res = await axios.post('/api/calculate-vacation/stats', { user: user.id })
+  const res = await axios.post('/api/vacation/calculate-stats', { user: user.id })
 
   stats.value = res.data
 }
 
 async function refreshUnavailableDays(user) {
-  const res = await axios.post('/api/calculate-unavailable-days', { user: user.id })
+  const res = await axios.post('/api/vacation/calculate-unavailable-days', { user: user.id })
   const unavailableDays = res.data
 
   fromInputConfig.disable = [

resources/js/Pages/VacationRequest/Index.vue

@@ -2,11 +2,9 @@
   <InertiaHead title="Moje wnioski urlopowe" />
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
       <h2 class="text-lg leading-6 font-medium text-gray-900">
         Moje wnioski urlopowe
       </h2>
-      </div>
       <div>
         <InertiaLink
           href="/vacation/requests/create"
@@ -16,13 +14,13 @@
         </InertiaLink>
       </div>
     </div>
-    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+    <div class="border-t border-gray-200">
-      <nav class="relative shadow flex divide-x divide-gray-200 border-t border-gray-200">
+      <div class="hidden md:flex relative shadow divide-x divide-gray-200">
-        <InertiaLink
+        <button
           v-for="(status, index) in statuses"
           :key="index"
-          :data="{ status: status.value }"
           :class="[status.value === filters.status ? 'text-blumilk-600 font-semibold' : 'hover:bg-blumilk-25 text-gray-700 focus:z-10', 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center']"
+          @click="form.status = status"
         >
           <span>{{ status.name }}</span>
           <span
@@ -31,45 +29,102 @@
           >
             {{ stats[status.value] }}
           </span>
-          <span :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']" />
+          <span
-        </InertiaLink>
+            :class="[status.value === filters.status ? 'bg-blumilk-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5']"
-      </nav>
+          />
+        </button>
+      </div>
+      <div class="md:hidden px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
+        <Listbox
+          v-model="form.status"
+          as="div"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
+            Status
+          </ListboxLabel>
+          <div class="mt-1 relative sm:mt-0">
+            <ListboxButton
+              class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+            >
+              <span class="flex items-center">
+                {{ form.status.name }}
+              </span>
+              <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                <SelectorIcon class="h-5 w-5 text-gray-400" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+              >
+                <ListboxOption
+                  v-for="status in statuses"
+                  :key="status.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="status"
+                >
+                  <li
+                    :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  >
+                    {{ status.name }}
+
+                    <span
+                      v-if="selected"
+                      :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="h-5 w-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
+    </div>
+    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Numer
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Rodzaj urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Od
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Do
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Dni urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Status
             </th>
@@ -134,12 +189,16 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon } from '@heroicons/vue/solid'
+import { ChevronRightIcon, SelectorIcon, CheckIcon } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
 import VacationType from '@/Shared/VacationType'
 import Pagination from '@/Shared/Pagination'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { reactive, watch } from 'vue'
+import { debounce } from 'lodash'
+import { Inertia } from '@inertiajs/inertia'
 
-defineProps({
+const props = defineProps({
   requests: Object,
   stats: Object,
   filters: Object,
@@ -163,4 +222,16 @@ const statuses = [
     value: 'failed',
   },
 ]
+
+const form = reactive({
+  status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
+})
+
+watch(form, debounce(() => {
+  Inertia.get('/vacation/requests/me', { status: form.status.value }, {
+    preserveState: true,
+    replace: false,
+  })
+}, 300))
+
 </script>

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -16,21 +16,18 @@
         </InertiaLink>
       </div>
     </div>
-    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
     <div class="border-t border-gray-200">
-        <div class="px-4 grid grid-cols-2 gap-4">
+      <div class="px-4 py-4 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
-          <div>
         <Listbox
           v-model="form.user"
           as="div"
-              class="py-4 items-center"
         >
           <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
             Pracownik
           </ListboxLabel>
           <div class="mt-1 relative sm:mt-0">
             <ListboxButton
-                  class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+              class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
             >
               <span v-if="form.user === null">
                 Wszyscy
@@ -67,7 +64,7 @@
                     :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                   >
                     <div class="flex items-center">
-                          Wszyscy pracownicy
+                      Wszyscy
                     </div>
 
                     <span
@@ -111,19 +108,16 @@
             </transition>
           </div>
         </Listbox>
-          </div>
-          <div>
         <Listbox
           v-model="form.status"
           as="div"
-              class="py-4 items-center"
         >
           <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
             Status
           </ListboxLabel>
           <div class="mt-1 relative sm:mt-0">
             <ListboxButton
-                  class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+              class="bg-white relative w-full h-10 max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
             >
               <span class="flex items-center">
                 {{ form.status.name }}
@@ -149,7 +143,7 @@
                   :value="status"
                 >
                   <li
-                        :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                    :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                   >
                     {{ status.name }}
 
@@ -167,49 +161,49 @@
         </Listbox>
       </div>
     </div>
-      </div>
+    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Numer
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Pracownik
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Rodzaj urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Od
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Do
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Dni urlopu
             </th>
             <th
               scope="col"
-              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap"
             >
               Status
             </th>
@@ -232,10 +226,9 @@
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
               <div class="flex">
-                <img
+                <div class="h-10 w-10 rounded-full">
-                  class="h-10 w-10 rounded-full"
+                  <img :src="request.user.avatar">
-                  :src="request.user.avatar"
+                </div>
-                >
                 <div class="ml-3">
                   <p class="text-sm font-medium text-gray-900">
                     {{ request.user.name }}

resources/js/Shared/Layout/AppLayout.vue

@@ -5,7 +5,7 @@
       :years="years"
     />
     <main class="lg:ml-64 flex flex-col flex-1 py-8">
-      <div class="px-4">
+      <div class="lg:px-4">
         <slot />
       </div>
     </main>

resources/js/Shared/MainMenu.vue

@@ -49,11 +49,13 @@
             </div>
           </TransitionChild>
           <div class="flex-shrink-0 flex items-center px-4">
-            <InertiaLink href="/">
+            <InertiaLink
+              href="/"
+              @click="sidebarOpen = false;"
+            >
               <img
                 class="h-8 w-auto"
-                src="/img/logo-white.png"
+                src="/img/logo-white.svg"
-                alt="Workflow"
               >
             </InertiaLink>
           </div>
@@ -61,7 +63,8 @@
             <div class="px-2 space-y-1">
               <InertiaLink
                 href="/"
-                :class="[$page.component === 'Dashboard' ? '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']"
+                :class="[$page.component === 'Dashboard' ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md']"
+                @click="sidebarOpen = false;"
               >
                 <HomeIcon class="mr-4 flex-shrink-0 h-6 w-6 text-blumilk-200" />
                 Strona główna
@@ -74,6 +77,7 @@
                   :key="item.name"
                   :href="item.href"
                   :class="[$page.component === item.component ? 'bg-blumilk-800 text-white' : 'text-blumilk-100 hover:text-white hover:bg-blumilk-600', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']"
+                  @click="sidebarOpen = false;"
                 >
                   <component
                     :is="item.icon"
@@ -95,9 +99,8 @@
       <div class="flex items-center flex-shrink-0 px-4">
         <InertiaLink href="/">
           <img
-            class="h-8 w-auto"
+            src="/img/logo-white.svg"
-            src="/img/logo-white.png"
+            class="w-auto h-10 text-red-600 fil-red-600"
-            alt="Workflow"
           >
         </InertiaLink>
       </div>

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="grid grid-cols-2 gap-4">
+  <section class="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <div class="bg-white shadow-md p-4">
+    <div class="hidden md:block bg-white shadow-md p-4">
       <VacationChart :stats="stats" />
     </div>
     <div class="h-full">

resources/js/app.js

@@ -41,5 +41,6 @@ Flatpickr.setDefaults({
   enableTime: false,
   altFormat: 'd.m.Y',
   altInput: true,
+  disableMobile: true,
 })
 

routes/api.php

@@ -8,7 +8,7 @@ use Toby\Infrastructure\Http\Controllers\Api\CalculateUserVacationStatsControlle
 use Toby\Infrastructure\Http\Controllers\Api\CalculateVacationDaysController;
 
 Route::middleware("auth:sanctum")->group(function (): void {
-    Route::post("calculate-vacation-days", CalculateVacationDaysController::class);
+    Route::post("vacation/calculate-days", CalculateVacationDaysController::class);
-    Route::post("calculate-vacation-stats", CalculateUserVacationStatsController::class);
+    Route::post("vacation/calculate-stats", CalculateUserVacationStatsController::class);
-    Route::post("calculate-unavailable-days", CalculateUserUnavailableDaysController::class);
+    Route::post("vacation/calculate-unavailable-days", CalculateUserUnavailableDaysController::class);
 });