M365 Support Hub

Enterprise IT Service Management for Microsoft 365

IT Service Management (ITSM) solution built on the SharePoint Framework (SPFx) 1.22.1. The Support Hub provides a unified experience for Incident Management, Service Requests, Change Management, IT Asset Management (ITAM/CMDB), and Knowledge Base within Microsoft 365.

Gallery

Dashboard	Ticket Management

Copilot Chat	Service Catalog

📸 View Full Gallery (23 Screenshots)

Technical Documentation

For comprehensive technical handover documentation, see the docs/ folder:

Document	Description
00 - User Guide	End-user guide: Copilot, KEDB, SLA Dashboard, Email
01 - Solution Overview	Business purpose, functional scope, supported environments
02 - Architecture Overview	Logical/physical architecture, SPFx runtime model
03 - Web Parts and Extensions	Web part lifecycle, component structure, feature modules
04 - Services and Data Access	Service layer, data providers, Graph API integration
05 - State Management	React Context patterns, actions, custom hooks
06 - Configuration	SPFx config, runtime settings, localization
07 - Build and Deployment	Build commands, packaging, CI/CD, deployment
08 - Security and Compliance	Authentication, authorization, API permissions
09 - Error Handling	Error patterns, logging, debugging
10 - Technical Debt	Known issues, recommendations, scalability

Feature Documentation

Feature	Description
Copilot Integration	AI chat, RAG retrieval, meeting insights
Change Management	CAB Workbench, risk assessment, workflows
Problem Management	KEDB, root cause analysis
Incident Management	Ticket lifecycle, SLA tracking
Asset Management	ITAM/CMDB, Intune sync
Knowledge Base	Articles, categories, search
Automation	Rules engine, notifications
AI Assistant	Copilot features, suggestions

Executive Summary

System Health: Production Ready

The M365 Support Hub is a SPFx 1.22.1 solution providing enterprise ITSM capabilities. Key observations:

Quick Start

# Clone and install
git clone https://github.com/NicolasKheirallah/react-ITSM-Plattform.git
cd react-ITSM-Plattform

# Install dependencies
npm install

# Trust development certificate (first-time only)
npm run trust-dev-cert

# Start development server
npm run serve

Open https://localhost:4321/\_layouts/15/workbench.aspx or your hosted workbench for testing.

Prerequisites

Requirement	Version	Notes
Node.js	22.18.0 - 18.x	Use nvm or nvs for version management
SPFx	1.22.1	Heft-based build system
Microsoft 365	Enterprise	SharePoint Online required
TypeScript	5.8.x	Configured in tsconfig.json

Required Global Tools

# Install Heft globally (if not already installed)
npm install -g @microsoft/heft

# Or use npx to run locally
npx heft build --help

Project Structure

react-ITSM-Plattform/
├── config/                     # SPFx configuration files
│   ├── package-solution.json   # SharePoint app package metadata
│   ├── serve.json              # Local debug configuration
│   └── write-manifests.json    # Production manifest generation
├── src/
│   └── webparts/
│       └── supportHub/         # Main web part module
│           ├── components/     # Shared UI components
│           ├── data/           # Data layer (models, providers)
│           ├── features/       # Feature modules
│           │   ├── changes/          # Change Management
│           │   ├── cmdb/             # Configuration Management
│           │   ├── dashboard/        # Analytics Dashboard
│           │   ├── itam/             # IT Asset Management
│           │   ├── knowledge/        # Knowledge Base
│           │   ├── portal/           # Employee Portal
│           │   ├── problem/          # Problem Management
│           │   ├── service-catalog/  # Service Catalog
│           │   ├── settings/         # Admin Settings
│           │   └── tickets/          # Incident/Request Management
│           ├── hooks/          # Shared React hooks
│           ├── loc/            # Localization files
│           ├── logic/          # Business rules & validation
│           ├── models/         # TypeScript interfaces/types
│           ├── services/       # Business logic services
│           ├── state/          # React Context state management
│           ├── styles/         # Global SCSS/Theme styles
│           └── utils/          # Utility functions
├── assets/                     # Screenshot gallery & static assets
├── docs/                       # Comprehensive documentation
├── package.json               # Node dependencies
├── tsconfig.json              # TypeScript configuration
└── gulpfile.js                # Build tasks (legacy)

Development Setup

Click to expand Development Setup Guide

1. Environment Setup

# Use correct Node version
nvm use 22.18.0

# Verify environment
node --version  # Should show 18.x
npm --version

2. Development Certificate

# Trust the local development certificate
npm run trust-dev-cert

# Or use the gulp command
gulp trust-dev-cert

3. Local Development

# Start local development server with live reload
npm run serve

# Or with watch mode for faster builds
npm run build-watch

4. Debugging

Use your browser's developer tools:

Chrome/Edge: F12 → Sources → Look for localhost:4321
React DevTools: Install browser extension for component inspection
SharePoint DevTools: Use SPFx Developer Dashboard

Build Commands

Click to expand Build Command Reference

