Started work on User Details admin page

dist/app/Enums/Auth/Permissions.php

@@ -8,6 +8,6 @@ enum Permissions: string
     case VIEW_LOG = 'view-log';
     case FILE_UPLOAD = 'file-upload';
     case GAME_NEWS = 'game-news';
-
-    case USER_MANAGEMENT = 'user-management';
+    case VIEW_USERS = 'view-users';
+    case EDIT_USERS = 'edit-users';
 }

dist/app/Http/Controllers/Web/Admin/Tools/UsersController.php

@@ -5,6 +5,7 @@
 use App\Enums\Auth\Permissions;
 use App\Models\User\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\View;
 
 class UsersController extends AdminToolController
 {
@@ -14,7 +15,7 @@ class UsersController extends AdminToolController
 
     protected static string $iconComponent = 'icons.users';
 
-    protected static Permissions $neededPermission = Permissions::USER_MANAGEMENT;
+    protected static Permissions $neededPermission = Permissions::VIEW_USERS;
 
     const PER_PAGE = 15;
 
@@ -33,4 +34,13 @@ public function index(Request $request)
 
         return view('admin.tools.user-list', ['userList' => $users, 'searchString' => $searchString]);
     }
+
+    public function details(User $user)
+    {
+        View::share('title', 'User Details: '.$user->last_known_username);
+
+        return view('admin.tools.user-details', [
+            'user' => $user,
+        ]);
+    }
 }

dist/database/seeders/RolesAndPermissionsSeeder.php

@@ -20,12 +20,13 @@ public function run(): void
        $viewLogPerm = Permission::findOrCreate(Permissions::VIEW_LOG->value);
        $fileUploadPerm = Permission::findOrCreate(Permissions::FILE_UPLOAD->value);
        $gameNewsPerm = Permission::findOrCreate(Permissions::GAME_NEWS->value);
-       $usersPerm = Permission::findOrCreate(Permissions::USER_MANAGEMENT->value);
+       $userReadPerm = Permission::findOrCreate(Permissions::VIEW_USERS->value);
+       $userEditPerm = Permission::findOrCreate(Permissions::EDIT_USERS->value);
 
        $adminRole->givePermissionTo($viewLogPerm);
        $adminRole->givePermissionTo($gameNewsPerm);
        $adminRole->givePermissionTo($viewAdminAreaPerm);
-       $adminRole->givePermissionTo($usersPerm);
+       $adminRole->givePermissionTo($userReadPerm, $userEditPerm);
        $adminRole->givePermissionTo($fileUploadPerm)->save();
     }
 }

dist/resources/css/components/admin/tools/game-news-list-entry.scss

