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