Command	Description	Output
`npm run build`	Full production build	`sharepoint/solution/`
`npm run bundle`	Bundle only (no packaging)	`temp/deploy/`
`npm run package-solution`	Create .sppkg file	`sharepoint/solution/`
`npm run lint`	Run ESLint	Console output
`npm run lint:fix`	Auto-fix ESLint issues	Modified files
`npm run clean`	Clean build artifacts	-
`npm run deploy`	Deploy to Azure Storage	Azure Blob

Production Build

# Build for production
npm run bundle -- --production
npm run package-solution -- --production

# Result: sharepoint/solution/m365-support-hub.sppkg

CI/CD Pipeline

# Clean build
npm run clean
npm run build

# Lint check
npm run lint

# Package solution
npm run package-solution

Deployment

1. App Catalog Deployment

Upload sharepoint/solution/m365-support-hub.sppkg to your tenant app catalog
Approve the API permission requests (Graph scopes)
Deploy the app to your sites

2. Site Collection Installation

Go to site contents → "Add an app"
Find "M365 Support Hub"
Add the app to the site

3. Page Configuration

Create a new modern page
Add the "Support Hub" web part
Configure web part properties as needed

Features

Ticket Management (`features/tickets/`)

Incident and Service Request lifecycle
Automated triage and assignment routing
Rich text editing with Quill
Activity log and audit trail
SLA tracking and breach notifications
Similar ticket suggestions via Graph AI

Service Catalog (`features/service-catalog/`)

Self-service catalog for requests
Visual catalog builder for admins
Custom form designer with JSON schema
Approval workflow configuration
Cart and checkout system
Request tracking

Change Management (`features/changes/`)

CAB (Change Advisory Board) workflows
Risk assessment engine
Change models (Standard, Normal, Emergency)
Approval chains and stage gates
Post-implementation review

IT Asset Management (`features/cmdb/`, `features/itam/`)

Asset lifecycle tracking
CMDB relationship visualization
Stockroom management
License compliance
Device provisioning

Knowledge Base (`features/knowledge/`)

Article creation and publishing
Contextual search suggestions
Related article recommendations
Category navigation

Employee Portal (`features/portal/`)

Unified service catalog search
Personal asset view
Request status tracking
Quick actions

Admin Settings (`features/settings/`)

User and permission management
SLA configuration
Assignment group setup
Provisioning management
Email templates
Automation rules

Configuration

Environment Variables

Create a .env file for local development:

# Local development settings
SPFX_DEBUG=true
SKIP_FEATURE_DEPLOYMENT=true

Web Part Properties

Configure via the property pane:

Property	Type	Description
title	string	Web part title
defaultTab	string	Initial tab to display
theme	string	Color theme selection
features	string[]	Enabled feature modules

List Provisioning

The solution includes self-provisioning:

Navigate to Admin Settings → Provisioning
Click "Start Provisioning" to create:
- Tickets list
- Service Catalog Items list
- Change Requests list
- CMDB lists
- Knowledge Base lists
- Settings lists

Architecture

See docs/architecture.md for detailed architecture documentation.

High-Level Overview

graph TD
  User((User)) -->|HTTPS| SPO[SharePoint Online]
  subgraph "SPFx Solution"
    WebPart[Support Hub Web Part]
    AppState[App State / Context]
    Services[Service Layer]
  end
  SPO --> WebPart
  WebPart --> AppState
  AppState --> Services
  Services -->|Graph SDK| MSGraph[Microsoft Graph API]
  Services -->|SP REST| SPData[SharePoint Lists]

Key Design Decisions

State Management: React Context API with custom hooks
UI Framework: Fluent UI React v8 with custom theming
Data Layer: PnPjs for SharePoint and Graph API access
Build System: Heft (SPFx 1.22+)
Styling: SCSS modules with CSS custom properties

Troubleshooting

Click to expand Troubleshooting Guide

Common Issues

"Node version not supported"

# Check current version
node --version

# Switch to correct version
nvm use 22.18.0

"Cannot find module" errors

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Build fails with memory issues

# Increase Node memory limit
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build

ESLint errors

# Auto-fix common issues
npm run lint:fix

Web part not loading

Check browser console for errors
Verify API permissions are approved in SharePoint Admin Center
Clear browser cache
Check SharePoint workbench connectivity

Getting Help

Version History

Version	Date	Author	Changes
1.1.0.0	January 2026	Nicolas Kheirallah	Feature updates, bug fixes, Copilot integ
1.0.0	January 2026	Nicolas Kheirallah	Initial release

License

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Contributing

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
Run lint and build checks
```
npm run lint
npm run build
```
Submit a pull request

graph LR
    A[Fork Repo] --> B[Create Branch]
    B --> C[Commit Changes]
    C --> D[Run Tests]
    D --> E[Submit PR]

Support

For issues and questions:

Create a GitHub issue
Check existing documentation
Review the architecture documentation in docs/

Name		Name	Last commit message	Last commit date
assets		assets
config		config
docs		docs
src		src
.DS_Store		.DS_Store
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation