AuditSphere Pro (SPFx) - Architecture Overview
Executive Summary
AuditSphere Pro is a SharePoint Framework (SPFx) web part that provides an embedded security and compliance monitoring dashboard directly within SharePoint Online. It serves as the SharePoint-native client interface for the AuditSphere platform, enabling users to monitor audit events, detect anomalies, assess compliance, and manage access reviews without leaving their SharePoint environment.
System Architecture
High-Level Architecture Diagram
Component Architecture
Web Part Structure
Service Layer Architecture
Technology Stack
Frontend Layer
| Component | Category | Purpose |
|---|---|---|
| SharePoint Framework | Platform | SharePoint-native web part hosting |
| Component Library | UI Framework | Reusable, accessible UI components |
| Design System | Styling | Microsoft's official design system with theming |
| Icon Library | Visual Assets | Consistent iconography |
| Date Utilities | Data Formatting | Date/time display and manipulation |
Communication Layer
| Component | Category | Purpose |
|---|---|---|
| Type-Safe API Client | RPC Framework | End-to-end type safety for API calls |
| JSON Serializer | Data Transform | Complex type serialization |
| Azure AD Client | Authentication | Built-in SPFx token acquisition |
Build and Development
| Component | Category | Purpose |
|---|---|---|
| TypeScript | Language | Type-safe development |
| Build Orchestrator | Build Tool | SPFx-compatible build pipeline |
| Module Bundler | Packaging | Code bundling and optimization |
| Code Linter | Quality | Code style enforcement |
Authentication Architecture
Authentication Flow
Security Model
| Layer | Mechanism | Description |
|---|---|---|
| User Authentication | Azure AD SSO | Automatic via SharePoint session |
| Token Acquisition | SPFx HTTP Client | Built-in Azure AD token service |
| API Authorization | Bearer Token | JWT validation on backend |
| User Identification | Token Claims | Email extracted from JWT |
| Tenant Isolation | Token Audience | Scoped to registered application |
Data Flow Architecture
Dashboard Data Flow
Access Review Workflow
Module Structure
Page Components
| Page | Functionality | Key Features |
|---|---|---|
| Overview | Dashboard summary | Stats cards, trends, activity feed |
| Activity | Audit event browser | Filtering, search, pagination |
| Anomalies | ML detection results | Severity filtering, status management |
| Compliance | CIS benchmark checks | Score display, remediation steps |
| Alerts | Security notifications | Acknowledgment, resolution workflow |
| Access Review | Permission campaigns | Campaign lifecycle, bulk decisions |
| Sites | SharePoint site list | Site sync, security status |
| Reports | Report generation | Multiple formats, download |
| Settings | Configuration | API connection, theme selection |
Shared Components
| Component | Purpose |
|---|---|
| Service Context | Dependency injection for API service |
| Theme Provider | Design system theming |
| Data Hooks | Async data fetching patterns |
| Loading States | Skeleton loaders, spinners |
| Error Boundaries | Graceful error handling |
Theming Architecture
Theme System
SharePoint Theme Integration
- Inherits SharePoint site theme colors
- Semantic color CSS variables applied to DOM
- Automatic dark mode detection from SharePoint
- Fluent UI design tokens for consistency
Deployment Architecture
Package Structure
Deployment Flow
Supported Hosts
| Host | Description |
|---|---|
| SharePoint Web Part | Standard SharePoint page embedding |
| SharePoint Full Page | Full-page application experience |
| Teams Personal App | Microsoft Teams personal tab |
| Teams Tab | Microsoft Teams channel tab |
Performance Optimization
Code Splitting Strategy
Performance Features
| Feature | Implementation |
|---|---|
| Lazy Loading | Pages loaded on-demand |
| Pagination | 50 items per page default |
| Caching | Token caching via SPFx |
| Auto-refresh | Configurable interval |
| Loading States | Skeleton loaders during fetch |
Integration with AuditSphere Platform
System Context
Architecture Relationship
| Component | Role | Communication |
|---|---|---|
| AuditSphere SPFx | Frontend client embedded in SharePoint | Sends API requests |
| AuditSphere API | Backend service providing all business logic | Receives requests, returns data |
API Integration
- SPFx web part connects to AuditSphere API backend
- Type-safe client matches backend API schema
- All data operations routed through AuditSphere API
- Authentication tokens validated by API service
- API handles Microsoft Graph integration and database operations
Configuration Options
Web Part Properties
| Property | Type | Description |
|---|---|---|
| API URL | String | Backend API endpoint |
| Azure AD Client ID | String | App registration identifier |
| Default Page | Dropdown | Initial page on load |
| Refresh Interval | Number | Auto-refresh in seconds (0 = disabled) |
| Theme Color | Dropdown | Visual theme selection |
Runtime Configuration
- Properties editable in SharePoint page editor
- Changes apply without page reload
- Settings persist per web part instance
Document Information
| Property | Value |
|---|---|
| Version | 1.0 |
| Last Updated | December 2025 |
| Classification | Client Documentation |