From d60dc75f996e641c4161c78d7279dd7b8cd71ecf Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Thu, 21 Apr 2022 08:16:31 +0200
Subject: [PATCH] #118 - keys (#128)

* #118 - wip

* #118 - keys

* #118 - fix

* #118 - fix menu

* #118 - fix to policies and added translations

* #118 - wip

* #118 - tests

* #118 - fix

* #118 - fix

* #118 - fix

* Update resources/lang/pl.json

Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>

* #118 - cr fix

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
---
 .../Providers/AuthServiceProvider.php         |   3 +
 app/Domain/Policies/KeyPolicy.php             |  26 ++
 app/Eloquent/Models/Key.php                   |  31 ++
 app/Eloquent/Models/User.php                  |   5 +
 .../Http/Controllers/KeysController.php       | 104 ++++++
 .../Http/Requests/GiveKeyRequest.php          |  23 ++
 .../Http/Resources/KeyResource.php            |  25 ++
 database/factories/KeyFactory.php             |  21 ++
 .../2022_04_12_152528_create_keys_table.php   |  26 ++
 database/seeders/DatabaseSeeder.php           |   7 +
 database/seeders/DemoSeeder.php               |   7 +
 resources/js/Pages/Keys.vue                   | 351 ++++++++++++++++++
 resources/js/Shared/MainMenu.vue              |  10 +-
 resources/lang/pl.json                        |   6 +-
 routes/web.php                                |   9 +-
 tests/Feature/KeyTest.php                     | 118 ++++++
 16 files changed, 769 insertions(+), 3 deletions(-)
 create mode 100644 app/Domain/Policies/KeyPolicy.php
 create mode 100644 app/Eloquent/Models/Key.php
 create mode 100644 app/Infrastructure/Http/Controllers/KeysController.php
 create mode 100644 app/Infrastructure/Http/Requests/GiveKeyRequest.php
 create mode 100644 app/Infrastructure/Http/Resources/KeyResource.php
 create mode 100644 database/factories/KeyFactory.php
 create mode 100644 database/migrations/2022_04_12_152528_create_keys_table.php
 create mode 100644 resources/js/Pages/Keys.vue
 create mode 100644 tests/Feature/KeyTest.php

diff --git a/app/Architecture/Providers/AuthServiceProvider.php b/app/Architecture/Providers/AuthServiceProvider.php
index afa2b3b..cb5b112 100644
--- a/app/Architecture/Providers/AuthServiceProvider.php
+++ b/app/Architecture/Providers/AuthServiceProvider.php
@@ -7,7 +7,9 @@ namespace Toby\Architecture\Providers;
 use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
 use Illuminate\Support\Facades\Gate;
 use Toby\Domain\Enums\Role;
+use Toby\Domain\Policies\KeyPolicy;
 use Toby\Domain\Policies\VacationRequestPolicy;
+use Toby\Eloquent\Models\Key;
 use Toby\Eloquent\Models\User;
 use Toby\Eloquent\Models\VacationRequest;
 
