Technical & Experience Audits

Table of Content

Backend Technical Audit

Review of system architecture, APIs, and data flows.

Overview

This audit covers the full technology stack, code structure, and feature readiness of the WAYN for Business platform. The goal was to identify backend dependencies and prioritize technical improvements during the frontend revamp phase.

Layer	Stack / Tooling
Frontend	Next.js 14 (App Router), React 18, TypeScript, Material-UI v6, next-intl
State Management	RxJS BehaviorSubjects + React Query v5
Build Composition	~20,000 lines of TypeScript across 180 files
Deployment	Azure Pipelines → Kubernetes (dev / staging / production)
Backend	API-driven (.NET-based, inferred from API patterns)

Architectural strengths

Organized and modular App Router structure.
Locale-based routing with strong bilingual (Arabic/English) support.
Consistent theming via Material-UI with responsive breakpoints.
Secure rendering with XSS sanitization in message views.
React Query adopted correctly for caching and refetching state.

Critical Findings Summary

Category	Issue	Why It Matters
Authentication	Extra OTP step after UAE PASS	Adds redundant friction and potential confusion.
Delegation	Missing delegation and decree logic	BRD non-compliance and regulatory exposure.
Access Control	UI-only role enforcement	High risk of unauthorized API calls.
Inbox	Receive-only functionality	Blocks core sender workflows.
Notifications	Unimplemented backend	Users lack real-time visibility.
Address Book	No search or filters	Difficult to scale for large entities.
Performance	Slow debounce and heavy polling	Reduced responsiveness and higher load.
Testing	No test coverage	High regression risk in production.
Secrets Management	Sensitive data in repo	Security and compliance violation.
Performance Analysis	Bundle size unknown	Potential front-end performance issues.

BRD Readiness Review

Requirement	Status	Notes
UAE PASS Login	Complete	Working as expected.
OTP Verification	Partially Valid	Redundant with UAE PASS identity validation.
MOE Integration	Missing	No evidence of API connection.
Delegation / Decree Mode	Missing	Core compliance gap.
Digital P.O. Box (Directory)	Limited	CRUD works; search and verification missing.
Notifications Banner	Not Implemented	Only placeholder components.
Email Template Composer	Missing	Feature gap.
Roles & Permissions	Minimal	Boolean flag only, no role matrix.

Key Risks and Opportunities

Finding	Severity	Potential Impact	Source / Evidence
API authorization bypass	High	Security & data exposure	`useFetch.ts:966--1022`
Redundant OTP after UAE PASS	High	User friction and confusion	`otp/page.tsx:44`
Missing delegation system	High	BRD compliance risk	No delegation logic in codebase
No email composer	High	Users cannot reply or initiate messages	`InboxContent.tsx` read-only
Notifications unimplemented	Medium	No real-time event visibility	`Notifications.tsx`
Search debounce 1500ms	Medium	Perceived latency	`SearchBar.tsx:35--38`
Address Book lacks search	Medium	Scaling issue for large orgs	`AddressBookList.tsx`
No test coverage	Medium	Unverified stability	No test files found
Secrets in `.env`	Medium	Credentials exposed in repo	`.env.production`
Bundle not analyzed	Low	Risk of poor performance on mobile	Missing analyzer config

Architecture Snapshot

graph TB subgraph Browser UI[Next.js 14 App<br/>React 18 + MUI] end subgraph Authentication UAE[UAE PASS OAuth2] OTP[Email OTP Service] end subgraph APIs AuthAPI[Account API] InboxAPI[Activity API] DocsAPI[Documents API] AddrAPI[Address API] DashAPI[Dashboard API] end subgraph Data DB[(Database)] Blob[(File Storage)] end UI-->UAE UAE-->AuthAPI UI-->OTP UI-->InboxAPI InboxAPI-->DB DocsAPI-->Blob

Authentication and Access

UAE PASS Flow

Implementation follows standard OAuth2, redirecting users to UAE PASS for authentication and returning verified Emirates ID.
Status: Stable and functional.

OTP Verification

Adds unnecessary friction and does not strengthen identity assurance.
If regulatory guidance requires 2FA, it should be app-based (TOTP), not email-based.
Recommendation: Remove step after entity selection; rely on UAE PASS.

Delegation & Decree Modes

No logic for delegation, federal, or local decree access modes.
BRD requires role-based visibility and restrictions.
Recommendation: Introduce accessMode property (own, delegate, federal, local-decree) and enforce on backend endpoints.

Experience-Critical Surfaces

Dashboard

Observation	Recommendation
Sender validation only via UI	Add API-level enforcement.
Metrics update only on reload	Implement background refresh.
Limited caching	Add React Query stale time or local caching.

Inbox

Observation	Recommendation
15-second polling interval	Replace with websocket or SignalR.
1500 ms debounce	Reduce to 400 ms for responsiveness.
Sequential fetch for message detail	Prefetch next email or parallelize calls.

