Implement Dashboard UI and Functionality

[NkwaTambe]

Description

User Stories: Dashboard

As a user,
I want to see my account balance on the dashboard,
So that I can know my current financial status.

As a user with a pending KYC status,
I want to see a prominent message and a "Complete KYC" button on my dashboard,
So that I know what to do next to activate my account.

As a user with an active KYC status,
I want to see a "KYC Verified" indicator on my dashboard,
So that I have confidence that my account is fully functional.

As a user,
I want to see my recent transaction history on the dashboard,
So that I can track my spending.

Description

This ticket involves implementing the main dashboard UI for the self-service application. The dashboard will display the user's account balance, KYC status, and recent transaction history. It will also conditionally enable or disable features based on the user's KYC status.

Tasks

• Create the main dashboard UI.
• Fetch and display the user's account balance.
• Fetch and display the user's KYC status.
• Conditionally show/hide the "Complete KYC" button based on KYC status.
• Conditionally enable/disable the "Deposit" and "Withdraw" buttons based on KYC status.
• Fetch and display a list of recent transactions.

---

Sequence Diagrams

Loading the Dashboard (Pending KYC)

sequenceDiagram
    participant U as User
    participant A as self-service-app
    participant F as Fineract API

    U->>A: Navigates to dashboard
    A->>F: GET /v1/self/clients/{clientId}/accounts
    F-->>A: Returns account details (balance)
    A->>F: GET /v1/interoperation/accounts/{accountId}/kyc
    F-->>A: Returns KYC status (pending)
    A->>F: GET /v1/self/clients/{clientId}/transactions
    F-->>A: Returns transaction history
    A->>U: Renders dashboard with "KYC Verification Required" message and disabled features

Loading

Loading the Dashboard (Active KYC)

sequenceDiagram
    participant U as User
    participant A as self-service-app
    participant F as Fineract API

    U->>A: Navigates to dashboard
    A->>F: GET /v1/self/clients/{clientId}/accounts
    F-->>A: Returns account details (balance)
    A->>F: GET /v1/interoperation/accounts/{accountId}/kyc
    F-->>A: Returns KYC status (active)
    A->>F: GET /v1/self/clients/{clientId}/transactions
    F-->>A: Returns transaction history
    A->>U: Renders dashboard with "KYC Verified" indicator and enabled features

Loading