@@ -15,6 +17,7 @@ class AuthServiceProvider extends ServiceProvider
 {
     protected $policies = [
         VacationRequest::class => VacationRequestPolicy::class,
+        Key::class => KeyPolicy::class,
     ];
 
     public function boot(): void
diff --git a/app/Domain/Policies/KeyPolicy.php b/app/Domain/Policies/KeyPolicy.php
new file mode 100644
index 0000000..cb62986
--- /dev/null
+++ b/app/Domain/Policies/KeyPolicy.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Domain\Policies;
+
+use Toby\Domain\Enums\Role;
+use Toby\Eloquent\Models\Key;
+use Toby\Eloquent\Models\User;
+
+class KeyPolicy
+{
+    public function manage(User $user): bool
+    {
+        return $user->role === Role::AdministrativeApprover;
+    }
+
+    public function give(User $user, Key $key): bool
+    {
+        if ($key->user()->is($user)) {
+            return true;
+        }
+
+        return $user->role === Role::AdministrativeApprover;
+    }
+}
diff --git a/app/Eloquent/Models/Key.php b/app/Eloquent/Models/Key.php
new file mode 100644
index 0000000..cb7ee23
--- /dev/null
+++ b/app/Eloquent/Models/Key.php
@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Eloquent\Models;
+
+use Database\Factories\KeyFactory;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+/**
+ * @property int $id
+ * @property User $user
+ */
+class Key extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    protected static function newFactory(): KeyFactory
+    {
+        return KeyFactory::new();
+    }
+}
diff --git a/app/Eloquent/Models/User.php b/app/Eloquent/Models/User.php
index d167dd5..4bf2891 100644
--- a/app/Eloquent/Models/User.php
+++ b/app/Eloquent/Models/User.php
@@ -74,6 +74,11 @@ class User extends Authenticatable
         return $this->hasMany(Vacation::class);
     }
 
