Microfinance Loan Collection App & Web Portal

Executive Summary

The Microfinance Loan Collection App & Web Portal is a dual-interface fintech solution engineered to digitize grassroots microfinance operations. Field collection agents conduct door-to-door visits to collect loan installments from borrowers, log payments in real time, view upcoming collection lists, and adjust agent settings. On the web portal, branch supervisors monitor regional loan statuses, branch performance, and agent cash handovers.

As the solo frontend developer for the Android mobile application and a contributor to the branch web management pages, I built the mobile user experience in Quasar Framework (Vue 3) + Pinia, optimizing for rapid touch input, clear route schedules, and reliable daily cash settlements.

Architecture

Field Collection & Branch Management Topology

flowchart TB
    subgraph Field_Agent ["Field Operations — Solo Quasar Android App"]
        LOGIN["Agent Auth & Route Sync"]
        COLL_LIST["Daily Collection List<br/>(Due Today, Arrears, Overdue)"]
        PAY_MODAL["Payment Collection Modal<br/>(Installment, Penalties, Payment Mode)"]
        RECEIPT["Digital Receipt Generator<br/>(Transaction Reference & Timestamp)"]
        SUMMARY["End-of-Day Cash Settlement<br/>(Total Vault Handover Summary)"]
        SETTINGS["Agent Settings & Offline Sync"]
        
        LOGIN --> COLL_LIST --> PAY_MODAL --> RECEIPT --> SUMMARY
        SETTINGS --> COLL_LIST
    end

    subgraph State_Layer ["Pinia Client Stores"]
        AUTH_STORE["useAuthStore (Agent Credentials)"]
        LOAN_STORE["useLoanCollectionStore (Borrower Ledgers)"]
        BRANCH_STORE["useBranchStore (Branch Schedules)"]
    end

    subgraph Branch_Web ["Branch Management Portal (Desktop Web)"]
        LOAN_MGMT["Loan Management & Approval Pages"]
        BRANCH_VIEW["Branch Ledger & Agent Reconciliation"]
        REPORTS["Daily Disbursement & Collection Rollup"]
    end

    subgraph Backend_Services ["Core Microfinance API"]
        API_GATEWAY["REST API Gateway (JWT Secured)"]
        LOAN_SVC["Loan Servicing & Installment Engine"]
        LEDGER_DB[("Core Microfinance Database")]
    end

    COLL_LIST & PAY_MODAL & SUMMARY --> LOAN_STORE & AUTH_STORE
    LOAN_MGMT & BRANCH_VIEW --> BRANCH_STORE
    LOAN_STORE & BRANCH_STORE -->|"HTTPS / JSON"| API_GATEWAY
    API_GATEWAY --> LOAN_SVC --> LEDGER_DB

Mobile Collection Workflow

The door-to-door collection lifecycle follows an intuitive, high-speed flow designed for field agents moving rapidly between locations:

sequenceDiagram
    autonumber
    actor Agent as Field Collection Agent
    participant App as Quasar Android App
    participant Store as Pinia Loan Store
    participant API as Microfinance Backend
    actor Borrower as Borrower (Client)

    Agent->>App: Open Daily Route & Collection List
    App->>Store: Load assigned borrower schedules
    Store->>App: Display sorted list (Due, Arrears, Paid)
    
    Agent->>Borrower: Visit door-to-door & receive installment cash
    Agent->>App: Tap "Collect Payment" on Borrower Card
    App->>App: Validate installment amount against loan schedule
    Agent->>App: Confirm payment & submit transaction
    
    App->>Store: Record local collection transaction
    Store->>API: POST /api/v1/collections/collect
    API-->>Store: Transaction Verified (Receipt #RC-90482)
    Store-->>App: Mark borrower as PAID & update daily total
    App-->>Borrower: Instant SMS / digital receipt confirmation
    
    Agent->>App: Open End-of-Day Settlement at Branch
    App->>Agent: Display total cash collected for vault handover

Visual Workflows & Production Interfaces

1. Field Mobile Android App — Route Collection List

2. Web Management Portal — Branch Collections Ledger

3. Web Management Portal — Member Accounts & Loan Approvals

Core Technical Decisions

Decision 1 — Mobile-First Quasar Architecture for Field Hardware

Decision 2 — End-of-Day Branch Vault Settlement Reconciliation

What I Built (Personal Contributions)

• Solo Mobile App Development: Built the complete standalone Quasar Android application for field collection agents from scratch.
• Route & Collection Lists: Engineered the daily collection scheduler, categorizing borrower cards by Due Today, Arrears, and Completed.
• Payment Collection & Receipt Flow: Developed modal payment collection workflows with cash/MFS options and instant receipt generation.
• Agent Day Settlement & Summary: Implemented the end-of-day reconciliation view calculating total collections for branch vault handovers.
• Web Portal Loan UI: Contributed responsive UI layouts for branch loan management, borrower profiles, and ledger inspection pages.
• State Management & Caching: Configured Pinia stores for local collection caching and smooth navigation across field shifts.