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;
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
{
$this->assignForm->validate();
if ($this->isEditingApp) {
$this->updateApp();
} else {
@ -191,7 +189,7 @@ public function assignApp(): void
public function updateApp(): void
{
$this->authorize(RoleAndAppsPermissionEnum::ConnectApps->value);
$this->authorize(RoleAndAppsPermissionEnum::ConnectApps);
$this->attempt(
action: function (): void {
@ -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-slot:actions>
@can(RoleAndAppsPermissionEnum::ConnectApps->value)
<x-mary-button wire:click="openAddAppModal" spinner="openAddAppModal" icon="lucide.plus" class="btn-sm">
@can(RoleAndAppsPermissionEnum::ConnectApps)
<x-mary-button wire:click="openAddAppModal" spinner="openAddAppModal" icon="lucide.plus"
class="btn-sm">
Add App
</x-mary-button>
@endcan
@ -445,10 +444,13 @@ class="bg-gray-50 text-gray-500 cursor-not-allowed"
/>
@endif
<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"
x-bind:class="isUnlimited ? 'opacity-50 pointer-events-none' : ''">
<div
class="flex-1 transition-opacity duration-200"
x-bind:class="isUnlimited ? 'opacity-50 pointer-events-none' : ''"
>
<x-mary-datepicker
label="Date"
wire:model="assignForm.validUpto"

View File

@ -7,10 +7,10 @@
use Livewire\Component;
use Mary\Traits\Toast;
new
#[Layout('layouts.app.sidebar')]
#[Title('Dashboard')]
class extends Component {
new #[Layout("layouts.app.sidebar")]
#[Title("Dashboard")]
class extends
Component {
use Toast;
private UserAppAccessService $service;
@ -28,17 +28,17 @@ public function mount(): void
if ($user) {
activity()
->causedBy($user)
->event('dashboard_access')
->log('User accessed their assigned services dashboard.');
->event("dashboard_access")
->log("User accessed their assigned services dashboard.");
}
// Show toast from OAuth redirect flash data
if (session('entra_success')) {
$this->success(session('entra_success'));
if (session("entra_success")) {
$this->success(session("entra_success"));
}
if (session('entra_error')) {
$this->error(session('entra_error'));
if (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>
<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')
<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">
<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)
<x-mary-badge
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
</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">
@if($this->isEntraConnected)
<x-mary-button
external
icon="lucide.external-link"
:link="route('entra.open')"
class="btn-xs btn-soft btn-primary flex-1"
class=" btn-primary flex-1"
label="Open Outlook"
/>
@ -184,7 +173,7 @@ class="inline">
<x-mary-button
icon="lucide.unplug"
type="submit"
class="btn-xs btn-soft btn-error"
class=" btn-error"
tooltip="Disconnect"
/>
</form>
@ -193,7 +182,7 @@ class="btn-xs btn-soft btn-error"
no-wire-navigate
icon="lucide.plug"
:link="route('entra.connect')"
class="btn-xs btn-soft btn-primary flex-1"
class="btn-primary flex-1"
label="Connect"
/>
@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' }}"/>
<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' }}">
{{ $service->days_remaining }} {{ Str::plural('day', $service->days_remaining) }} left
{{ Illuminate\Support\Carbon::parse($service->duration)->diffForHumans() }}
</span>
</div>