+    public function keys(): HasMany
+    {
+        return $this->hasMany(Key::class);
+    }
+
     public function hasRole(Role $role): bool
     {
         return $this->role === $role;
diff --git a/app/Infrastructure/Http/Controllers/KeysController.php b/app/Infrastructure/Http/Controllers/KeysController.php
new file mode 100644
index 0000000..096e540
--- /dev/null
+++ b/app/Infrastructure/Http/Controllers/KeysController.php
@@ -0,0 +1,104 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Controllers;
+
+use Illuminate\Auth\Access\AuthorizationException;
+use Illuminate\Http\Request;
+use Inertia\Response;
+use Symfony\Component\HttpFoundation\RedirectResponse;
+use Toby\Eloquent\Models\Key;
+use Toby\Eloquent\Models\User;
+use Toby\Infrastructure\Http\Requests\GiveKeyRequest;
+use Toby\Infrastructure\Http\Resources\KeyResource;
+use Toby\Infrastructure\Http\Resources\SimpleUserResource;
+
+class KeysController extends Controller
+{
+    public function index(Request $request): Response
+    {
+        $keys = Key::query()
+            ->oldest()
+            ->get();
+
+        $users = User::query()
+            ->orderByProfileField("last_name")
+            ->orderByProfileField("first_name")
+            ->get();
+
+        return inertia("Keys", [
+            "keys" => KeyResource::collection($keys),
+            "users" => SimpleUserResource::collection($users),
+            "can" => [
+                "manageKeys" => $request->user()->can("manage", Key::class),
+            ],
+        ]);
+    }
+
+    /**
+     * @throws AuthorizationException
+     */
+    public function store(Request $request): RedirectResponse
+    {
+        $this->authorize("manage", Key::class);
+
+        $key = $request->user()->keys()->create();
+
+        return redirect()
+            ->back()
+            ->with("success", __("Key no :number has been created.", [
+                "number" => $key->id,
+            ]));
+    }
+
+    public function take(Key $key, Request $request): RedirectResponse
+    {
+        $previousUser = $key->user;
+
+        $key->user()->associate($request->user());
+
+        $key->save();
+
+        return redirect()
+            ->back()
+            ->with("success", __("Key no :number has been taken from :user.", [
+                "number" => $key->id,
+                "user" => $previousUser->profile->full_name,
+            ]));
+    }
+
+    /**
+     * @throws AuthorizationException
+     */
+    public function give(Key $key, GiveKeyRequest $request): RedirectResponse
+    {
+        $this->authorize("give", $key);
+
+        $recipient = $request->recipient();
+
+        $key->user()->associate($recipient);
+
+        $key->save();
+
+        return redirect()
+            ->back()
+            ->with("success", __("Key no :number has been given to :user.", [
+                "number" => $key->id,
+                "user" => $recipient->profile->full_name,
+            ]));
+    }
+
+    public function destroy(Key $key): RedirectResponse
+    {
+        $this->authorize("manage", Key::class);
+
+        $key->delete();
+
+        return redirect()
+            ->back()
+            ->with("success", __("Key no :number has been deleted.", [
+                "number" => $key->id,
+            ]));
+    }
+}
diff --git a/app/Infrastructure/Http/Requests/GiveKeyRequest.php b/app/Infrastructure/Http/Requests/GiveKeyRequest.php
new file mode 100644
index 0000000..7505821
--- /dev/null
+++ b/app/Infrastructure/Http/Requests/GiveKeyRequest.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Toby\Eloquent\Models\User;
+
+class GiveKeyRequest extends FormRequest
+{
+    public function rules(): array
+    {
+        return [
+            "user" => ["required", "exists:users,id"],
+        ];
+    }
+
+    public function recipient(): User
+    {
+        return User::find($this->get("user"));
+    }
+}
diff --git a/app/Infrastructure/Http/Resources/KeyResource.php b/app/Infrastructure/Http/Resources/KeyResource.php
new file mode 100644
index 0000000..7eedbf7
--- /dev/null
+++ b/app/Infrastructure/Http/Resources/KeyResource.php
@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class KeyResource extends JsonResource
+{
+    public static $wrap = null;
+
+    public function toArray($request): array
+    {
+        return [
+            "id" => $this->id,
+            "user" => new SimpleUserResource($this->user),
+            "updatedAt" => $this->updated_at->toDisplayString(),
+            "can" => [
+                "give" => $request->user()->can("give", $this->resource),
+                "take" => !$this->user()->is($request->user()),
+            ],
+        ];
+    }
+}
diff --git a/database/factories/KeyFactory.php b/database/factories/KeyFactory.php
new file mode 100644
index 0000000..52e1694
--- /dev/null
+++ b/database/factories/KeyFactory.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Toby\Eloquent\Models\Key;
+use Toby\Eloquent\Models\User;
+
+class KeyFactory extends Factory
+{
+    protected $model = Key::class;
+
+    public function definition(): array
+    {
+        return [
+            "user_id" => User::factory(),
+        ];
+    }
+}
diff --git a/database/migrations/2022_04_12_152528_create_keys_table.php b/database/migrations/2022_04_12_152528_create_keys_table.php
new file mode 100644
index 0000000..1d3ee72
--- /dev/null
+++ b/database/migrations/2022_04_12_152528_create_keys_table.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Toby\Eloquent\Models\User;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("keys", function (Blueprint $table): void {
+            $table->id();
+            $table->foreignIdFor(User::class)
+                ->constrained()
+                ->cascadeOnDelete();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("keys");
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 581ecfd..f5e0e51 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -8,6 +8,7 @@ use Illuminate\Database\Seeder;
 use Illuminate\Support\Carbon;
 use Toby\Domain\PolishHolidaysRetriever;
 use Toby\Domain\VacationDaysCalculator;
+use Toby\Eloquent\Models\Key;
 use Toby\Eloquent\Models\User;
 use Toby\Eloquent\Models\VacationLimit;
 use Toby\Eloquent\Models\VacationRequest;
@@ -85,5 +86,11 @@ class DatabaseSeeder extends Seeder
                 })
                 ->create();
         }
+
+        foreach ($users as $user) {
+            Key::factory()
+                ->for($user)
+                ->create();
+        }
     }
 }
diff --git a/database/seeders/DemoSeeder.php b/database/seeders/DemoSeeder.php
index 53454e2..41470ba 100644
--- a/database/seeders/DemoSeeder.php
+++ b/database/seeders/DemoSeeder.php
@@ -19,6 +19,7 @@ use Toby\Domain\States\VacationRequest\Rejected;
 use Toby\Domain\States\VacationRequest\WaitingForAdministrative;
 use Toby\Domain\States\VacationRequest\WaitingForTechnical;
 use Toby\Domain\VacationDaysCalculator;
