ui: enterprise redesign for managed-tenants landing page
This commit is contained in:
Ahmed Darrazi
parent
9fd8cdef83
commit
88ba8a14d8
@ -1,76 +1,131 @@
|
||||
<x-filament-panels::page>
|
||||
<x-filament::section>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300">
|
||||
Workspace: <span class="font-medium text-gray-900 dark:text-gray-100">{{ $this->workspace->name }}</span>
|
||||
@php
|
||||
$tenants = $this->getTenants();
|
||||
@endphp
|
||||
|
||||
@if ($tenants->isEmpty())
|
||||
{{-- Empty state — enterprise-grade --}}
|
||||
<div class="mx-auto max-w-md">
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm dark:border-white/10 dark:bg-white/5">
|
||||
{{-- Workspace context badge --}}
|
||||
<div class="mb-5 inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium text-gray-600 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
|
||||
<x-filament::icon icon="heroicon-m-building-office-2" class="h-3.5 w-3.5" />
|
||||
{{ $this->workspace->name }}
|
||||
</div>
|
||||
|
||||
{{-- Icon --}}
|
||||
<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-950/30">
|
||||
<x-filament::icon
|
||||
icon="heroicon-o-server-stack"
|
||||
class="h-7 w-7 text-primary-500 dark:text-primary-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-white">No managed tenants yet</h3>
|
||||
<p class="mx-auto mt-2 max-w-xs text-sm text-gray-500 dark:text-gray-400">
|
||||
Connect your first Microsoft Entra tenant to start managing inventory, backups, drift detection, and policies.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex flex-col items-center gap-3">
|
||||
<x-filament::button
|
||||
tag="a"
|
||||
href="{{ route('admin.onboarding') }}"
|
||||
icon="heroicon-m-plus"
|
||||
size="lg"
|
||||
>
|
||||
Add tenant
|
||||
</x-filament::button>
|
||||
|
||||
<a href="{{ route('filament.admin.pages.choose-workspace') }}"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<x-filament::icon icon="heroicon-m-arrows-right-left" class="h-4 w-4" />
|
||||
Switch workspace
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Tenant list --}}
|
||||
<div class="mx-auto max-w-3xl">
|
||||
{{-- Header row --}}
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium text-gray-600 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
|
||||
<x-filament::icon icon="heroicon-m-building-office-2" class="h-3.5 w-3.5" />
|
||||
{{ $this->workspace->name }}
|
||||
</div>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
||||
· {{ $tenants->count() }} {{ \Illuminate\Support\Str::plural('tenant', $tenants->count()) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<x-filament::button
|
||||
color="gray"
|
||||
size="sm"
|
||||
wire:click="goToChooseTenant"
|
||||
icon="heroicon-m-arrow-right"
|
||||
icon-position="after"
|
||||
>
|
||||
Choose tenant
|
||||
</x-filament::button>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$tenants = $this->getTenants();
|
||||
@endphp
|
||||
|
||||
@if ($tenants->isEmpty())
|
||||
<div class="rounded-md border border-gray-200 bg-gray-50 p-4 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200">
|
||||
<div class="font-medium text-gray-900 dark:text-gray-100">No managed tenants yet.</div>
|
||||
<div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
|
||||
Add a managed tenant to start inventory, drift, backups, and policy management.
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-col gap-2 sm:flex-row">
|
||||
<x-filament::button
|
||||
type="button"
|
||||
color="primary"
|
||||
tag="a"
|
||||
href="{{ route('admin.onboarding') }}"
|
||||
>
|
||||
Start onboarding
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button
|
||||
type="button"
|
||||
color="gray"
|
||||
tag="a"
|
||||
href="{{ route('filament.admin.pages.choose-workspace') }}"
|
||||
>
|
||||
Change workspace
|
||||
</x-filament::button>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300">
|
||||
{{ $tenants->count() }} managed tenant{{ $tenants->count() === 1 ? '' : 's' }}
|
||||
</div>
|
||||
|
||||
<x-filament::button
|
||||
{{-- Tenant cards --}}
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-{{ min($tenants->count(), 3) }}">
|
||||
@foreach ($tenants as $tenant)
|
||||
<button
|
||||
type="button"
|
||||
color="gray"
|
||||
wire:click="goToChooseTenant"
|
||||
wire:key="tenant-{{ $tenant->id }}"
|
||||
wire:click="openTenant({{ (int) $tenant->id }})"
|
||||
class="group relative flex flex-col rounded-xl border border-gray-200 bg-white p-5 text-left shadow-sm transition-all duration-150 hover:border-gray-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-white/10 dark:bg-white/5 dark:hover:border-white/20 dark:focus:ring-offset-gray-900"
|
||||
>
|
||||
Choose tenant
|
||||
</x-filament::button>
|
||||
</div>
|
||||
{{-- Loading overlay --}}
|
||||
<div wire:loading wire:target="openTenant({{ (int) $tenant->id }})"
|
||||
class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-white/80 dark:bg-gray-900/80">
|
||||
<x-filament::loading-indicator class="h-5 w-5 text-primary-500" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@foreach ($tenants as $tenant)
|
||||
<div wire:key="tenant-{{ $tenant->id }}" class="rounded-lg border border-gray-200 p-4 dark:border-gray-800">
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="font-medium text-gray-900 dark:text-gray-100">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 group-hover:bg-gray-200 dark:bg-white/10 dark:group-hover:bg-white/15">
|
||||
<x-filament::icon
|
||||
icon="heroicon-o-server-stack"
|
||||
class="h-5 w-5 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h3 class="truncate text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ $tenant->name }}
|
||||
</div>
|
||||
|
||||
<x-filament::button
|
||||
type="button"
|
||||
color="primary"
|
||||
wire:click="openTenant({{ (int) $tenant->id }})"
|
||||
>
|
||||
Open
|
||||
</x-filament::button>
|
||||
</h3>
|
||||
<p class="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ $tenant->external_id ?? 'No external ID' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Hover arrow --}}
|
||||
<div class="absolute right-4 top-5 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<x-filament::icon
|
||||
icon="heroicon-m-arrow-right"
|
||||
class="h-4 w-4 text-gray-400 dark:text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Footer links --}}
|
||||
<div class="mt-6 flex items-center justify-center gap-6">
|
||||
<a href="{{ route('admin.onboarding') }}"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<x-filament::icon icon="heroicon-m-plus" class="h-4 w-4" />
|
||||
Add tenant
|
||||
</a>
|
||||
<a href="{{ route('filament.admin.pages.choose-workspace') }}"
|
||||
class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<x-filament::icon icon="heroicon-m-arrows-right-left" class="h-4 w-4" />
|
||||
Switch workspace
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</x-filament::section>
|
||||
@endif
|
||||
</x-filament-panels::page>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user