Skip to main content

Application Routes

Complete reference guide for all routes and navigation paths in the AquaGen Web Application.

Overview​

AquaGen uses React Router v7.6.3 for client-side routing. All routes are defined in apps/production/src/routes/routes.js and organized in a hierarchical structure.

Key Features:

  • Nested routing with parent/child relationships
  • Protected routes requiring authentication
  • Dynamic route parameters
  • 404 Not Found handling
  • Lazy loading for performance

Route Structure​

Route Hierarchy​

Public Routes​

These routes are accessible without authentication.

Root / Index​

Path: / Component: SplashScreen Library: @aquagen-mf-webapp/components

Description: Landing page and initial loading screen. Checks authentication status and redirects to dashboard or login.

Features:

  • Auto-login if valid token exists
  • Displays AquaGen branding
  • Handles initial app bootstrap

Example:

https://app.aquagen.com/

Splash Screen​

Path: /splash Component: SplashScreen Library: @aquagen-mf-webapp/components

Description: Explicit splash screen route (same as root).

Example:

https://app.aquagen.com/splash

Login​

Path: /login Component: LoginScreen Library: @aquagen-mf-webapp/components

Description: User authentication page supporting Microsoft and Google login.

Features:

  • Azure AD authentication (MSAL)
  • Google OAuth authentication
  • Remember me functionality
  • Auto-redirect after successful login

Example:

https://app.aquagen.com/login

Code Reference: apps/production/src/routes/routes.js:187-189

Leadership Dashboard​

Path: /leadership Component: LeadershipDashboardPage Library: @aquagen-mf-webapp/leadership

Description: Executive-level dashboard with high-level KPIs and metrics.

Features:

  • Executive summary view
  • Key performance indicators
  • Strategic insights
  • Full-screen layout (no main sidebar)

Example:

https://app.aquagen.com/leadership

Code Reference: apps/production/src/routes/routes.js:183-185

Markdown Viewer​

Path: /mdDocs Component: MarkdownViewerPage Library: @aquagen-mf-webapp/shared

Description: Renders markdown documentation files.

Example:

https://app.aquagen.com/mdDocs?file=README.md

Code Reference: apps/production/src/routes/routes.js:191-193

Protected Routes (MainLayout)​

All routes under the MainLayout wrapper require authentication and include the main navigation sidebar.

Dashboard​

Path: /dashboard Component: DashboardPage Library: @aquagen-mf-webapp/dashboard

Description: Main overview dashboard showing water consumption, alerts, and key metrics.

Features:

  • Real-time water consumption data
  • Recent alerts summary
  • Quick access to monitoring tools
  • Customizable widgets

Example:

https://app.aquagen.com/dashboard

Code Reference: apps/production/src/routes/routes.js:50-52

Monitoring Routes​

Water monitoring and data visualization routes.

Water Data (Monitoring Index)​

Path: /monitoring Component: WaterDataPage Library: @aquagen-mf-webapp/monitoring

Description: Main monitoring page showing water flow and consumption data.

Features:

  • Multi-node water data visualization
  • Real-time flow rates
  • Historical data analysis
  • Category selection

Example:

https://app.aquagen.com/monitoring

Code Reference: apps/production/src/routes/routes.js:54-59

Source Category Flow​

Path: /monitoring/source_category/SOURCE_CATEGORY Component: FlowCategoryPage Library: @aquagen-mf-webapp/monitoring

Description: Flow data for a specific source category.

Example:

https://app.aquagen.com/monitoring/source_category/SOURCE_CATEGORY

Code Reference: apps/production/src/routes/routes.js:65-75

Flow Unit Details​

Path: /monitoring/source_category/SOURCE_CATEGORY/:detailCategoryId/:unitId Component: FlowUnitPage Library: @aquagen-mf-webapp/monitoring

Description: Detailed flow data for a specific unit.

Parameters:

  • detailCategoryId - Detail category identifier
  • unitId - Unit identifier

Example:

https://app.aquagen.com/monitoring/source_category/SOURCE_CATEGORY/detail123/unit456

Code Reference: apps/production/src/routes/routes.js:71-74

Compare Flow Units​

Path: /monitoring/source_category/compare_units Component: FlowUnitComparePage Library: @aquagen-mf-webapp/monitoring

Description: Compare flow data across multiple units.

Features:

  • Multi-unit selection
  • Side-by-side comparison
  • Historical trends
  • Export comparison data

Example:

https://app.aquagen.com/monitoring/source_category/compare_units?units=unit1,unit2

Code Reference: apps/production/src/routes/routes.js:61-63

Stock Category​

Path: /monitoring/stock_category/:categoryId Component: StockCategoryPage Library: @aquagen-mf-webapp/monitoring

Description: Water stock and inventory data for a category.