+use Toby\Eloquent\Models\Key;
 use Toby\Eloquent\Models\User;
 use Toby\Eloquent\Models\VacationLimit;
 use Toby\Eloquent\Models\VacationRequest;
@@ -328,5 +329,11 @@ class DemoSeeder extends Seeder
 
         $vacationRequestRejected->state = new Rejected($vacationRequestRejected);
         $vacationRequestRejected->save();
+
+        foreach ($users as $user) {
+            Key::factory()
+                ->for($user)
+                ->create();
+        }
     }
 }
diff --git a/resources/js/Pages/Keys.vue b/resources/js/Pages/Keys.vue
new file mode 100644
index 0000000..5c158fa
--- /dev/null
+++ b/resources/js/Pages/Keys.vue
@@ -0,0 +1,351 @@
+<template>
+  <InertiaHead title="Klucze" />
+  <div class="bg-white shadow-md">
+    <div class="flex justify-between items-center p-4 sm:px-6">
+      <div>
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Klucze
+        </h2>
+      </div>
+      <div v-if="can.manageKeys">
+        <InertiaLink
+          as="button"
+          href="/keys"
+          method="post"
+          class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+        >
+          Dodaj klucz
+        </InertiaLink>
+      </div>
+    </div>
+    <div class="border-t border-gray-200">
+      <div class="overflow-auto xl:overflow-visible">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Klucz
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Kto ma
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              >
+                Od kiedy
+              </th>
+              <th
+                scope="col"
+                class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+              />
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-100">
+            <tr
+              v-for="key in keys.data"
+              :key="key.id"
+              class="hover:bg-blumilk-25"
+            >
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                Klucz nr {{ key.id }}
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <div class="flex">
+                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
+                    <img
+                      class="w-10 h-10 rounded-full"
+                      :src="key.user.avatar"
+                    >
+                  </span>
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900 break-all">
+                      {{ key.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500 break-all">
+                      {{ key.user.email }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                {{ key.updatedAt }}
+              </td>
+              <td class="p-4 text-sm text-right text-gray-500 whitespace-nowrap">
+                <Menu
+                  as="div"
+                  class="inline-block relative text-left"
+                >
+                  <MenuButton
+                    class="flex items-center text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                  >
+                    <DotsVerticalIcon class="w-5 h-5" />
+                  </MenuButton>
+
+                  <transition
+                    enter-active-class="transition ease-out duration-100"
+                    enter-from-class="transform opacity-0 scale-95"
+                    enter-to-class="transform opacity-100 scale-100"
+                    leave-active-class="transition ease-in duration-75"
+                    leave-from-class="transform opacity-100 scale-100"
+                    leave-to-class="transform opacity-0 scale-95"
+                  >
+                    <MenuItems
+                      class="absolute right-0 z-10 mt-2 w-56 bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right"
+                    >
+                      <div class="py-1">
+                        <MenuItem
+                          v-if="key.can.take"
+                          v-slot="{ active }"
+                          class="flex"
+                        >
+                          <InertiaLink
+                            as="button"
+                            method="post"
+                            preserve-scroll
+                            :href="`/keys/${key.id}/take`"
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                          >
+                            <DominoMaskIcon class="mr-2 w-5 h-5 text-purple-500" />
+                            Zabierz klucze
+                          </InertiaLink>
+                        </MenuItem>
+                        <MenuItem
+                          v-if="key.can.give"
+                          v-slot="{ active }"
+                          class="flex"
+                        >
+                          <button
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                            @click="giveKey(key)"
+                          >
+                            <HandshakeIcon class="mr-2 w-5 h-5 text-emerald-500" />
+                            Przekaż klucze
+                          </button>
+                        </MenuItem>
+                        <MenuItem
+                          v-if="can.manageKeys"
+                          v-slot="{ active }"
+                          class="flex"
+                        >
+                          <InertiaLink
+                            as="button"
+                            method="delete"
+                            preserve-scroll
+                            :href="`/keys/${key.id}`"
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block w-full text-left font-medium px-4 py-2 text-sm']"
+                          >
+                            <TrashIcon class="mr-2 w-5 h-5 text-red-500" />
+                            Usuń
+                          </InertiaLink>
+                        </MenuItem>
+                      </div>
+                    </MenuItems>
+                  </transition>
+                </Menu>
+              </td>
+            </tr>
+            <tr v-if="!keys.data.length">
+              <td
+                colspan="100%"
+                class="py-4 text-xl leading-5 text-center text-gray-700"
+              >
+                Brak danych
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <TransitionRoot
+    as="template"
+    :show="giving"
+  >
+    <Dialog
+      is="div"
+      class="overflow-y-auto fixed inset-0 z-10"
+      @close="giving = false"
+    >
+      <div class="flex justify-center items-end px-4 pt-4 pb-20 min-h-screen text-center sm:block sm:p-0">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </TransitionChild>
+
+        <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enter-to="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 sm:scale-100"
+          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <form
+            class="inline-block relative px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform sm:p-6 sm:my-8 sm:w-full sm:max-w-sm sm:align-middle"
+            @submit.prevent="submitGiveKey"
+          >
+            <div>
+              <div>
+                <DialogTitle
+                  as="h3"
+                  class="text-lg font-medium leading-6 text-center text-gray-900 font-sembiold"
+                >
+                  Przekaż klucz nr {{ keyToGive?.id }}
+                </DialogTitle>
+                <div class="mt-5">
+                  <Listbox
+                    v-model="form.user"
+                    as="div"
+                  >
+                    <ListboxLabel class="block text-sm font-medium text-left text-gray-700">
+                      Użytkownik
+                    </ListboxLabel>
+                    <div class="relative mt-2">
+                      <ListboxButton
+                        class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
+                        :class="{ 'border-red-300 text-red-900 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
+                            :src="form.user.avatar"
+                            class="shrink-0 w-6 h-6 rounded-full"
+                          >
+                          <span class="block ml-3 truncate">{{ form.user.name }}</span>
+                        </span>
+                        <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                          <SelectorIcon class="w-5 h-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="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                        >
+                          <ListboxOption
+                            v-for="user in filteredUsers"
+                            :key="user.id"
+                            v-slot="{ active, selected }"
+                            as="template"
+                            :value="user"
+                          >
+                            <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                              <div class="flex items-center">
+                                <img
+                                  :src="user.avatar"
+                                  alt=""
+                                  class="shrink-0 w-6 h-6 rounded-full"
+                                >
+                                <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                                  {{ user.name }}
+                                </span>
+                              </div>
+
+                              <span
+                                v-if="selected"
+                                :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                              >
+                                <CheckIcon class="w-5 h-5" />
+                              </span>
+                            </li>
+                          </ListboxOption>
+                        </ListboxOptions>
+                      </transition>
+                      <p
+                        v-if="form.errors.type"
+                        class="mt-2 text-sm text-red-600"
+                      >
+                        {{ form.errors.type }}
+                      </p>
+                    </div>
+                  </Listbox>
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 sm:mt-6">
+              <div class="flex justify-end space-x-3">
+                <button
+                  type="button"
+                  class="py-2 px-4 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                  @click="giving = false"
+                >
+                  Anuluj
+                </button>
+                <button
+                  type="submit"
+                  :disabled="form.processing"
+                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                >
+                  Przekaż
+                </button>
+              </div>
+            </div>
+          </form>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { DotsVerticalIcon, TrashIcon, CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
+import DominoMaskIcon from 'vue-material-design-icons/DominoMask.vue'
+import HandshakeIcon from 'vue-material-design-icons/Handshake.vue'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { computed, ref } from 'vue'
+import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+
+const props = defineProps({
+  keys: Object,
+  users: Object,
+  can: Object,
+})
+
+const keyToGive = ref(null)
+const giving = ref(false)
+
+const form = useForm({
+  user: null,
+})
+
+const filteredUsers = computed(() => props.users.data.filter(user => user.id !== keyToGive.value.user.id ))
+
+function giveKey(key) {
+  keyToGive.value = key
+  form.user = filteredUsers.value[0]
+  giving.value = true
+}
+
+function submitGiveKey() {
+  form
+    .transform(data => ({
+      user: data.user.id,
+    }))
+    .post(`/keys/${keyToGive.value.id}/give`, {
+      preserveState: (page) => Object.keys(page.props.errors).length,
+      preserveScroll: true,
+    })
+}
+
+</script>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 7d059a2..dc7305e 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -294,6 +294,7 @@ import {
   CalendarIcon,
   DocumentTextIcon,
   AdjustmentsIcon,
+  KeyIcon,
 } from '@heroicons/vue/outline'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid'
 
@@ -351,7 +352,6 @@ const navigation = computed(() =>
       can: props.auth.can.manageVacationLimits,
     },
     {
-
       name: 'Podsumowanie roczne',
       href: '/vacation/annual-summary',
       section: 'AnnualSummary',
@@ -365,5 +365,13 @@ const navigation = computed(() =>
       icon: UserGroupIcon,
       can: props.auth.can.manageUsers,
     },
+    {
+      name: 'Klucze',
+      href: '/keys',
+      section: 'Keys',
+      icon: KeyIcon,
+      can: true,
+    },
+
   ].filter(item => item.can))
 </script>
diff --git a/resources/lang/pl.json b/resources/lang/pl.json
index 955ae7f..d792d41 100644
--- a/resources/lang/pl.json
+++ b/resources/lang/pl.json
@@ -67,5 +67,9 @@
   "Vacation request :title has been :status": "Wniosek :title został :status",
   "The vacation request :title from user :requester has been :status.": "Wniosek urlopowy :title użytkownika :requester został :status.",
   "Vacation request :title has been created on your behalf": "Wniosek urlopowy :title został utworzony w Twoim imieniu",
-  "The vacation request :title has been created correctly by user :creator on your behalf in the :appName.": "W systemie :appName został poprawnie utworzony wniosek urlopowy :title w Twoim imieniu przez użytkownika :creator."
+  "The vacation request :title has been created correctly by user :creator on your behalf in the :appName.": "W systemie :appName został poprawnie utworzony wniosek urlopowy :title w Twoim imieniu przez użytkownika :creator.",
+  "Key no :number has been created.": "Klucz nr :number został utworzony.",
+  "Key no :number has been deleted.": "Klucz nr :number został usunięty.",
+  "Key no :number has been taken from :user.": "Klucz nr :number został zabrany użytkownikowi :user.",
+  "Key no :number has been given to :user.": "Klucz nr :number został przekazany użytkownikowi :user."
 }
diff --git a/routes/web.php b/routes/web.php
index b67244b..f35e8f6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,7 @@ use Toby\Infrastructure\Http\Controllers\AnnualSummaryController;
 use Toby\Infrastructure\Http\Controllers\DashboardController;
 use Toby\Infrastructure\Http\Controllers\GoogleController;
 use Toby\Infrastructure\Http\Controllers\HolidayController;
+use Toby\Infrastructure\Http\Controllers\KeysController;
 use Toby\Infrastructure\Http\Controllers\LogoutController;
 use Toby\Infrastructure\Http\Controllers\MonthlyUsageController;
 use Toby\Infrastructure\Http\Controllers\SelectYearPeriodController;
@@ -33,7 +34,13 @@ Route::middleware(["auth", TrackUserLastActivity::class])->group(function (): vo
         ->except("show")
         ->whereNumber("holiday");
 
-    Route::post("year-periods/{yearPeriod}/select", SelectYearPeriodController::class)
+    Route::get("/keys", [KeysController::class, "index"]);
+    Route::post("/keys", [KeysController::class, "store"]);
+    Route::delete("/keys/{key}", [KeysController::class, "destroy"]);
+    Route::post("/keys/{key}/take", [KeysController::class, "take"]);
+    Route::post("/keys/{key}/give", [KeysController::class, "give"]);
+
+    Route::post("/year-periods/{yearPeriod}/select", SelectYearPeriodController::class)
         ->whereNumber("yearPeriod")
         ->name("year-periods.select");
 
diff --git a/tests/Feature/KeyTest.php b/tests/Feature/KeyTest.php
new file mode 100644
index 0000000..e9c3ddc
--- /dev/null
+++ b/tests/Feature/KeyTest.php
@@ -0,0 +1,118 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Inertia\Testing\AssertableInertia as Assert;
+use Tests\FeatureTestCase;
+use Toby\Eloquent\Models\Key;
+use Toby\Eloquent\Models\User;
+
+class KeyTest extends FeatureTestCase
+{
+    use DatabaseMigrations;
+
+    public function testUserCanSeeKeyList(): void
+    {
+        Key::factory()->count(10)->create();
+        $user = User::factory()->create();
+
+        $this->assertDatabaseCount("keys", 10);
+
+        $this->actingAs($user)
+            ->get("/keys")
+            ->assertOk()
+            ->assertInertia(
+                fn(Assert $page) => $page
+                    ->component("Keys")
+                    ->has("keys.data", 10),
+            );
+    }
+
+    public function testAdminCanCreateKey(): void
+    {
+        $admin = User::factory()->admin()->create();
+
+        $this->assertDatabaseMissing("keys", [
+            "user_id" => $admin->id,
+        ]);
+
+        $this->actingAs($admin)
+            ->post("/keys")
+            ->assertSessionHasNoErrors()
+            ->assertRedirect();
+
+        $this->assertDatabaseHas("keys", [
+            "user_id" => $admin->id,
+        ]);
+    }
+
+    public function testUserCannotCreateKey(): void
+    {
+        $user = User::factory()->create();
+
+        $this->actingAs($user)
+            ->post("/keys")
+            ->assertForbidden();
+    }
+
+    public function testAdminCanDeleteKey(): void
+    {
+        $admin = User::factory()->admin()->create();
+
+        $key = Key::factory()->create();
+
+        $this->actingAs($admin)
+            ->delete("/keys/{$key->id}")
+            ->assertRedirect();
+    }
+
+    public function testUserCanTakeKeyFromAnotherUser(): void
+    {
+        $user = User::factory()->create();
+        $userWithKey = User::factory()->create();
+
+        $key = Key::factory()->for($userWithKey)->create();
+
+        $this->assertDatabaseHas("keys", [
+            "id" => $key->id,
+            "user_id" => $userWithKey->id,
+        ]);
+
+        $this->actingAs($user)
+            ->post("/keys/{$key->id}/take")
+            ->assertRedirect();
+
+        $this->assertDatabaseHas("keys", [
+            "id" => $key->id,
+            "user_id" => $user->id,
+        ]);
+    }
+
+    public function testUserCanGiveTheirKeyToAnotherUser(): void
+    {
+        $userWithKey = User::factory()->create();
+        $user = User::factory()->create();
+
+        $key = Key::factory()->for($userWithKey)->create();
+
+        $this->assertDatabaseHas("keys", [
+            "id" => $key->id,
+            "user_id" => $userWithKey->id,
+        ]);
+
+        $this->actingAs($userWithKey)
+            ->post("/keys/{$key->id}/give", [
+                "user" => $user->id,
+            ])
+            ->assertSessionhasNoErrors()
+            ->assertRedirect();
+
+        $this->assertDatabaseHas("keys", [
+            "id" => $key->id,
+            "user_id" => $user->id,
+        ]);
+    }
+}