Summary
This project delivered an automated, cloud-authenticated expense claim and approval portal for a non-profit organisation. The solution replaced cumbersome paper forms, email receipts, and manual spreadsheets with an intuitive self-service portal where team members can submit expenses, upload receipts, track payment progress, and route claims through automated manager approvals to the central finance system.
The Challenge
The organisation operated with distributed teams, field staff, and volunteers across multiple regions. Managing expense claims manually created significant operational friction:
- Lost Receipts & Administrative Bottlenecks: Staff submitted paper receipts and scattered email attachments, leading to delayed reimbursements and lost documentation.
- Lack of Transparency: Claimants had no visibility into where their submissions were in the review process, resulting in frequent follow-up emails to the finance team.
- Strict Compliance & Donor Accountability: As a non-profit, the organisation required strict compliance auditing. Every expense required a verified line-manager sign-off, appropriate grant or fund code allocation, and an immutable audit trail.
- Identity & Security Requirements: Staff already utilized Microsoft 365. Administrators required Single Sign-On (SSO) with multi-factor authentication (MFA) and granular Role-Based Access Control (RBAC) without managing separate sets of login credentials.
The Solution & Workflow
We engineered a full-stack, secure web application composed of an Angular Single-Page Application (SPA) frontend and a robust ASP.NET Core REST API backend:
┌────────────────────────────────────────────────────────┐
│ Angular SPA (TypeScript) │
│ • Claim Submission • Receipt Upload • Tracking │
└───────────────────────────┬────────────────────────────┘
│ (OAuth2 Bearer Token via MSAL)
▼
┌────────────────────────────────────────────────────────┐
│ ASP.NET Core Web API (C#) │
│ • Entra ID Auth • Workflow Engine • Validation │
└─────────────┬────────────────────────────┬─────────────┘
│ │
▼ ▼
┌───────────────────────────┐┌───────────────────────────┐
│ EF Core + SQL Server DB ││ Secure Receipt Storage │
│ • Audit Logs • Line Items ││ • Encrypted Cloud Blobs │
└─────────────┬─────────────┘└───────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────┐
│ Financial Accounting Export │
│ • GL Classification • Batch Payment Processing │
└────────────────────────────────────────────────────────┘End-to-End Expense Lifecycle
- Staff Portal: Employees and field workers sign in using their standard organisation credentials via Microsoft Entra ID (formerly Azure Active Directory). They can create new expense claims, input line items with VAT and expense categories, and upload receipt images or PDF invoices directly from mobile or desktop.
- Real-Time Status Tracking: Claimants can view a clear timeline of each claim (
Draft→Submitted→Under Manager Review→Finance Review→Approved for Payment→Paid). - Automated Manager Notification & Sign-Off: When a claim is submitted, the system automatically identifies the claimant’s line manager and sends an email notification containing a direct, secure review link. Managers can review line items and attached receipts, approve with a single click, or return the claim with feedback notes.
- Finance Team Classification & Ledger Integration: Once manager-approved, the claim enters the central finance worklist. Finance officers verify tax details, classify costs against specific project codes and general ledger (GL) accounts, and export approved batches directly into the accounting system for payment disbursement.
Technical Architecture & Implementation
1. Backend: ASP.NET Core & C#
- Clean RESTful API Architecture: Built on modern ASP.NET Core in C#, following separation of concerns with controllers, domain services, and repository patterns.
- Entity Framework Core (EF Core): Data persistence to SQL Server managed using code-first migrations. Complex queries use compiled LINQ with projection to keep database queries efficient.
- Audit Trails & Soft Deletes: EF Core interceptors automatically record timestamps, user IDs, and previous state snapshots for every status change, ensuring complete auditability for financial reviews.
- File Ingestion & Validation: Secure receipt upload handling with file type whitelisting, size limits, and encrypted cloud storage references.
2. Authentication: Microsoft Entra ID & MSAL
- Enterprise Single Sign-On: Configured Microsoft Authentication Library (MSAL) for Angular to handle OAuth 2.0 / OpenID Connect authentication flows against Microsoft Entra ID.
- JWT Bearer Token Validation: The ASP.NET Core API validates incoming bearer tokens on every request using
Microsoft.Identity.Web. - Role-Based Authorization Policies: Application permissions (Employee, Approving Manager, Finance Administrator) are enforced using declarative ASP.NET Core authorization policies (
[Authorize(Policy = "RequireFinanceRole")]).
3. Frontend: Angular & TypeScript
- Responsive Single-Page Application: Developed with Angular and TypeScript, featuring a clean layout designed for quick entry on mobile and desktop.
- Reactive Forms & File Uploads: Dynamic reactive forms with client-side validation, currency formatting, and drag-and-drop receipt upload with instant thumbnail previews.
- RxJS State Management: Clean asynchronous data pipelines for notification badges, claim status filtering, and live search.
Key Results & Impact
- Reimbursement Turnaround: Reduced the average claim-to-payment cycle from over three weeks down to under five business days.
- Zero Document Loss: Eliminated paper receipts and misplaced email attachments, consolidating 100% of expense evidence into a searchable digital archive.
- Audit Compliance: Provided non-profit board members and grant auditors with immediate access to timestamped approval records and financial classifications.
- Seamless User Adoption: Single Sign-On with existing Microsoft credentials meant zero onboarding friction for staff and zero credential management overhead for IT.