ui/src/pages/AdminTenantsPage.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import {
+  AlertDialog,
   Badge,
   Card,
   DataTable,
@@ -37,6 +39,7 @@ export function AdminTenantsPage() {
   const navigate = useNavigate();
   const { data: tenants, isLoading, isError } = useAllTenants();
   const { setCurrentOrg } = useOrgStore();
+  const [switchTarget, setSwitchTarget] = useState<TenantResponse | null>(null);
 
   if (isLoading) {
     return (
@@ -58,15 +61,18 @@ export function AdminTenantsPage() {
   }
 
   const handleRowClick = (tenant: TenantResponse) => {
-    // Find the matching org from the store and switch context
+    setSwitchTarget(tenant);
+  };
+
+  const confirmSwitch = () => {
+    if (!switchTarget) return;
     const orgs = useOrgStore.getState().organizations;
-    const match = orgs.find(
-      (o) => o.name === tenant.name || o.slug === tenant.slug,
-    );
+    const match = orgs.find((o) => o.name === switchTarget.name || o.slug === switchTarget.slug);
     if (match) {
       setCurrentOrg(match.id);
       navigate('/');
     }
+    setSwitchTarget(null);
   };
 
   return (
@@ -83,6 +89,16 @@ export function AdminTenantsPage() {
           <DataTable columns={columns} data={tenants} onRowClick={handleRowClick} />
         )}
       </Card>
+
+      <AlertDialog
+        open={!!switchTarget}
+        onClose={() => setSwitchTarget(null)}
+        onConfirm={confirmSwitch}
+        title="Switch tenant?"
+        description={`Switch to tenant "${switchTarget?.name}"? Your dashboard context will change.`}
+        confirmLabel="Switch"
+        variant="warning"
+      />
     </div>
   );
 }