Digital P.O. Box (Address Book)

Observation	Recommendation
No search or pagination	Add filtering and pagination for large directories.
No verified indicator	Display verification badges per address.
No validation logic	Enforce ERN and phone format validation.

Notifications

Observation	Recommendation
Component shell only	Add backend endpoint + polling (10s) → upgrade to websocket.
No unread count or badges	Add global state and icon indicators.

Email Composer

Observation	Recommendation
Not implemented	Build Lexical-based editor, template schema, and send API.
Missing templates	Add reusable templates via JSON schema and preview mode.

Roles and Permissions

Area	Current	Gap	Recommendation
Role Model	`isSender` flag	No hierarchy	Replace with role enum (`Sender`, `Receiver`, `Admin`, `Auditor`).
Enforcement	UI-level only	API unaware	Add `[Authorize(Roles="Sender")]` backend annotations.
Access Scaling	Limited	Cannot add future roles	Implement role matrix on frontend and backend.

Validation and Identifiers

Element	Finding	Recommendation
ERN Format	No validation in place	Define regex and enforce before API calls.
Email/Phone	Duplicated logic	Centralize in `utils/validators.ts`.
Sender IDs	Stored but unused	Add helper for formatting and routing.

AI / Copilot Readiness

Aspect	Current	Recommendation
Event Logging	Basic actions (read, done, pinned) only	Add structured audit logging for user behavior.
Analytics	No summaries or trend detection	Add endpoints for `/insights/summary` and `/copilot/suggest-action`.
PII Handling	Email content not filtered	Redact message bodies and attachments before AI processing.
API Layer	No AI endpoints	Start with metadata-based summarization (e.g., unread counts, urgency).

Example redaction method:

function sanitizeForAI(email) { return { sender: email.senderErn, urgency: email.urgency, category: email.category, hasPayment: !!email.paymentAmount, }; }

Quality, Performance, and Security

Frontend

Area	Finding	Recommendation
Bundle size	Unmeasured	Add analyzer and lazy-load MUI icons.
Dead code	Duplicate files found	Clean unused components.
Session handling	LocalStorage	Use secure cookies or session storage.
Accessibility	Missing ARIA labels	Add ARIA attributes and keyboard navigation.

Backend

Area	Finding	Recommendation
Error handling	No retry on 500+	Implement exponential retry.
Idempotency	Not enforced	Add `Idempotency-Key` headers.
Rate limiting	No feedback	Display messages for 429 responses.
Secrets management	In `.env`	Move to Azure Key Vault.
Testing	None	Add Vitest + Playwright suite.

Immediate Findings and Fixes

Issue	Why It Matters	Fix Summary	Effort
Redundant OTP	Adds friction without benefit	Remove route or replace with TOTP	S
No API role check	Allows unauthorized access	Add role validation backend + frontend	S
No composer	Blocks sender actions	Add Lexical editor + API	L
Slow search debounce	UX lag	Reduce to 400 ms	S
No test coverage	High regression risk	Add Vitest + Playwright	L
Secrets in repo	Security risk	Move to Key Vault	S
No notifications	Missed activity	Poll → websocket	M
Address Book lacks search	Poor scalability	Add search + pagination	S
No delegation system	BRD compliance	Add `accessMode` + API validation	L
Bundle unoptimized	Potential lag	Add analyzer + lazy imports	M

Roadmap and Next Steps

Phase 1 - Immediate

Action	Effort	Impact
Add API-level authorization	S	Strengthens security baseline
Remove redundant OTP	S	Improves authentication UX
Secure environment variables	S	Reduces breach risk
Add address search and debounce fix	M	Improves responsiveness

Phase 2 - Short Term

Action	Effort	Impact
Implement email composer	L	Enables complete communication loop
Add real-time notifications	M	Enhances user awareness
Introduce role system refactor	M	Enables scalable permissions
Start unit & integration testing	L	Stabilizes releases

Phase 3 - Medium Term

Action	Effort	Impact
Add delegation / decree modes	L	Ensures BRD compliance
Integrate MOE API	L	Supports entity resolution
Launch Copilot MVP	L	Introduces AI-driven insights
Optimize bundles and CI	M	Improves performance and deployment flow

Summary

The WAYN for Business platform demonstrates a strong technical foundation built on modern frameworks and deployment practices.
However, several gaps - primarily around authorization, workflow completeness, and testing discipline - must be addressed before scaling.

The next development cycle should emphasize:

Security and compliance hardening.
Completing the two-way communication flow (composer + notifications).
Integrating delegation and AI-ready insights for enterprise intelligence.

Once these priorities are implemented, the backend will be fully aligned with the upcoming frontend experience redesign and ready for institutional rollout.

UI/UX Audit