Skip to content

Sequence Diagram

This sequence diagram illustrates the interaction between the frontend of a web application and other system components over time. It focuses on how user actions trigger a series of requests and responses between the user interface, backend services, and data sources.

sequenceDiagram
    participant U as User
    participant A as Admin
    participant F as Frontend
    participant B as Backend
    participant DB as Database

    %% Login Flow
    U->>F: Enter username & password
    F->>B: Send authentication request
    B->>DB: Validate credentials
    DB-->>B: Validation result
    B-->>F: Authentication success/failure
    F-->>U: Show dashboard or error

    %% Logout Flow
    U->>F: Logout request
    F->>B: Invalidate session/token
    B-->>F: Logout success
    F-->>U: Redirect to login

    %% Admin - Create User
    A->>F: Create user account
    F->>B: Submit new user details
    B->>DB: Save user record
    DB-->>B: Confirmation
    B-->>F: User created
    F-->>A: Confirmation

    %% Account Balance
    U->>F: Request account balance
    F->>B: Fetch balance
    B->>DB: Retrieve balance
    DB-->>B: Balance data
    B-->>F: Return balance
    F-->>U: Display balance

    %% Account Details
    U->>F: Request account details
    F->>B: Fetch account details
    B->>DB: Query account
    DB-->>B: Account details
    B-->>F: Return details
    F-->>U: Display details

    %% Update Account Details
    U->>F: Update account info
    F->>B: Send updated data
    B->>DB: Update record
    DB-->>B: Update confirmation
    B-->>F: Success response
    F-->>U: Show confirmation

    %% Transaction History
    U->>F: Request last 10 transactions
    F->>B: Fetch transactions
    B->>DB: Query transactions (limit 10)
    DB-->>B: Transaction list
    B-->>F: Return data
    F-->>U: Display transactions

    %% Cash Withdrawal
    U->>F: Withdraw amount
    F->>B: Process withdrawal
    B->>DB: Check balance
    DB-->>B: Balance info
    alt Sufficient balance
        B->>DB: Deduct amount
        DB-->>B: Update success
        B-->>F: Withdrawal success
        F-->>U: Confirm withdrawal
    else Insufficient balance
        B-->>F: Error
        F-->>U: Show error
    end

    %% Cash Deposit
    U->>F: Deposit amount
    F->>B: Process deposit
    B->>DB: Add amount to balance
    DB-->>B: Update success
    B-->>F: Deposit success
    F-->>U: Confirm deposit

    %% Cash Transfer
    U->>F: Transfer amount
    F->>B: Initiate transfer
    B->>DB: Validate sender balance
    DB-->>B: Balance check
    B->>DB: Deduct & credit accounts
    DB-->>B: Transfer success
    B-->>F: Transfer confirmation
    F-->>U: Show result