Mifos Community App is the default web application built on top of the Apache Fineract platform. It is maintained by the Mifos Initiative as a reference solution for the financial inclusion community. It is a Single-Page App (SPA) written in web standard technologies like JavaScript, CSS and HTML5. It's also the starting point for any partners looking to customize or extend the UI. Due to limitations of Angular 1.x it is being rewritten as Mifos’s web-app which uses Angular 6 making it more future proof and opens up many opportunities to improve the user interface.
During this GSoC period, I continued the rewrite of Web App to Angular 7 and made many UI enhancements under the mentorship of Gaurav Saini, Kelvin Ikome and Pranjal Goswami.
Live Demo uses the staging server the login credentials are as follows
Username: mifos password: password
Started my GSoC project by updating the mockups based on the discussion during the kickoff meeting.
| Clients View |
|---|
 |
| Create A New Loan Account (1) | Create A New Loan Account (2) | View Loan Account |
|---|---|---|
 |
 |
 |
Had to refactor existing clients module so that it follows the coding standards followed throughout the app. The following changes were made to the client module.
- Removed all partially implemented components which did not follow the required coding standards
- Used HttpClient to make API requests
- Updated clients-routing.module.ts to follow proper structure so that dynamic breadcrumbs work
- Added resolvers load client data
Related Issues:
[1] openMF/web-app#409
[2] openMF/web-app#75
[3] openMF/web-app#213
Related Pull Requests:
[1] openMF/web-app#411
Started off by understanding the existing implementation client view page in community app and made the following enhancements to the user interface:-
- All the actions that the user can take like editing, creating a new loan account, creating a new saving account, applying charges etc were present in general tab. Once user navigates to family tab these options were not visible which made the UI inconsistent so I moved those actions to the client header.
- When ever user navigates from one tab to other the url is updated to reflect the navigation path the user followed to open current page.
- added status lookup pipe to store styles based on status of the account
- added accounts filter pipe to filter accounts on general tab of client view page.
- added status related colors in _color.scss which is global stylesheet to store all color related scss variables.
Related Issues:
[1] openMF/web-app#216
[2] openMF/web-app#107
[3] openMF/web-app#416
Related Pull Requests:
[1] openMF/web-app#414
[2] openMF/web-app#417
| Community App Client View Page | Web App Client View Page |
|---|---|
 |
 |
Updated travis.yml so that it uses latest version of node.js because the travis build was failing if build ran longer than 10 minutes. Also changed gitpages deployment branch to gsoc-19.
Related Issues:
[1] openMF/web-app#413
Related Pull Requests:
[1] openMF/web-app#415
Implemented family members list in web-app. As per Santosh Math's request in issue #80 a user can add multiple family members here too which would make it difficult for him to track so I added accordians for each family member.
Related Issues:
[1] openMF/web-app#262
[2] openMF/web-app#80
Related Pull Requests:
[1] openMF/web-app#418
| Community App Family Members list | Web App Family Members List |
|---|---|
 |
 |
Implemented add family member page exactly the way it is implemented in community app.
Related Issues:
[1] openMF/web-app#263
Related Pull Requests:
[1] openMF/web-app#419
| Community App Add Family Member Page | Web App Add Family Member Page |
|---|---|
 |
 |
Note: Later on it was decided to use modals for adding items in components because Abhay found many such components in Products Module which would have led to many small components being created unnecessarily just to add data to list or table, So in order to maintain UI consistency this screen needs to be refactored to use form-dialog component
In order to maintain UI consistency I used accordians to show multiple address and all actions buttons are placed at similar location to family member tab.
Related Issues:
[1] openMF/web-app#258
[2] openMF/web-app#259
Related Pull Requests:
[1] openMF/web-app#443
[2] openMF/web-app#444
| Web App Address Tab |
|---|
 |
| Web App Add New Address | Web App Edit Existing Address |
|---|---|
 |
 |
This tab enables the user to view client's existing identities,add new identities or delete existing identities.
Related Issues:
[1] openMF/web-app#261
[2] openMF/web-app#260
Related Pull Requests:
[1] openMF/web-app#420
[2] openMF/web-app#441
| Web App Identites Tab |
|---|
 |
| Web App Add New Identity | Web App Upload New Identity Document | Web App Delete Existing Identity |
|---|---|---|
 |
 |
 |
This tab enables the user to view client's existing documents,add new documents or delete existing documents.
Related Issues:
[1] openMF/web-app#264
Related Pull Requests:
[1] openMF/web-app#426
| Web App Documents Tab |
|---|
 |
| Web App Add New Documents | Web App Delete Existing Documents |
|---|---|
 |
 |
This tab enables the user to view, create, edit or delete notes.
Related Issues:
[1] openMF/web-app#111
Related Pull Requests:
[1] openMF/web-app#421
| Web App Notes Tab |
|---|
 |
| Web App Edit Notes | Web App Delete Notes |
|---|---|
 |
 |
These tab enables financial organisations to store additional information about there clients. There are two types of data tables:-
- Single Row Data Tables
- Multi Row Data Tables
These were the most challenging tabs to implement due to there dynamic nature.
Related Issues:
[1] openMF/web-app#431
[2] openMF/web-app#449
[3] openMF/web-app#460
Related Pull Requests:
[1] openMF/web-app#432
[2] openMF/web-app#450
[3] openMF/web-app#461
| Community App Single Row Datatable | Web App Single Row Datatable |
|---|---|
 |
 |
| Community App Multi Row Datatable | Web App Multi Row Datatable |
|---|---|
 |
 |
| Web App Add Data in Single Row Data Tables | Web App Add Data Multi Row in Data Tables |
|---|---|
 |
 |
| Web App Edit Data in Single Row Data Tables | Web App Delete Data in Data Tables |
|---|---|
 |
 |
This page allows the loan officers to view list of clients assigned to them. The following UI enhancements were made:
- Used statuslookup.pipe to set styles to represent status of the client
- Added server side pagination
- Toggle show closed clients in table
Related Issues:
[1] openMF/web-app#214
[2] openMF/web-app#240
Related Pull Requests:
[1] openMF/web-app#446
| Web App Client List Page |
|---|
 |
Note:The following things are pending:
- Search box implementation
- Import Clients
https://mifosforge.jira.com/wiki/spaces/RES/pages/823590915/2019+Google+Summer+of+Code
I would like to thank Ed Cable,Gaurav Saini ,Kelvin Ikome and Pranjal Goswami for their guidance and constant support throughout the program. It has been a great experience working with the Mifos community. Each day there was a new challenge and as I overcame those challenges, I learned something new. I am looking forward to keep contributing and helping the community to grow.