Skip to content

UI_FLOW.md

Latest commit

 

History

History
130 lines (107 loc) · 4.59 KB

UI_FLOW.md

File metadata and controls

130 lines (107 loc) · 4.59 KB

GoNow UI Flow Documentation

This document visualizes the user interface flow of the GoNow application, including authentication states, role-based navigation, and key modal interactions.

Application Flow Diagram

graph TD
    Start((App Start)) --> Init[Initialize Firebase]
    Init --> AuthCheck{Check Auth State}

    %% Authentication Flow
    AuthCheck -->|Loading| LoadingScreen[Loading Screen]
    AuthCheck -->|No User| AuthPage[Login Page]
    AuthPage -->|Login Success| CheckRole{Check User Role}
    
    %% Role Based Access
    CheckRole -->|Status: PENDING| PendingView[Pending Approval View]
    PendingView -->Logout[Logout]
    
    CheckRole -->|Role: ACTIVE| MainApp[Main Application Layout]
    
    %% Main Navigation
    subgraph MainLayout [Main Layout]
        direction TB
        Sidebar[Sidebar Menu]
        Header[Top Header]
        
        Sidebar --> NavDashboard
        Sidebar --> NavCalendar
        Sidebar --> NavTeam
        Sidebar --> NavCustomers
        Sidebar --> NavReports
        Sidebar --> NavStatus
        Sidebar --> NavSettings
        Sidebar --> NavAbout
        
        %% Conditional Navigation logic
        note1[Visible to ALL] -.-> NavDashboard
        note1 -.-> NavCalendar
        note1 -.-> NavAbout
        note1 -.-> NavStatus
        
        note2[Visible to: MANAGER, ADMIN] -.-> NavTeam
        note2 -.-> NavReports
        note2 -.-> NavSettings
        
        note3[Visisble to: MANAGER, EMPLOYEE] -.-> NavCustomers
    end

    %% Views
    MainApp --> ViewDashboard[Command Center]
    MainApp --> ViewCalendar[Calendar View]
    MainApp --> ViewTeam[Team Management]
    MainApp --> ViewCustomers[Customer Management]
    MainApp --> ViewReports[Reporting Dashboard]
    MainApp --> ViewStatus[App Status]
    MainApp --> ViewSettings[System Settings]
    MainApp --> ViewAbout[About Page]

    NavDashboard --> ViewDashboard
    NavCalendar --> ViewCalendar
    NavTeam --> ViewTeam
    NavCustomers --> ViewCustomers
    NavReports --> ViewReports
    NavStatus --> ViewStatus
    NavSettings --> ViewSettings
    NavAbout --> ViewAbout

    %% Calendar Interactions
    subgraph CalendarInteractions [Calendar Actions]
        ViewCalendar -->|Click Task| RouteModal[Route Modal]
        ViewCalendar -->|Click Empty/Add| CreateRoute[Create Route Modal]
        RouteModal -->|Save| ViewCalendar
        RouteModal -->|Delete| ConfModal[Confirmation Modal]
        CreateRoute -->|Save| ViewCalendar
    end

    %% Team Interactions
    subgraph TeamInteractions [Team Actions]
        ViewTeam -->|Add User| UserModal[User Modal]
        ViewTeam -->|Edit User| UserModal
        ViewTeam -->|Delete User| ConfModal
        UserModal -->|Save| ViewTeam
    end

    %% Reporting Interactions
    subgraph ReportingInteractions [Reporting Actions]
        ViewReports --> RepVisit[Visit Status Report]
        ViewReports --> RepVolume[Customer Volume Report]
        ViewReports --> RepPerf[Employee Performance]
        ViewReports --> RepHistory[Customer History]
    end

    %% Styles
    classDef page fill:#f9f9f9,stroke:#333,stroke-width:2px;
    classDef modal fill:#e1f5fe,stroke:#0277bd,stroke-width:2px,stroke-dasharray: 5 5;
    classDef decision fill:#fff9c4,stroke:#fbc02d,stroke-width:2px;
    classDef process fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;

    class AuthPage,MainApp,PendingView page;
    class RouteModal,UserModal,ConfModal,CreateRoute modal;
    class AuthCheck,CheckRole decision;
    class Init,LoadingScreen process;
Loading

Navigation Rules

Public/Unauthenticated

  • Login Page: Accessible when no valid session exists.
  • Loading Screen: Visible while Firebase determines auth state.

Role-Based Access

Feature Administrator Manager Employee Pending
Command Center ✅ ✅ ✅ ❌
Calendar View ✅ ✅ ✅ ❌
Team Management ✅ ✅ ❌ ❌
Customer Management ✅ ✅ ✅ ❌
Reports ✅ ✅ ❌ ❌
System Settings ✅ ✅ ❌ ❌
App Status ✅ ✅ ✅ (Limited) ❌
About Page ✅ ✅ ✅ ❌
Route Editing ✅ (All) ✅ (All) ✅ (Own Only) ❌

Modal Workflows

  • Route Modal: Handles creation and editing of delivery routes. Includes logic for managing stops (customers), assigning drivers, and handling signatures/photos.
  • User Modal: Admin/Manager interface for creating and editing team members.
  • Confirmation Modal: Global safety check for destructive actions (Delete Route, Delete User, Delete Customer).