Parameters:

  • categoryId - Category identifier

Example:

https://app.aquagen.com/monitoring/stock_category/tank-a

Code Reference: apps/production/src/routes/routes.js:78-80

Water Quality​

Path: /monitoring/quality_category/:categoryId Component: QualityPage Library: @aquagen-mf-webapp/monitoring

Description: Water quality metrics and parameters.

Parameters:

  • categoryId - Category identifier

Features:

  • pH, TDS, turbidity monitoring
  • Quality trend analysis
  • Compliance tracking
  • Alert thresholds

Example:

https://app.aquagen.com/monitoring/quality_category/inlet-water

Code Reference: apps/production/src/routes/routes.js:82-84

Ground Water Level​

Path: /monitoring/ground_water_level/:categoryId Component: GroundWaterLevelPage Library: @aquagen-mf-webapp/monitoring

Description: Ground water level monitoring and visualization.

Parameters:

  • categoryId - Category identifier

Features:

  • Water level graphs
  • Recharge monitoring
  • Historical trends
  • Seasonal analysis

Example:

https://app.aquagen.com/monitoring/ground_water_level/borewell-1

Code Reference: apps/production/src/routes/routes.js:86-88

Energy Category​

Path: /monitoring/energy_category/:categoryId Component: EnergyDashboard Library: @aquagen-mf-webapp/energy

Description: Energy consumption monitoring for a category.

Parameters:

  • categoryId - Category identifier

Nested Routes:

  • /:detailCategoryId/:unitId - Consumption detail for specific unit

Example:

https://app.aquagen.com/monitoring/energy_category/pumps
https://app.aquagen.com/monitoring/energy_category/pumps/pump-detail/unit1

Code Reference: apps/production/src/routes/routes.js:90-99

Account Management Routes​

User account and settings management.

Account Landing​

Path: /manage_account Component: AccountLandingPage Library: @aquagen-mf-webapp/manageAccount

Description: Account management dashboard (index route).

Example:

https://app.aquagen.com/manage_account

Code Reference: apps/production/src/routes/routes.js:103-109

Account Information​

Path: /manage_account/account_info Component: AccountInfoPage Library: @aquagen-mf-webapp/manageAccount

Description: View and edit account information.

Features:

  • User profile details
  • Organization information
  • Contact details
  • Subscription info

Example:

https://app.aquagen.com/manage_account/account_info

Code Reference: apps/production/src/routes/routes.js:111-113

Account Settings​

Path: /manage_account/account_settings Component: AccountSettingPage Library: @aquagen-mf-webapp/manageAccount

Description: Account preferences and settings.

Features:

  • Notification preferences
  • Display settings
  • Units (metric/imperial)
  • Language selection
  • Theme customization

Example:

https://app.aquagen.com/manage_account/account_settings

Code Reference: apps/production/src/routes/routes.js:115-117

Manual Node Entry​

Path: /manage_account/manual_node_entry Component: ManualNodePage Library: @aquagen-mf-webapp/manageAccount

Description: Manual data entry for water nodes.

Features:

  • Add manual readings
  • Historical data entry
  • Bulk import
  • Data validation

Example:

https://app.aquagen.com/manage_account/manual_node_entry

Code Reference: apps/production/src/routes/routes.js:119-121

Water Management Routes​

Energy Dashboard​

Path: /energy Component: EnergyDashboard Library: @aquagen-mf-webapp/energy

Description: Standalone energy consumption dashboard.

Features:

  • Energy usage tracking
  • Cost analysis
  • Efficiency metrics
  • Consumption trends

Example:

https://app.aquagen.com/energy

Code Reference: apps/production/src/routes/routes.js:125-127

Water Balance​

Path: /water_balance/graph Component: WaterBalance Library: @aquagen-mf-webapp/waterBalance

Description: Water balance visualization and analysis.

Features:

  • Input vs output analysis
  • Water loss calculation
  • Balance graphs
  • Historical comparisons

Example:

https://app.aquagen.com/water_balance/graph

Code Reference: apps/production/src/routes/routes.js:129-131

Water Neutrality​

Path: /water_neutrality Component: WaterNeutrality Library: @aquagen-mf-webapp/waterNeutrality

Description: Water neutrality tracking and sustainability metrics.

Features:

  • Sustainability goals
  • Neutrality score
  • Rainwater harvesting impact
  • Recharge tracking

Example:

https://app.aquagen.com/water_neutrality

Code Reference: apps/production/src/routes/routes.js:133-135

Water Ratio​

Path: /water_ratio Component: WaterRatioPage Library: @aquagen-mf-webapp/waterRatio

Description: Water usage ratios and efficiency metrics.

Example:

https://app.aquagen.com/water_ratio

Code Reference: apps/production/src/routes/routes.js:137-139

