Add admin user filters and increase profile photo sizes

User filters (web part property pane — User Filters group):
- Exclude accounts: comma-separated patterns matched against display name,
  UPN, and email. Use for conference rooms, service accounts, noreply@, etc.
- Only show tenant users: auto-detects the site's email domain from the
  current user's login and hides anyone with a different domain (gmail,
  hotmail, etc.)
- Hide guest accounts: removes Azure AD Guest users entirely (they are
  still shown with a badge when this is off)
- Hide disabled accounts: removes blocked sign-in accounts entirely

Filtering applied inside GraphService._applyUserFilters() after all
data sources, so excluded users don't appear in stats, org tree, or
directory. Changing any filter property re-initialises the service.

Photo size increases for more prominence:
- Directory card avatars: 48px → 64px + soft drop shadow
- Directory list avatars: 32px → 40px + soft shadow
- Org chart node photos/initials: 62px → 78px + drop shadow
- Org chart node card height: 185px → 200px (to fit larger photo)
- Compact card photos: 40px → 52px; card height 140px → 158px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: sregan1

src/services/GraphService.ts

@@ -32,11 +32,19 @@ const BATCH_SIZE = 500;
 
 export type DataSource = 'auto' | 'graph' | 'search';
 
+export interface IUserFilterOptions {
+  tenantDomain?: string;       // only show users whose email domain matches (e.g. 'contoso.com')
+  excludedPatterns?: string[]; // lower-case substrings — hide any user whose name/UPN/mail contains one
+  hideGuestUsers?: boolean;    // hide userType === 'Guest'
+  hideDisabledAccounts?: boolean; // hide accountEnabled === false
+}
+
 export class GraphService {
   private _client:         SPHttpClient;
   private _graphClient:    MSGraphClientV3 | undefined;
   private _webUrl:         string;
   private _dataSource:     DataSource;
+  private _filterOptions:  IUserFilterOptions;
   private _photoCache:     Map<string, string | null> = new Map();
   private _allUsersCache:  IGraphUser[] | null = null;
   private _childrenMap:    Map<string, IGraphUser[]> = new Map();
@@ -48,11 +56,18 @@ export class GraphService {
   private _presenceExpiry = 0;
   private readonly _PRESENCE_TTL = 60_000;
 
-  constructor(client: SPHttpClient, webUrl: string, graphClient?: MSGraphClientV3, dataSource: DataSource = 'auto') {
-    this._client      = client;
-    this._webUrl      = webUrl.replace(/\/$/, '');
-    this._graphClient = graphClient;
-    this._dataSource  = dataSource;
+  constructor(
+    client: SPHttpClient,
+    webUrl: string,
+    graphClient?: MSGraphClientV3,
+    dataSource: DataSource = 'auto',
+    filterOptions: IUserFilterOptions = {}
+  ) {
+    this._client        = client;
+    this._webUrl        = webUrl.replace(/\/$/, '');
+    this._graphClient   = graphClient;
+    this._dataSource    = dataSource;
+    this._filterOptions = filterOptions;
   }
 
   /* ── Public API ──────────────────────────────────────────────────── */
@@ -91,7 +106,7 @@ export class GraphService {
       try {
         const users = await this._fetchAllUsersFromGraph();
         if (users.length === 0) throw new Error('Graph API returned 0 users');
-        return users;
+        return this._applyUserFilters(users);
       } catch (err) {
         if (this._dataSource === 'graph') throw err;
         // 'auto' mode: fall back to SharePoint Search
@@ -102,7 +117,32 @@ export class GraphService {
 
     // SharePoint Search path (primary or fallback)
     const users = await this._fetchAllUsers();
-    return this._supplementUnlicensedReports(users);
+    return this._applyUserFilters(await this._supplementUnlicensedReports(users));
+  }
+
+  private _applyUserFilters(users: IGraphUser[]): IGraphUser[] {
+    const { tenantDomain, excludedPatterns, hideGuestUsers, hideDisabledAccounts } = this._filterOptions;
+    if (!tenantDomain && (!excludedPatterns || excludedPatterns.length === 0) && !hideGuestUsers && !hideDisabledAccounts) {
+      return users;
+    }
+    return users.filter(user => {
+      if (hideDisabledAccounts && user.accountEnabled === false) return false;
+      if (hideGuestUsers && user.userType === 'Guest') return false;
+      if (tenantDomain) {
+        const emailDomain = ((user.mail || user.id || '').split('@')[1] || '').toLowerCase();
+        if (emailDomain && emailDomain !== tenantDomain) return false;
+      }
+      if (excludedPatterns && excludedPatterns.length > 0) {
+        const haystack = [
+          user.displayName || '',
+          user.id || '',
+          user.mail || '',
+          user.userPrincipalName || '',
+        ].join('\0').toLowerCase();
+        if (excludedPatterns.some(p => haystack.includes(p))) return false;
+      }
+      return true;
+    });
   }
 
   public async getUserPhoto(userId: string): Promise<string | null> {

src/webparts/smartOrgChart/SmartOrgChartWebPart.ts

@@ -34,6 +34,11 @@ export interface ISmartOrgChartWebPartProps {
   enableUserFilter: boolean;
   // Data
   dataSource: 'auto' | 'graph' | 'search';
+  // User filters
+  excludedAccounts: string;
+  restrictToTenantDomain: boolean;
+  hideGuestUsers: boolean;
+  hideDisabledAccounts: boolean;
 }
 
 export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOrgChartWebPartProps> {
@@ -53,6 +58,11 @@ export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOr
     if (p.logoUrl     === undefined) p.logoUrl     = '';
     // Data source default
     if (p.dataSource  === undefined) p.dataSource  = 'auto';
+    // User filter defaults
+    if (p.excludedAccounts       === undefined) p.excludedAccounts       = '';
+    if (p.restrictToTenantDomain === undefined) p.restrictToTenantDomain = false;
+    if (p.hideGuestUsers         === undefined) p.hideGuestUsers         = false;
+    if (p.hideDisabledAccounts   === undefined) p.hideDisabledAccounts   = false;
     return super.onInit();
   }
 
@@ -74,6 +84,10 @@ export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOr
       enableDeptFilter: this.properties.enableDeptFilter !== false,
       enableUserFilter: this.properties.enableUserFilter !== false,
       dataSource: this.properties.dataSource || 'auto',
+      excludedAccounts:       this.properties.excludedAccounts       || '',
+      restrictToTenantDomain: this.properties.restrictToTenantDomain || false,
+      hideGuestUsers:         this.properties.hideGuestUsers         || false,
+      hideDisabledAccounts:   this.properties.hideDisabledAccounts   || false,
       onSettingsSaved: (newProps: Partial<ISmartOrgChartWebPartProps>) => {
         Object.assign(this.properties, newProps);
       }
@@ -179,6 +193,33 @@ export default class SmartOrgChartWebPart extends BaseClientSideWebPart<ISmartOr
                 })
               ]
             },
+            {
+              groupName: 'User Filters',
+              groupFields: [
+                PropertyPaneTextField('excludedAccounts', {
+                  label: 'Exclude accounts',
+                  placeholder: 'conf-room, noreply, admin@, Service Account',
+                  description: 'Comma-separated words or patterns (case-insensitive). Any user whose display name, email, or UPN contains one of these will be hidden from all views.',
+                  multiline: true,
+                  rows: 3
+                }),
+                PropertyPaneToggle('restrictToTenantDomain', {
+                  label: 'Only show tenant users',
+                  onText: 'On — hides accounts with external email domains (e.g. gmail.com, hotmail.com)',
+                  offText: 'Off — all users shown regardless of email domain'
+                }),
+                PropertyPaneToggle('hideGuestUsers', {
+                  label: 'Hide Azure AD guest accounts',
+                  onText: 'On — guest accounts hidden',
+                  offText: 'Off — guest accounts visible (shown with Guest badge)'
+                }),
+                PropertyPaneToggle('hideDisabledAccounts', {
+                  label: 'Hide disabled accounts',
+                  onText: 'On — blocked sign-in accounts hidden',
+                  offText: 'Off — disabled accounts visible (shown with Disabled badge)'
+                }),
+              ]
+            },
             {
               groupName: 'Org Chart',
               groupFields: [

src/webparts/smartOrgChart/components/EmployeeDirectory/EmployeeDirectory.module.scss

@@ -151,9 +151,9 @@
   overflow-y: auto;
 }
 
-.size_small  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 185px; }
-.size_medium { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 200px; }
-.size_large  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: 215px; }
+.size_small  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 205px; }
+.size_medium { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 222px; }
+.size_large  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-rows: 238px; }
 
 /* ── Card ────────────────────────────────── */
 
