Refactor: UI Changes in App services

- make the button bigger and active color
- remove unnecessary info from UI
- Removed redundant validation calls and improved permission handling for `ConnectApps`.
This commit is contained in:
= 2026-06-11 10:17:59 +00:00
parent 688b0307b8
commit 66ae0bad37
3 changed files with 29 additions and 38 deletions

View File

@ -3,7 +3,7 @@
use Livewire\Component; use Livewire\Component;
new class extends Component { new class extends Component {
public string $selectedTab = 'all-tab'; public string $selectedTab = "all-tab";
}; };
?> ?>

View File

@ -141,8 +141,6 @@ public function openEditAppModal(int $assignmentId): void
public function saveApp(): void public function saveApp(): void
{ {
$this->assignForm->validate();
if ($this->isEditingApp) { if ($this->isEditingApp) {
$this->updateApp(); $this->updateApp();
} else { } else {
@ -191,7 +189,7 @@ public function assignApp(): void
public function updateApp(): void public function updateApp(): void
{ {
$this->authorize(RoleAndAppsPermissionEnum::ConnectApps->value); $this->authorize(RoleAndAppsPermissionEnum::ConnectApps);
$this->attempt( $this->attempt(
action: function (): void { action: function (): void {
@ -285,9 +283,9 @@ public function savePriority(): void
$userPriority = auth()->user()?->roles()->min('priority') ?? 999999; $userPriority = auth()->user()?->roles()->min('priority') ?? 999999;
$this->validate([ $this->validate([
'newPriority' => 'required|integer|min:' . ($userPriority + 1), 'newPriority' => 'required|integer|min:'.($userPriority + 1),
], [ ], [
'newPriority.min' => 'The priority must be greater than your own highest role priority (' . $userPriority . ').', 'newPriority.min' => 'The priority must be greater than your own highest role priority ('.$userPriority.').',
]); ]);
$this->attempt( $this->attempt(
@ -335,8 +333,9 @@ class="btn-sm btn-ghost btn-circle"
<x-shared.card title="Connected Apps" icon="lucide-blocks" class="pb-2 w-full h-min"> <x-shared.card title="Connected Apps" icon="lucide-blocks" class="pb-2 w-full h-min">
<x-slot:actions> <x-slot:actions>
@can(RoleAndAppsPermissionEnum::ConnectApps->value) @can(RoleAndAppsPermissionEnum::ConnectApps)
<x-mary-button wire:click="openAddAppModal" spinner="openAddAppModal" icon="lucide.plus" class="btn-sm"> <x-mary-button wire:click="openAddAppModal" spinner="openAddAppModal" icon="lucide.plus"
class="btn-sm">
Add App Add App
</x-mary-button> </x-mary-button>
@endcan @endcan
@ -445,10 +444,13 @@ class="bg-gray-50 text-gray-500 cursor-not-allowed"
/> />
@endif @endif
<div x-data="{ isUnlimited: @entangle('assignForm.isUnlimited') }" <div x-data="{ isUnlimited: @entangle('assignForm.isUnlimited') }"
class="flex gap-2 items-baseline-last"> class="flex gap-2 items-baseline-last"
>
<div class="flex-1 transition-opacity duration-200" <div
x-bind:class="isUnlimited ? 'opacity-50 pointer-events-none' : ''"> class="flex-1 transition-opacity duration-200"
x-bind:class="isUnlimited ? 'opacity-50 pointer-events-none' : ''"
>
<x-mary-datepicker <x-mary-datepicker
label="Date" label="Date"
wire:model="assignForm.validUpto" wire:model="assignForm.validUpto"

View File

@ -7,10 +7,10 @@
use Livewire\Component; use Livewire\Component;
use Mary\Traits\Toast; use Mary\Traits\Toast;
new new #[Layout("layouts.app.sidebar")]
#[Layout('layouts.app.sidebar')] #[Title("Dashboard")]
#[Title('Dashboard')] class extends
class extends Component { Component {
use Toast; use Toast;
private UserAppAccessService $service; private UserAppAccessService $service;
@ -28,17 +28,17 @@ public function mount(): void
if ($user) { if ($user) {
activity() activity()
->causedBy($user) ->causedBy($user)
->event('dashboard_access') ->event("dashboard_access")
->log('User accessed their assigned services dashboard.'); ->log("User accessed their assigned services dashboard.");
} }
// Show toast from OAuth redirect flash data // Show toast from OAuth redirect flash data
if (session('entra_success')) { if (session("entra_success")) {
$this->success(session('entra_success')); $this->success(session("entra_success"));
} }
if (session('entra_error')) { if (session("entra_error")) {
$this->error(session('entra_error')); $this->error(session("entra_error"));
} }
} }
@ -138,15 +138,11 @@ class="w-3.5 h-3.5 inline animate-pulse text-amber-600 dark:text-amber-400"/>
<div class="p-4 flex-1 flex flex-col justify-between gap-4"> <div class="p-4 flex-1 flex flex-col justify-between gap-4">
<div> <div>
<p class="text-xs text-gray-400 dark:text-gray-500 font-mono tracking-wider uppercase">
{{ $service->slug }}
</p>
@if($service->protocol_name === 'url' && $service->provider_slug === 'azure-fd') @if($service->protocol_name === 'url' && $service->provider_slug === 'azure-fd')
<div <div
class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 flex flex-col gap-3"> class="flex flex-col gap-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Microsoft Integration</span> <span class="text-xs font-semibold text-gray-700">Microsoft Integration</span>
@if($this->isEntraConnected) @if($this->isEntraConnected)
<x-mary-badge <x-mary-badge
class="badge-soft badge-success text-[10px] font-semibold px-2 py-0.5"> class="badge-soft badge-success text-[10px] font-semibold px-2 py-0.5">
@ -160,20 +156,13 @@ class="badge-soft badge-neutral text-[10px] font-semibold px-2 py-0.5">
@endif @endif
</div> </div>
@if($this->isEntraConnected && $this->entraToken)
<div class="text-[10px] text-gray-400 flex items-center gap-1.5">
<x-mary-icon name="lucide.clock" class="w-3.5 h-3.5"/>
Expires {{ $this->entraToken->expires_at->diffForHumans() }}
</div>
@endif
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@if($this->isEntraConnected) @if($this->isEntraConnected)
<x-mary-button <x-mary-button
external external
icon="lucide.external-link" icon="lucide.external-link"
:link="route('entra.open')" :link="route('entra.open')"
class="btn-xs btn-soft btn-primary flex-1" class=" btn-primary flex-1"
label="Open Outlook" label="Open Outlook"
/> />
@ -184,7 +173,7 @@ class="inline">
<x-mary-button <x-mary-button
icon="lucide.unplug" icon="lucide.unplug"
type="submit" type="submit"
class="btn-xs btn-soft btn-error" class=" btn-error"
tooltip="Disconnect" tooltip="Disconnect"
/> />
</form> </form>
@ -193,7 +182,7 @@ class="btn-xs btn-soft btn-error"
no-wire-navigate no-wire-navigate
icon="lucide.plug" icon="lucide.plug"
:link="route('entra.connect')" :link="route('entra.connect')"
class="btn-xs btn-soft btn-primary flex-1" class="btn-primary flex-1"
label="Connect" label="Connect"
/> />
@endif @endif
@ -208,7 +197,7 @@ class="btn-xs btn-soft btn-primary flex-1"
class="w-4 h-4 {{ $service->is_warning ? 'text-amber-500 animate-pulse' : 'text-gray-400 dark:text-gray-500' }}"/> class="w-4 h-4 {{ $service->is_warning ? 'text-amber-500 animate-pulse' : 'text-gray-400 dark:text-gray-500' }}"/>
<span <span
class="text-sm font-medium {{ $service->is_warning ? 'text-amber-600 dark:text-amber-400 font-semibold' : 'text-gray-600 dark:text-gray-400' }}"> class="text-sm font-medium {{ $service->is_warning ? 'text-amber-600 dark:text-amber-400 font-semibold' : 'text-gray-600 dark:text-gray-400' }}">
{{ $service->days_remaining }} {{ Str::plural('day', $service->days_remaining) }} left {{ Illuminate\Support\Carbon::parse($service->duration)->diffForHumans() }}
</span> </span>
</div> </div>