From 88ba8a14d8a4aa48d2be87b38a3355897982cecf Mon Sep 17 00:00:00 2001
From: Ahmed Darrazi <ahmed.darrazi@live.de>
Date: Sun, 22 Feb 2026 19:43:08 +0100
Subject: [PATCH] ui: enterprise redesign for managed-tenants landing page

---
 .../managed-tenants-landing.blade.php         | 185 ++++++++++++------
 1 file changed, 120 insertions(+), 65 deletions(-)

diff --git a/resources/views/filament/pages/workspaces/managed-tenants-landing.blade.php b/resources/views/filament/pages/workspaces/managed-tenants-landing.blade.php
index 6c7a2ba..a1bce92 100644
--- a/resources/views/filament/pages/workspaces/managed-tenants-landing.blade.php
+++ b/resources/views/filament/pages/workspaces/managed-tenants-landing.blade.php
@@ -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">
+                        &middot; {{ $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>