feat(ui): Add color coding to all status badges

Improved visual clarity for all status fields:
- Tenant status: active=green, inactive=gray, suspended=warning, error=red
- App status: ok/configured=green, pending=warning, error=red, requires_consent=warning
- RBAC status: ok/configured=green, manual_assignment_required=warning, error/failed=red
- Permission status: granted=green, missing=orange, error=red (from previous commit)
- Canaries: ok=green badge, error=red badge, pending=yellow badge

All status badges now use consistent color coding across the application
for better UX and faster status recognition.
This commit is contained in:
Ahmed Darrazi 2025-12-22 16:26:10 +01:00
parent a25d413d79
commit 76f70ef79b
2 changed files with 39 additions and 7 deletions

View File

@ -248,12 +248,37 @@ public static function infolist(Schema $schema): Schema
Infolists\Components\TextEntry::make('tenant_id')->label('Tenant ID')->copyable(), Infolists\Components\TextEntry::make('tenant_id')->label('Tenant ID')->copyable(),
Infolists\Components\TextEntry::make('domain')->copyable(), Infolists\Components\TextEntry::make('domain')->copyable(),
Infolists\Components\TextEntry::make('app_client_id')->label('App Client ID')->copyable(), Infolists\Components\TextEntry::make('app_client_id')->label('App Client ID')->copyable(),
Infolists\Components\TextEntry::make('status')->badge(), Infolists\Components\TextEntry::make('status')
Infolists\Components\TextEntry::make('app_status')->badge(), ->badge()
->color(fn (string $state): string => match ($state) {
'active' => 'success',
'inactive' => 'gray',
'suspended' => 'warning',
'error' => 'danger',
default => 'gray',
}),
Infolists\Components\TextEntry::make('app_status')
->badge()
->color(fn (string $state): string => match ($state) {
'ok', 'configured' => 'success',
'pending' => 'warning',
'error' => 'danger',
'requires_consent' => 'warning',
default => 'gray',
}),
Infolists\Components\TextEntry::make('app_notes')->label('Notes'), Infolists\Components\TextEntry::make('app_notes')->label('Notes'),
Infolists\Components\TextEntry::make('created_at')->dateTime(), Infolists\Components\TextEntry::make('created_at')->dateTime(),
Infolists\Components\TextEntry::make('updated_at')->dateTime(), Infolists\Components\TextEntry::make('updated_at')->dateTime(),
Infolists\Components\TextEntry::make('rbac_status')->label('RBAC status')->badge(), Infolists\Components\TextEntry::make('rbac_status')
->label('RBAC status')
->badge()
->color(fn (string $state): string => match ($state) {
'ok', 'configured' => 'success',
'manual_assignment_required' => 'warning',
'error', 'failed' => 'danger',
'not_configured' => 'gray',
default => 'gray',
}),
Infolists\Components\TextEntry::make('rbac_status_reason')->label('RBAC reason'), Infolists\Components\TextEntry::make('rbac_status_reason')->label('RBAC reason'),
Infolists\Components\TextEntry::make('rbac_last_checked_at')->label('RBAC last checked')->since(), Infolists\Components\TextEntry::make('rbac_last_checked_at')->label('RBAC last checked')->since(),
Infolists\Components\TextEntry::make('rbac_role_display_name')->label('RBAC role'), Infolists\Components\TextEntry::make('rbac_role_display_name')->label('RBAC role'),

View File

@ -48,11 +48,18 @@
@if (empty($canaries)) @if (empty($canaries))
<div class="text-sm text-gray-700">No canary results recorded.</div> <div class="text-sm text-gray-700">No canary results recorded.</div>
@else @else
<ul class="space-y-1 text-sm text-gray-800"> <ul class="space-y-1 text-sm">
@foreach ($canaries as $key => $status) @foreach ($canaries as $key => $status)
<li> <li class="flex items-center gap-2">
<span class="font-semibold">{{ $key }}:</span> <span class="font-semibold text-gray-800">{{ $key }}:</span>
<span class="{{ $status === 'ok' ? 'text-green-700' : 'text-amber-700' }}">{{ $status }}</span> <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
{{ $status === 'ok' ? 'bg-green-100 text-green-700' : '' }}
{{ $status === 'error' ? 'bg-red-100 text-red-700' : '' }}
{{ $status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}
{{ !in_array($status, ['ok', 'error', 'pending']) ? 'bg-gray-100 text-gray-700' : '' }}
">
{{ $status }}
</span>
</li> </li>
@endforeach @endforeach
</ul> </ul>