@@ -7,7 +7,8 @@
       @apply text-2xl font-semibold;
 
       &::after {
-        @apply block w-full mt-2;
+        @apply block w-ful
+        l mt-2;
         content: "";
         border-top: 0.1rem solid;
         border-image: linear-gradient(to right, theme('colors.indigo.600') 10%, transparent) 1;

dist/resources/css/components/admin/tools/user-details.scss

@@ -0,0 +1,29 @@
+.user-details {
+  .section {
+    @apply dark:bg-slate-700 container mx-auto my-4 p-2 md:p-6 md:pt-4 rounded-xl;
+
+    h1 {
+      column-span: all;
+      @apply text-2xl font-semibold;
+
+      &::after {
+        @apply block w-full mt-2;
+        content: "";
+        border-top: 0.1rem solid;
+        border-image: linear-gradient(to right, theme('colors.indigo.600') 10%, transparent) 1;
+      }
+    }
+  }
+
+  .attribute {
+    @apply flex flex-col lg:flex-row w-full align-middle items-center mt-2 lg:mt-0;
+
+    label {
+      @apply w-48 font-bold inline-block text-center lg:text-left;
+    }
+
+    > span {
+      @apply block py-2 px-4 bg-slate-800 rounded-md border border-gray-500;
+    }
+  }
+}

dist/resources/views/admin/tools/user-details.blade.php

@@ -0,0 +1,176 @@
+@props([
+    'user'
+])
+
+@pushonce('head')
+    @vite(['resources/css/components/admin/tools/user-details.scss'])
+@endpushonce
+
+@php
+    /** @var \App\Models\User\User $user */
+
+    use App\Enums\Game\Faction;
+    use App\Enums\Game\Runner;
+    use App\Enums\Game\Hunter;
+    use App\Models\User\PlayerData;
+
+    $allowEdit = $user->can(\App\Enums\Auth\Permissions::EDIT_USERS->value);
+    $allowEdit = false;
+@endphp
+
+<x-layouts.admin>
+    <div class="w-full h-full user-details">
+        <div class="section">
+            <h1>General Info</h1>
+            <div class="flex gap-4 mt-4 items-center">
+                <img src="{{ $user->avatar_full }}" class="rounded-xl border-2 border-indigo-600 aspect-square"
+                     alt="Avatar">
+                <div class="flex flex-col flex-wrap w-full justify-around bg-slate-800 px-6 rounded-xl border-2 border-indigo-600">
+                    <div class="attribute">
+                        <label>ID</label>
+                        <span class="border-none">{{ $user->id }}</span>
+                    </div>
+                    <div class="attribute">
+                        <label>Steam ID</label>
+                        <span class="border-none">{{ $user->steam_id }}</span>
+                    </div>
+                    <div class="attribute">
+                        <label>Last known Username</label>
+                        <span class="border-none">{{ $user->last_known_username }}</span>
+                    </div>
+                    <div class="attribute">
+                        <label>Created At</label>
+                        <span class="border-none">{{ $user->created_at }}</span>
+                    </div>
+                    <div class="attribute">
+                        <label>Source</label>
+                        <span class="border-none">{{ $user->source }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <h1>Player Data</h1>
+            <div class="md:columns-3 mt-2">
+                <div class="attribute">
+                    <label>Iron</label>
+                    @if($allowEdit)
+                        <x-inputs.number
+                                id="currencyA"
+                                name="currencyA"
+                                value="{{ $user->playerData()->currency_a }}"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->currency_a }}</span>
+                    @endif
+                </div>
+                <div class="attribute">
+                    <label>Blood Cells</label>
+                    @if($allowEdit)
+                        <x-inputs.number
+                                id="currencyB"
+                                name="currencyB"
+                                value="{{ $user->playerData()->currency_b }}"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->currency_b }}</span>
+                    @endif
+                </div>
+                <div class="attribute">
+                    <label>Ink Cells</label>
+                    @if($allowEdit)
+                        <x-inputs.number
+                                id="currencyC"
+                                name="currencyC"
+                                value="{{ $user->playerData()->currency_c }}"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->currency_c }}</span>
+                    @endif
+                </div>
+            </div>
+            <div class="md:columns-3 mt-4">
+                <div class="attribute">
+                    <label>Last Faction</label>
+                    @if($allowEdit)
+                        <x-inputs.dropdown
+                                id="lastFaction"
+                                name="lastFaction"
+                                :cases="Faction::cases()"
+                                :selected="$user->playerData()->last_faction"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->last_faction }}</span>
+                    @endif
+                </div>
+                <div class="attribute">
+                    <label>Last Runner</label>
+                    @if($allowEdit)
+                        <x-inputs.dropdown
+                                id="lastRunner"
+                                name="lastRunner"
+                                :cases="Runner::cases()"
+                                :selected="$user->playerData()->last_runner"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->last_runner }}</span>
+                    @endif
+                </div>
+                <div class="attribute">
+                    <label>Last Faction</label>
+                    @if($allowEdit)
+                        <x-inputs.dropdown
+                                id="lastHunter"
+                                name="lastHunter"
+                                :cases="Hunter::cases()"
+                                :selected="$user->playerData()->last_hunter"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->last_hunter }}</span>
+                    @endif
+                </div>
+            </div>
+            <div class="columns-1 mt-4">
+                <div class="attribute">
+                    <label>Has Played DG 1</label>
+                    @if($allowEdit)
+                        <x-inputs.checkbox
+                                class="size-6"
+                                id="lastHunter"
+                                name="lastHunter"
+                                :checked="$user->playerData()->has_played_dg_1"
+                        />
+                    @else
+                        <span>{{ $user->playerData()->has_played_dg_1 ? 'Yes' : 'No' }}</span>
+                    @endif
+                </div>
+            </div>
+        </div>
+        <div class="section md:grid md:grid-cols-2 md:gap-4">
+            <h1 class="col-span-full">Progression</h1>
+            <div class="bg-green-400 dark:bg-green-800 p-2 rounded-md shadow-glow shadow-green-400/15 outline outline-green-700">
+                <div class="flex justify-between p-2 text-2xl font-bold ">
+                    <label>Runner</label>
+                    <span class="text-yellow-500">{{ $user->playerData()->runner_faction_level }}</span>
+                </div>
+                <x-misc.progression.faction-progression
+                        class="p-2"
+                        :current="$user->playerData()->runner_faction_experience"
+                        :needed="PlayerData::getRemainingFactionExperience($user->playerData()->runner_faction_level)"
+                />
+            </div>
+            <div class="bg-red-400 dark:bg-red-800 p-2 rounded-md col-start-2 shadow-glow shadow-red-400/15 outline outline-red-900">
+                <div class="flex justify-between p-2 text-2xl font-bold ">
+                    <label>Hunter</label>
+                    <span class="text-yellow-500">{{ $user->playerData()->hunter_faction_level }}</span>
+                </div>
+                <x-misc.progression.faction-progression
+                        class="p-2"
+                        :current="$user->playerData()->hunter_faction_experience"
+                        :needed="PlayerData::getRemainingFactionExperience($user->playerData()->hunter_faction_level)"
+                />
+            </div>
+        </div>
+    </div>
+</x-layouts.admin>

