From 8d4f7ea0f9130fb7af08f1d1873a28211a2849da Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Fri, 31 Jul 2026 20:17:54 +0200
Subject: [PATCH] fix(web): app-homing funnel banner - prominent card with
 permission hint + docs link

The plain info box was easy to overlook. Upgrade to a bordered gradient card
with icon and heading, state that admin consent needs a tenant-wide-consent
role (Global Administrator / Privileged Role Administrator), and link the
portal-setup docs article describing the required permissions.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../sections/SectionAutopilotValidation.tsx   | 41 ++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionAutopilotValidation.tsx b/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionAutopilotValidation.tsx
index 3a8c4292..68a60f82 100644
--- a/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionAutopilotValidation.tsx
+++ b/src/Web/autopilot-monitor-web/app/settings/tenant/sections/SectionAutopilotValidation.tsx
@@ -2,6 +2,7 @@
 
 import { useAuth } from "@/contexts/AuthContext";
 import { legacyConfigured, switchAuthApp } from "@/lib/authApp";
+import { DOCS_URL } from "@/utils/config";
 import { useTenantConfig } from "../../TenantConfigContext";
 import { TenantNotifications } from "../../TenantNotifications";
 import AutopilotValidationSection from "../../components/AutopilotValidationSection";
@@ -61,11 +62,41 @@ export function SectionAutopilotValidation() {
           </button>
         </div>
       ) : appHomingFunnelActive ? (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
-          Autopilot device validation currently runs on the previous Autopilot Monitor app
-          registration. Granting consent below (or running &quot;Detect existing access&quot;)
-          approves the <strong>new</strong> app registration and switches your tenant over
-          automatically — current sessions keep working, and new sign-ins use the new app.
+        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-300 rounded-lg p-5 shadow-sm">
+          <div className="flex items-start gap-3">
+            <svg className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            <div className="text-sm text-blue-900">
+              <p className="font-semibold text-base">
+                Please switch to the new Autopilot Monitor app registration
+              </p>
+              <p className="mt-1.5 text-blue-800">
+                Your tenant still runs on the previous app registration. Granting consent below (or
+                running &quot;Detect existing access&quot;) approves the <strong>new</strong> app and
+                switches your tenant over automatically — current sessions keep working, and new
+                sign-ins use the new app. It&apos;s a one-time step and takes about a minute.
+              </p>
+              <p className="mt-1.5 text-blue-800">
+                <strong>Note:</strong> granting admin consent requires an Entra ID account that can
+                consent tenant-wide (e.g. <strong>Global Administrator</strong> or{" "}
+                <strong>Privileged Role Administrator</strong>). The consented permission stays the
+                same read-only Graph permission as before
+                (<code className="text-xs bg-blue-100 px-1 rounded">DeviceManagementServiceConfig.Read.All</code>).
+              </p>
+              <a
+                href={`${DOCS_URL}/getting-started/portal-setup`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 mt-2.5 text-sm font-medium text-blue-700 hover:text-blue-900 underline"
+              >
+                See the documentation for details on the required permissions
+                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </a>
+            </div>
+          </div>
         </div>
       ) : homedOnLegacyApp ? (
         <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">