@@ -193,17 +193,19 @@
 }
 
 .avatar {
-  width: 48px; height: 48px;
+  width: 64px; height: 64px;
   border-radius: 50%; object-fit: cover;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
 }
 
 .initials {
-  width: 48px; height: 48px;
+  width: 64px; height: 64px;
   border-radius: 50%;
   background: $ms-color-themePrimary;
   color: #ffffff;
   display: flex; align-items: center; justify-content: center;
-  font-size: 15px; font-weight: 700;
+  font-size: 20px; font-weight: 700;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
 }
 
 .cardBody { flex: 1; min-width: 0; }
@@ -323,15 +325,17 @@
 .listAvatarWrap { position: relative; display: inline-block; flex-shrink: 0; }
 
 .listAvatar {
-  width: 32px; height: 32px;
+  width: 40px; height: 40px;
   border-radius: 50%; object-fit: cover; flex-shrink: 0;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
 }
 
 .listInitials {
-  width: 32px; height: 32px; border-radius: 50%;
+  width: 40px; height: 40px; border-radius: 50%;
   background: $ms-color-themePrimary; color: #fff;
   display: flex; align-items: center; justify-content: center;
-  font-size: 11px; font-weight: 700; flex-shrink: 0;
+  font-size: 13px; font-weight: 700; flex-shrink: 0;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
 }
 
 .listName { font-weight: 600; color: #1a1a1a; white-space: nowrap; }

src/webparts/smartOrgChart/components/OrgChart/OrgChart.module.scss

@@ -325,7 +325,7 @@
   padding: 16px 10px 18px;
   width: 180px;
   min-width: 180px;
-  height: 185px;
+  height: 200px;
   overflow: visible;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.18s ease, transform 0.15s ease;
@@ -363,11 +363,15 @@
   pointer-events: none;
 }
 