Water Index Routes​

Rain Water Index (RWI)​

Path: /rwi Component: RwiPage Library: @aquagen-mf-webapp/rwi

Description: Rain Water Index calculation and visualization.

Features:

  • Rainfall data analysis
  • Harvesting potential
  • Seasonal trends
  • Index calculation

Example:

https://app.aquagen.com/rwi

Code Reference: apps/production/src/routes/routes.js:141-143

Urban Water Index (UWI)​

Path: /uwi Component: UwiDashboardPage Library: @aquagen-mf-webapp/uwi

Description: Urban Water Index dashboard.

Features:

  • Urban water usage metrics
  • Sustainability indicators
  • Compliance tracking

Example:

https://app.aquagen.com/uwi

Code Reference: apps/production/src/routes/routes.js:145-147

Water Risk Index (WRI)​

Path: /wri Component: WriPage Library: @aquagen-mf-webapp/wri

Description: Water Risk Index assessment.

Features:

  • Risk level calculation
  • Risk factors analysis
  • Mitigation strategies
  • Historical risk trends

Example:

https://app.aquagen.com/wri

Code Reference: apps/production/src/routes/routes.js:165-167

Ground Water Index (GWI)​

Path: /gwi Component: GwiPage Library: @aquagen-mf-webapp/gwi

Description: Ground Water Index monitoring.

Features:

  • Groundwater health metrics
  • Depletion tracking
  • Recharge monitoring

Example:

https://app.aquagen.com/gwi

Code Reference: apps/production/src/routes/routes.js:169-171

SCADA & HMI Routes​

SCADA Viewer​

Path: /scadaViewer Component: ScadaViewer Library: @aquagen-mf-webapp/scadaViewer

Description: View SCADA diagrams and real-time data.

Features:

  • Interactive SCADA diagrams
  • Real-time data overlay
  • Zoom and pan
  • Full-screen mode

Example:

https://app.aquagen.com/scadaViewer

Code Reference: apps/production/src/routes/routes.js:149-151

SCADA Editor​

Path: /scadaEditor Component: ScadaEditorPage Library: @aquagen-mf-webapp/scadaEditor

Description: Create and edit SCADA diagrams.

Features:

  • Drag-and-drop editor
  • Component library
  • Data binding
  • Diagram templates

Example:

https://app.aquagen.com/scadaEditor

Code Reference: apps/production/src/routes/routes.js:153-155

Web HMI​

Path: /web-hmi Component: HmiPage Library: @aquagen-mf-webapp/hmi

Description: Human-Machine Interface for industrial control.

Features:

  • Real-time control interface
  • Equipment status monitoring
  • Alarm management
  • Control panel

Example:

https://app.aquagen.com/web-hmi

Code Reference: apps/production/src/routes/routes.js:177-179

AI & Analytics Routes​

AquaGPT (AI Chat)​

Path: /aquagpt Component: AquaAi Library: @aquagen-mf-webapp/aquaAi

Description: AI-powered water insights and chat interface.

Features:

  • Natural language queries
  • Data insights
  • Anomaly detection
  • Recommendations

Example:

https://app.aquagen.com/aquagpt

Code Reference: apps/production/src/routes/routes.js:161-163

AquaGen Labs​

Path: /labs Component: AquagenLabsPage Library: @aquagen-mf-webapp/aquagenLabs

Description: Experimental features and prototypes.

Features:

  • Beta features
  • New visualizations
  • Experimental tools
  • Feedback collection

Example:

https://app.aquagen.com/labs

Code Reference: apps/production/src/routes/routes.js:173-175

Alert Routes​

Alerts​

Path: /alerts/:categoryId Component: AlertsPage Library: @aquagen-mf-webapp/alerts

Description: View and manage alerts for a category.

Parameters:

  • categoryId - Category identifier for filtering alerts

Features:

  • Active alerts list
  • Alert history
  • Notification settings
  • Acknowledge alerts

Examples:

https://app.aquagen.com/alerts/all
https://app.aquagen.com/alerts/critical
https://app.aquagen.com/alerts/water-quality

Code Reference: apps/production/src/routes/routes.js:157-159

Error Routes​

404 Not Found​

Path: * (catch-all) Component: NotFound Library: @aquagen-mf-webapp/components

Description: Fallback route for undefined paths.

Features:

  • Custom 404 page
  • Navigation suggestions
  • Search functionality
  • Return to dashboard

Example:

https://app.aquagen.com/non-existent-page

Code Reference: apps/production/src/routes/routes.js:195-197

Route Configuration​

Route Definition File​

Location: apps/production/src/routes/routes.js

Structure:

import { Outlet } from 'react-router-dom';

