Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Final Work Product Submission for Google Summer of Code'19 at The Mifos Initiative

Google Summer of Code 2019 Final Report

Mifos X Web App | Jivjyot Singh

Overview of Project:

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.

Project Implementations

Commits | Live Demo | GitHub Project Tracker

Live Demo uses the staging server the login credentials are as follows
Username: mifos password: password

1. Mockups

Started my GSoC project by updating the mockups based on the discussion during the kickoff meeting.

Clients View
Client View Page
Create A New Loan Account (1) Create A New Loan Account (2) View Loan Account
New Loans Page New Loans Page 2 Loans View Page

2. Refactor Clients Module

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] https://github.com/openMF/web-app/issues/409
[2] https://github.com/openMF/web-app/issues/75
[3] https://github.com/openMF/web-app/issues/213

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/411

3. Clients: View Client page

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] https://github.com/openMF/web-app/issues/216
[2] https://github.com/openMF/web-app/issues/107
[3] https://github.com/openMF/web-app/issues/416

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/414
[2] https://github.com/openMF/web-app/pull/417

Community App Client View Page Web App Client View Page
Screen Shot 2019-08-25 at 6 32 28 PM screencapture-localhost-4200-clients-6-general-2019-06-11-01_27_24

4. Updated travis for gsoc-19 branch

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] https://github.com/openMF/web-app/issues/413

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/415

5. Family Members list

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] https://github.com/openMF/web-app/issues/262
[2] https://github.com/openMF/web-app/issues/80

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/418

Community App Family Members list Web App Family Members List
family members page screencapture-localhost-4200-clients-1-family-members-2019-06-19-04_13_10

6. Add family member page

Implemented add family member page exactly the way it is implemented in community app.

Related Issues:
[1] https://github.com/openMF/web-app/issues/263

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/419

Community App Add Family Member Page Web App Add Family Member Page
Screen Shot 2019-08-25 at 11 18 38 PM screencapture-localhost-4200-clients-1-family-members-add-2019-06-19-05_16_07

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

7. Address Tab

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] https://github.com/openMF/web-app/issues/258
[2] https://github.com/openMF/web-app/issues/259

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/443
[2] https://github.com/openMF/web-app/pull/444

Web App Address Tab
screencapture-localhost-4200-clients-1-address-2019-07-15-23_26_35
Web App Add New Address Web App Edit Existing Address
Screen Shot 2019-07-19 at 12 26 00 AM Screen Shot 2019-07-19 at 12 25 43 AM

8. Identities Tab

This tab enables the user to view client's existing identities,add new identities or delete existing identities.

Related Issues:
[1] https://github.com/openMF/web-app/issues/261
[2] https://github.com/openMF/web-app/issues/260

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/420
[2] https://github.com/openMF/web-app/pull/441

Web App Identites Tab
identitiesScreenshot
Web App Add New Identity Web App Upload New Identity Document Web App Delete Existing Identity
Screen Shot 2019-08-25 at 11 08 39 PM Screen Shot 2019-08-25 at 11 04 04 PM Screen Shot 2019-08-25 at 11 04 40 PM

9. Documents Tab

This tab enables the user to view client's existing documents,add new documents or delete existing documents.

Related Issues:
[1] https://github.com/openMF/web-app/issues/264

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/426

Web App Documents Tab
screencapture-localhost-4200-clients-1-documents-2019-06-26-05_50_28
Web App Add New Documents Web App Delete Existing Documents
Screen Shot 2019-08-25 at 11 30 57 PM Screen Shot 2019-08-25 at 11 31 06 PM

10. Notes Tab

This tab enables the user to view, create, edit or delete notes.

Related Issues:
[1] https://github.com/openMF/web-app/issues/111

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/421

Web App Notes Tab
screencapture-localhost-4200-clients-1-notes-2019-06-25-02_01_24
Web App Edit Notes Web App Delete Notes
Screen Shot 2019-08-25 at 11 41 18 PM Screen Shot 2019-08-25 at 11 41 39 PM

11. Data Table Tabs

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] https://github.com/openMF/web-app/issues/431
[2] https://github.com/openMF/web-app/issues/449
[3] https://github.com/openMF/web-app/issues/460

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/432
[2] https://github.com/openMF/web-app/pull/450
[3] https://github.com/openMF/web-app/pull/461

Community App Single Row Datatable Web App Single Row Datatable
Screen Shot 2019-07-08 at 12 27 12 AM Screen Shot 2019-07-08 at 12 54 18 AM
Community App Multi Row Datatable Web App Multi Row Datatable
Screen Shot 2019-07-08 at 12 27 33 AM Screen Shot 2019-07-08 at 12 54 31 AM
Web App Add Data in Single Row Data Tables Web App Add Data Multi Row in Data Tables
Screen Shot 2019-07-31 at 3 18 33 AM Screen Shot 2019-07-25 at 11 41 07 PM
Web App Edit Data in Single Row Data Tables Web App Delete Data in Data Tables
Screen Shot 2019-07-31 at 3 20 15 AM Screen Shot 2019-08-26 at 12 27 55 AM

12. Client List Page

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] https://github.com/openMF/web-app/issues/214
[2] https://github.com/openMF/web-app/issues/240

Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/446

Web App Client List Page
screencapture-localhost-4200-clients-2019-07-20-11_46_05

Note:The following things are pending:

  • Search box implementation
  • Import Clients

Weekly Updates

https://mifosforge.jira.com/wiki/spaces/RES/pages/823590915/2019+Google+Summer+of+Code

My GSoC Experience with Mifos Initiative

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.

Thank you Mifos Initiative and Google Open Source Team for this great opportunity!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.