-.photo    { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block; }
+.photo    {
+  width: 78px; height: 78px; border-radius: 50%; object-fit: cover; display: block;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+}
 .initials {
-  width: 62px; height: 62px; border-radius: 50%;
+  width: 78px; height: 78px; border-radius: 50%;
   color: #ffffff; display: flex; align-items: center; justify-content: center;
-  font-size: 17px; font-weight: 700; letter-spacing: 0.3px;
+  font-size: 22px; font-weight: 700; letter-spacing: 0.3px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
 }
 
 /* ── Text ────────────────────────────────── */
@@ -1081,17 +1085,17 @@
 .compactCard {
   width: 148px !important;
   min-width: 148px !important;
-  height: 140px !important;
+  height: 158px !important;
   padding: 10px 8px 12px !important;
 
-  .photo, .initials { width: 40px !important; height: 40px !important; font-size: 13px !important; }
+  .photo, .initials { width: 52px !important; height: 52px !important; font-size: 15px !important; }
   .nodeName { font-size: 11.5px !important; margin-bottom: 2px !important; }
   .nodeTitle { font-size: 10px !important; }
   .nodeDept { font-size: 9px !important; padding: 1px 6px !important; margin-top: 5px !important; }
 }
 
 /* Adjust connector drop for compact cards */
-.compactMode .nodeWrapper.hasChildren::after { top: 140px; }
+.compactMode .nodeWrapper.hasChildren::after { top: 158px; }
 
 /* ════════════════════════════════════════════
    STATS BAR

src/webparts/smartOrgChart/components/SmartOrgChart.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IconButton } from '@fluentui/react/lib/Button';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { MSGraphClientV3 } from '@microsoft/sp-http';
-import { GraphService } from '../../../services/GraphService';
+import { GraphService, IUserFilterOptions } from '../../../services/GraphService';
 import { MockGraphService, MockCompanySize } from '../../../services/MockGraphService';
 import { ISmartOrgChartProps, IUserSettings } from './ISmartOrgChartProps';
 import { EmployeeDirectory } from './EmployeeDirectory/EmployeeDirectory';
@@ -91,7 +91,14 @@ export class SmartOrgChart extends React.Component<ISmartOrgChartProps, ISmartOr
   }
 
   public async componentDidUpdate(prev: ISmartOrgChartProps): Promise<void> {
-    if (prev.useDemoData !== this.props.useDemoData || prev.dataSource !== this.props.dataSource) {
+    if (
+      prev.useDemoData           !== this.props.useDemoData ||
+      prev.dataSource            !== this.props.dataSource  ||
+      prev.excludedAccounts      !== this.props.excludedAccounts ||
+      prev.hideDisabledAccounts  !== this.props.hideDisabledAccounts ||
+      prev.hideGuestUsers        !== this.props.hideGuestUsers ||
+      prev.restrictToTenantDomain !== this.props.restrictToTenantDomain
+    ) {
       await this._initGraphService();
     }
   }
@@ -112,7 +119,34 @@ export class SmartOrgChart extends React.Component<ISmartOrgChartProps, ISmartOr
     } catch {
       // Graph client unavailable — fall back to SP Search only
     }
-    this.setState({ graphService: new GraphService(spHttpClient, pageContext.web.absoluteUrl, graphClient, this.props.dataSource || 'auto') });
+
+    // Derive tenant domain from the current user's email when the restriction is enabled
+    let tenantDomain: string | undefined;
+    if (this.props.restrictToTenantDomain) {
+      const userEmail = (pageContext.user?.email || '').toLowerCase();
+      const atIdx = userEmail.lastIndexOf('@');
+      if (atIdx > 0) tenantDomain = userEmail.substring(atIdx + 1);
+    }
+
+    const filterOptions: IUserFilterOptions = {
+      tenantDomain,
+      excludedPatterns: (this.props.excludedAccounts || '')
+        .split(',')
+        .map(s => s.trim().toLowerCase())
+        .filter(s => s.length > 0),
+      hideGuestUsers:       this.props.hideGuestUsers       || false,
+      hideDisabledAccounts: this.props.hideDisabledAccounts || false,
+    };
+
+    this.setState({
+      graphService: new GraphService(
+        spHttpClient,
+        pageContext.web.absoluteUrl,
+        graphClient,
+        this.props.dataSource || 'auto',
+        filterOptions
+      )
+    });
   }
 
   private _setMockSize = (size: MockCompanySize): void => {