const appRouter = [
  {
    path: '/path',           // URL path
    element: <Component />,  // React component
    index: true,             // Index route (optional)
    children: [              // Nested routes (optional)
      // ... child routes
    ]
  }
];

export { appRouter };

Using Routes in Components​

import { Link } from 'react-router-dom';

<Link to="/dashboard">Go to Dashboard</Link>
<Link to="/monitoring/quality_category/inlet">View Quality</Link>

Programmatic Navigation​

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const goToDashboard = () => {
    navigate('/dashboard');
  };

  const goToAlerts = (categoryId) => {
    navigate(`/alerts/${categoryId}`);
  };
}

Reading Route Parameters​

import { useParams } from 'react-router-dom';

function FlowUnitPage() {
  const { detailCategoryId, unitId } = useParams();

  // detailCategoryId and unitId are now available
}

Reading Query Parameters​

import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  const [searchParams] = useSearchParams();

  const filter = searchParams.get('filter');
  const sort = searchParams.get('sort');
}

AquaGen includes navigation helper utilities in the shared library.

Location: libs/shared/src/helper/

import { navHelperInstance } from '@aquagen-mf-webapp/shared';

// Navigate to a route
navHelperInstance.navigate('/dashboard');

// Navigate with state
navHelperInstance.navigate('/alerts/critical', {
  state: { from: 'dashboard' }
});

// Go back
navHelperInstance.goBack();

Route Guards & Protection​

Authentication Check​

All routes under MainLayout are protected by authentication:

Location: apps/production/src/app/app.jsx

// Pseudo-code
if (!isAuthenticated) {
  navigate('/login');
}

Permission-Based Access​

Some routes check user permissions:

import { PermissionWrapper } from '@aquagen-mf-webapp/components';

<PermissionWrapper requiredPermission="ADMIN">
  <AdminComponent />
</PermissionWrapper>

Route Metadata​

Page Titles​

Each route can set a custom page title:

useEffect(() => {
  document.title = 'Dashboard - AquaGen';
}, []);

Analytics Tracking​

Routes are tracked for analytics:

import { AnalyticsService } from '@aquagen-mf-webapp/shared';

useEffect(() => {
  AnalyticsService.pageView('/dashboard');
}, []);

Deep Linking​

All routes support deep linking. Users can bookmark or share URLs:

https://app.aquagen.com/monitoring/quality_category/inlet?date=2024-02-25

Preserving State​

Use URL query parameters to preserve state:

navigate('/dashboard?view=graph&period=month');

Route Best Practices​

1. Use Descriptive Paths​

// Good
/monitoring/quality_category/inlet

// Bad
/mon/qc/1

2. Keep URLs RESTful​

// Good
/alerts/:categoryId
/monitoring/quality_category/:categoryId

// Bad
/showAlerts?cat=123

3. Use Query Params for Filters​

// Good
/dashboard?filter=active&sort=date

// Bad
/dashboard/active/date

4. Handle Route Changes​

useEffect(() => {
  // Fetch new data when route changes
}, [categoryId, unitId]);

Troubleshooting Routes​

Issue: 404 on Refresh​

Cause: Server not configured for SPA routing

Solution: Ensure firebase.json has rewrite rules:

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

Issue: Route Not Matching​

Cause: Incorrect path definition

Solution: Check exact path in routes.js:

// Make sure paths match exactly
path: '/monitoring/quality_category/:categoryId'

Issue: Nested Route Not Working​

Cause: Missing <Outlet /> in parent component

Solution: Add Outlet to parent:

import { Outlet } from 'react-router-dom';

function ParentComponent() {
  return (
    <div>
      <h1>Parent</h1>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}

Route Summary Table​

RouteComponentFeatureAuth Required
/SplashScreenLandingNo
/loginLoginScreenAuthenticationNo
/dashboardDashboardPageMain DashboardYes
/monitoringWaterDataPageWater MonitoringYes
/energyEnergyDashboardEnergy TrackingYes
/water_balance/graphWaterBalanceWater BalanceYes
/water_neutralityWaterNeutralitySustainabilityYes
/alerts/:categoryIdAlertsPageAlert ManagementYes
/aquagptAquaAiAI InsightsYes
/manage_accountManageAccountPageAccount SettingsYes
/rwiRwiPageRain Water IndexYes
/uwiUwiDashboardPageUrban Water IndexYes
/wriWriPageWater Risk IndexYes
/gwiGwiPageGround Water IndexYes
/scadaViewerScadaViewerSCADA ViewerYes
/scadaEditorScadaEditorPageSCADA EditorYes
/web-hmiHmiPageHMI InterfaceYes
/leadershipLeadershipDashboardPageExecutive ViewYes
/labsAquagenLabsPageExperimentalYes
*NotFound404 ErrorNo

Next Steps​

Last Updated: February 2026 Maintained By: AquaGen Development Team