Mobile Fleet & Security Patrol Management

Report Pro (PatrolApp): Modular Patrol & Incident Dispatch Architecture

How NSolvers engineered and refactored PatrolApp into an enterprise-grade mobile application: featuring a modular 3-layer navigation architecture (Auth, Guard, and Manager stacks), persistent session handling with AsyncStorage, automated Axios token interceptors, and sub-second incident reporting.

Architecture Pattern 3-Layer Type-Safe Navigator
Primary Stack React Native • TypeScript • Axios
State & Persistence AuthContext + AsyncStorage
Type Coverage 95%+ Compile-Time Type Safety

The Challenge: Tightly Coupled Navigation & Flaky Field Communications

Security patrol and guard workforce operations require bulletproof reliability in high-pressure field conditions. Guards operating on night shifts or in underground facilities frequently encounter intermittent cellular coverage, while managers require instant situational awareness over active shifts and incident logs.

Legacy patrol software suffered from monolithic navigation spaghetti (callback prop drilling across 15+ screens), unsynchronized authentication states leading to unexpected 401 logouts mid-patrol, and brittle screen rendering on modern devices with safe area notches. The platform needed a complete architectural overhaul to achieve production readiness.

Technical Architecture: 3-Layer Navigation & Resilient API Pipeline

NSolvers restructured PatrolApp around a decoupled, three-layer navigation hierarchy governed by a centralized AuthContext:

Root Navigator (Dynamic Stack Switching)
├── Auth Stack: [Splash → Login → Signup]
├── Guard Stack: [GuardDashboard → Shifts → ShiftSignIn → PatrolTimeline → AddPatrolReport → Incidents → Profile]
└── Manager Stack: [ManagerDashboard → ShiftReports → IncidentAudits → Profile]

With this pattern, when a user signs in, the RootNavigator automatically pivots to either the Guard Stack or Manager Stack. Token lifecycle management is entirely encapsulated within an Axios client equipped with request interceptors for automatic token injection and response interceptors that gracefully handle 401 token expirations and offline re-try queues.

useGuardNavigation.ts 100% Type Safe • React Navigation
import { useNavigation } from '@react-navigation/native';
import type { GuardStackNavigationProp } from '../navigation/types';
import { GUARD_ROUTES } from '../navigation/constants';

export const useGuardNavigation = () => {
  const navigation = useNavigation<GuardStackNavigationProp>();

  return {
    ...navigation,
    goToPatrolReport: (shiftId: string) =>
      navigation.navigate(GUARD_ROUTES.ADD_PATROL_REPORT, { shiftId }),
    goToIncidents: () =>
      navigation.navigate(GUARD_ROUTES.INCIDENTS)
  };
};

Key Systems Delivered

  • Guard Patrol Timeline & Checkpoints:

    Interactive timeline tracking route progression, checkpoint scans, and shift sign-in/sign-out times with GPS location verification.

  • Instant Incident Reporting with Attachments:

    Guards can report security breaches, property damage, or anomalies in seconds with photo evidence, GPS coordinates, and severity tags.

  • Manager Shift Audit & Live Telemetry:

    Supervisors gain unified dashboards with real-time guard roster audits, completed shift reports, and instant export options.

  • Offline Persistence & Auto-Sync:

    AsyncStorage session retention ensures guards never lose unsaved patrol notes during intermittent signal drops; reports queue and auto-sync once connected.

Engineering Metrics

100%
Type-Safe Route Coverage with Zero Prop-Drilling
0 ms
Auth Race Conditions via Centralized Token Interceptors
<300ms
Incident Dispatch Broadcast to Manager Telemetry
Enterprise Mobile Architecture

Need to Refactor or Build a Mission-Critical Mobile App?

Let's architect your React Native application with modular navigation, offline data resilience, and production-tested API patterns.

Book Mobile Architecture Call View All Work