dist/resources/views/admin/tools/user-list.blade.php

@@ -6,10 +6,9 @@
 ])
 
 @php
-    /** @var \Illuminate\Pagination\LengthAwarePaginator $userList */
+    /** @var \Illuminate\Pagination\LengthAwarePaginator|\App\Models\User\User[] $userList */
 @endphp
 
-
 <x-layouts.admin>
     <div class="w-full p-2 md:px-16">
         <form method="get">
@@ -48,9 +47,11 @@
                             <td class="text-green-400">GOOD</td>
                         @endif
                         <td>
-                            <x-inputs.button type="button" class="px-2 py-1 !text-sm" title="User Details">
-                                <x-icons.user-details class="size-4"/>
-                            </x-inputs.button>
+                            <a href="{{ route('user.details', ['user' => $user->id]) }}">
+                                <x-inputs.button type="button" class="px-2 py-1 !text-sm" title="User Details">
+                                    <x-icons.user-details class="size-4"/>
+                                </x-inputs.button>
+                            </a>
                             <x-inputs.button type="button" class="px-2 py-1 !text-sm" title="Inbox">
                                 <x-icons.mail class="size-4"/>
                             </x-inputs.button>

dist/resources/views/components/inputs/dropdown.blade.php

@@ -3,7 +3,12 @@
     /** @var StringBackedEnum $selected */
 ?>
 
-<select {{ $attributes->merge(['class' => 'input-global-dropdown']) }}>
+@props([
+    'disabled' => false,
+])
+
+
+<select {{ $attributes->merge(['class' => 'input-global-dropdown']) }} @disabled($disabled)>
     @foreach($cases as $case)
         <option value="{{ $case->value }}"
                 @selected($case === $selected)

dist/resources/views/components/inputs/number.blade.php

@@ -1 +1,5 @@
-<input type="number" {{ $attributes->merge(['class' => 'input-global-number']) }}>
+@props([
+    'disabled' => false,
+])
+
+<input type="number" @disabled($disabled) {{ $attributes->merge(['class' => 'input-global-number']) }}>

dist/resources/views/components/misc/progression/faction-progression.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'current',
+    'needed',
+    'showEdit' => false,
+])
+
+<div {{ $attributes->merge(['class' => 'flex gap-2']) }}>
+    @for($i = 0;$i < $needed;++$i)
+        <div class="h-2 w-full {{ $i < $current ? 'bg-sky-400' : 'bg-gray-500 ' }}">
+
+        </div>
+    @endfor
+</div>

dist/routes/admin.php

@@ -20,6 +20,7 @@
 Route::post('gamenews/{news}', [GameNewsController::class, 'submit'])->name('gamenews.post');
 
 Route::get('users', [UsersController::class, 'index'])->name(UsersController::class);
+Route::get('users/{user}', [UsersController::class, 'details'])->name('user.details');
 
 Route::fallback(function () {
     return redirect(route('admin.dashboard'));