GSoC'18 Work Product Submission Mifos X Web App | Abhay Chawla
I would like to thank Ed Cable, Gaurav Saini, Pranjal Goswami and Maulik Soneji for their guidance and support throughout the program. A special thanks to Santosh Math, Sampath Kumar G, Shruthi M R and the community members for their timely assistance.
Mifos X Web App is the revamped version of the Mifos X Community App, an effective financial inclusion solution and the default web application built on top of the Mifos X platform for the Mifos User Community. The newly integrated self-service user administrative portal strives to deliver better support to the self-service users of the online banking and mobile banking app from the financial institutions by providing them with a mechanism to properly manage and give necessary assistance to users for carrying out their operations.
Initially, I had proposed the self-service user administrative portal to be an independent project in itself based on AngularJS. But during the community bonding period, the scope of my project was modified to the revamping of the current community app into the new web app with an integrated self-service administrative portal based on Angular 6.
- Choice of Framework
- Project Guidelines
- Travis CI Setup
- Application Shell
- Core Module and HTTP Interceptors
- Shared Module
- App Configuration
- Self Service User Administrative Portal
- Login
- Accounting
- Home
After a thorough discussion regarding the choice of design framework for the new web app with Ed, Gaurav and the community members we came to a conclusion to leverage the following:
[1] Mailing List Discussion Link
[2] Commit to Setup Angular Material and Flex Layout
[3] Commit to Setup Angular Font Awesome
[4] Commit to Setup Material Module (Refractor)
Related Issues:
[1] openMF/web-app#44
[2] openMF/web-app#279
[3] openMF/web-app#280
[4] openMF/web-app#54
Related Pull Requests:
[1] openMF/web-app#53
[2] openMF/web-app#278
[3] openMF/web-app#55
As the project was built from scratch, I created the guidelines for us as well as the future potential contributors of the project:
README.md
CONTRIBUTING.md
COMMIT_MESSAGE.md
CODE_OF_CONDUCT.md
ISSUE_TEMPLATE
PULL_REQUEST_TEMPLATE
Files were updated regularly from time to time throughout the coding period.
Related Issues:
[1] openMF/web-app#15
[2] openMF/web-app#16
[3] openMF/web-app#17
[4] openMF/web-app#18
[5] openMF/web-app#21
[6] openMF/web-app#25
[7] openMF/web-app#26
[8] openMF/web-app#301
Related Pull Requests:
[1] openMF/web-app#19
[2] openMF/web-app#20
[3] openMF/web-app#22
[4] openMF/web-app#23
[5] openMF/web-app#24
[6] openMF/web-app#27
[7] openMF/web-app#28
[8] openMF/web-app#150
[9] openMF/web-app#237
[10] openMF/web-app#302
I setup travis continuous integration for auto deployement of merged pull requests to gh-pages and to prevent hashing of files for theme configuration within the app:
.travis.yml
Related Issues:
[1] openMF/web-app#4
[2] openMF/web-app#70
Related Pull Requests:
[1] openMF/web-app#37
[2] openMF/web-app#45
[3] openMF/web-app#50
[4] openMF/web-app#71
Other Related Commits:
[5] https://github.com/openMF/web-app/commit/6947f950f7e15272ad000cd67eee0bf4eccc8b81
[6] https://github.com/openMF/web-app/commit/b1c2d6d98e3d95833267084c0fde159c1b696179
Further Enhancements possible for future:
- HTML and SCSS linting to be integrated with travis.
- Testing to be integrated with travis.
Features Completed:
- Sidenav Design and Functionality - It consists of organisation logo, organisation name, placeholder for user profile placeholder icon, username, easy access help icons (settings and sign out), frequently accessed icons and easy access main icons for accounting. It has three states: opened, closed and collapsed.
- Toolbar Design and Functionality - It consists of navigation menu to move around the appliation, search bar, language selector, theme picker, notifications placeholder and a helpful user menu with settings and sign out option.
 |
|---|
- Breadcrumbs Design and Generation - They are automatically generated with minor route configuration as described here.
- Content Component - To display the content of the visited route.
- Footer Design - Displays the current version of the application.
Related Issues:
[1] openMF/web-app#52
[2] openMF/web-app#286
[3] openMF/web-app#62
[4] openMF/web-app#106
Related Pull Requests:
[1] openMF/web-app#53
[2] openMF/web-app#287
[3] openMF/web-app#63
[4] openMF/web-app#129
Work Left:
- Configuration of organisation logo, organisation name and language when app configuration functionality is setup.
Further Enhancements possible for future:
- Show user profile photo in place of placeholder. (subject to discussion and API availability)
- Generation of frequently accessed routes/icons dynamically.
- Addition of more easy access main icons with further development.
- Search bar functionality.
- Notification functionality.
Features Completed:
- Consists of application shell and functionality to reuse and route with shell.
- Progress Bar - To show loading indication when a HTTP request is sent to the server.
- Alerts - To show alert messages to the user. (using angular material snackbar)
- Logger - Logs messages to console.
- HTTP Interceptors -
- Sets the authorization request headers.
- Sets the API prefix using environment configuration. (disable prefix functionality also available)
- An error alert is sent incase of an error.
- Sets the state of progress bar to give loading indication.
Related Issues:
[1] openMF/web-app#47
[2] openMF/web-app#65
[3] openMF/web-app#141
[4] openMF/web-app#64
[5] openMF/web-app#123
Related Pull Requests:
[1] openMF/web-app#48
[2] openMF/web-app#66
[3] openMF/web-app#142
[4] openMF/web-app#124
Other Related Commits:
[5] https://github.com/openMF/web-app/commit/d9c35b875980c72437cb3fa81c3c90e9bfb7aff7
Features Completed:
Mentioned above with choice of framework:
- Icons Module - Single module for adding font awesome angular icons to library for convenient access in all components of application.
- Material Module - Single module for adding Angular CDK, Angular Material and Flex Layout modules for use in all feature modules.
Others:
- Shared Module - All modules and components shared throughout the application including icons and material module are exported here.
- Delete Dialog - A dialog box for delete confirmation with a delete context.
- File Upload Component - Custom input based on angular material to upload files.
- Language Selector - Select language to be used within the application.
- Theme Picker - Select theme to be used within the application.
- Footer - Common footer for login and application shell.
Some features were added from time to time with feature modules in different commits.
Related Issues:
[1] openMF/web-app#281
Related Pull Requests:
[1] openMF/web-app#278
Features Completed:
 |
|---|
- Theme - Six custom material based themes for the application were integrated. Two are based on the logo of Mifos and other four are default themes provided by angular material.
- User Interface for global app configuration.
Related Issues:
[1] openMF/web-app#68
[2] openMF/web-app#73
[3] openMF/web-app#125
[4] openMF/web-app#127
[5] openMF/web-app#35
[6] openMF/web-app#292
Related Pull Requests:
[1] openMF/web-app#69
[2] openMF/web-app#74
[3] openMF/web-app#126
[4] openMF/web-app#128
[5] openMF/web-app#90
[6] openMF/web-app#293
Work Left:
- Configuration of language and date format. (Discussed with Gaurav and Ed about using ngx-translate or Angular's Official Internationalization and put on hold for now as our usecase is not supported by the official package but might be supported in future)
Please refer here. - Other configuration functionalities including organisation name, description, summary, images, font and contact information when the required APIs are available.
Further Enhancements possible for future:
- User specific browser settings for language and date format.
- Component based theme configuration.
Features Completed:
- User Interface for Self Service User Management and Creation
| User Management (Feature for bulk activation/deactivation, creation, filtering, sorting, viewing) |
|---|
 |
| Create User (Existing) | Create User (New) |
|---|---|
 |
 |
| View User (Feature to Activate/Deactivate, Change Password, Edit) | Edit User |
|---|---|
 |
 |
Related Issues:
[1] openMF/web-app#33
[2] openMF/web-app#34
Related Pull Requests:
[1] openMF/web-app#49
[2] openMF/web-app#89
- User Interface for Self Service App Configuration
| App Configuration (Main) | App Configuration (Images) |
|---|---|
 |
 |
| App Configuration (Theme and Font) | App Configuration (Contact Information) |
|---|---|
 |
 |
[1] Mailing List Discussion Link
Related Issues:
[1] openMF/web-app#36
Related Pull Requests:
[1] openMF/web-app#90
Other Related Issues (Refractor):
[1] openMF/web-app#290
Related Pull Requests (Refractor):
[1] openMF/web-app#291
Work Left:
- Self Service User Management and Creation Functionality when the required APIs are available.
- Self Service App Configuration Functionality when the required APIs are available.
- Task Mangement user interface and functionality. (subject to discussion and API availability)
- Chat Support using Rocket.Chat - Mailing List Discussion Link
API requirements are summarised at the JIRA ticket here.
Features Completed:
- User Interface for Login Page, Login Form, Reset Password Form and Two Factor Authentication Form.
- Authentication APIs and environment configuration for basic auth, oauth2, two factor authentication and reset password.
- Remember me feature to persist user credentials through sessions.
| Login | Reset Password |
|---|---|
 |
 |
| Basic/OAuth2 Authentication (GIF) | Two Factor Authentication (GIF) |
|---|---|
 |
 |
Related Issues:
[1] openMF/web-app#95
[2] openMF/web-app#97
[3] openMF/web-app#117
[4] openMF/web-app#118
[5] openMF/web-app#119
[6] openMF/web-app#120
[7] openMF/web-app#284
Related Pull Requests:
[1] openMF/web-app#96
[2] openMF/web-app#98
[3] openMF/web-app#122
[4] openMF/web-app#283
Known Issues:
OAuth2 with Two Factor Authentication cannot be implemented.
[1] Issue
[2] Mailing List Discussion Link
Further Enhancements possible for future:
- Forgot Password Feature - Mailing List Discussion Link
Related Issues:
[1] openMF/web-app#130
Related Pull Requests:
[1] openMF/web-app#140
Features Completed:
- Frequent Postings - User Interface and API Integration
| Frequent Postings |
|---|
 |
Related Issues:
[1] openMF/web-app#136
Related Pull Requests:
[1] openMF/web-app#140
- Create Journal Entries - User Interface and API Integration
| Create Journal Entries |
|---|
 |
Related Issues:
[1] openMF/web-app#200
Related Pull Requests:
[1] openMF/web-app#144
- Search Journal Entries - User Interface and API Integration
| Search Journal Entries |
|---|
 |
Related Issues:
[1] openMF/web-app#201
[2] openMF/web-app#234
Related Pull Requests:
[1] openMF/web-app#235
- View Transaction and Revert Transaction - User Interface and API Integration
| View Transaction | Revert Transaction | View Journal Entry |
|---|---|---|
 |
 |
 |
Related Issues:
[1] openMF/web-app#139
Related Pull Requests:
[1] openMF/web-app#140
- Financial Activity Mappings - User Interface and API Integration
| Financial Activity Mappings (Feature for creation, filtering, sorting, viewing) |
|---|
 |
| Create | View (Feature to edit, delete) | Edit | Delete |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#202
Related Pull Requests:
[1] openMF/web-app#241
- Migrate Opening Balances - User Interface and API Integration
| Migrate Opening Balances |
|---|
 |
Related Issues:
[1] openMF/web-app#276
Related Pull Requests:
[1] openMF/web-app#277
- Chart of Accounts - User Interface and API Integration
| Chart of Accounts (List View) | Chart of Accounts (Tree View) |
|---|---|
 |
 |
Related Issues:
[1] openMF/web-app#203
[2] openMF/web-app#204
Related Pull Requests:
[1] openMF/web-app#266
- GL Accounts - User Interface and API Integration
| Create | View (Feature to create sub-ledger account, edit, enable/disable, delete) | Edit | Delete |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#205
Related Pull Requests:
[1] openMF/web-app#270
- Closing Entries - User Interface and API Integration
| Closing Entries (Feature for creation, filtering, sorting, viewing) |
|---|
 |
| Create | View (Feature to edit, delete) | Edit | Delete |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#208
Related Pull Requests:
[1] openMF/web-app#271
- Accounting Rules - User Interface and API Integration
| Accounting Rules (Feature for creation, filtering, sorting, viewing) |
|---|
 |
| Create | View (Feature to edit, delete) | Edit | Delete |
|---|---|---|---|
 |
 |
 |
 |
Related Issues:
[1] openMF/web-app#206
Related Pull Requests:
[1] openMF/web-app#272
- Periodic Accrual - User Interface and API Integration
| Periodic Accrual |
|---|
 |
Related Issues:
[1] openMF/web-app#273
Related Pull Requests:
[1] openMF/web-app#274
- Provisioning Entries - User Interface and API Integration
| Provisioning Entries (Feature for creation, filtering, sorting, viewing, recreating, viewing journal entries) |
|---|
 |
| Create | View (Feature to filter, sort, create journal entries) | View Provisioning Journal Entries (Feature to filter, sort) |
|---|---|---|
 |
 |
 |
Related Issues:
[1] openMF/web-app#207
Related Pull Requests:
[1] openMF/web-app#275
Other Related Issues (Refractor):
[1] openMF/web-app#298
Related Pull Requests (Refractor):
[1] openMF/web-app#300
Work Left:
- Update Language and Date Format (using Moment.js for material-date-picker) once settings for language and date format are setup.
Known Issues:
Journal entries are not filterable by type of entry: system.
[1] Issue
[2] Mailing List Discussion Link
[3] JIRA Ticket
Further Enhancements possible for future:
- Implementation of infinite scrolling to reduce form loading time and better responsiveness in migrate opening balances component.
- Home basic design.
Related Issues:
[1] openMF/web-app#296
Related Pull Requests:
[1] openMF/web-app#297
Further Enhancements possible for future:
- Better design with futher development.
- Added documentation comments throughout the project.
- Created the project's wiki.
Other contributions:
[1] Integration of animation loader - Designed by Anwesh: Issue and PR
Community App:
[2] openMF/community-app#2956
[3] openMF/community-app#2919
Further Enhancements possible for future:
- Development of the rest of the application.
- Active router link highlighting.
- Implementation of Lazy Loading.
- Implementation of User Permissions.
- Write unit and integration tests.
https://mifosforge.jira.com/wiki/spaces/RES/pages/225247233/2018+Google+Summer+of+Code
[1] https://medium.com/@abhaychawla/my-journey-to-google-summer-of-code18-4d958f61c6e9
It was initially challenging for me to cope up as the scope of my project got changed during the start of the coding period, at a time when my exams were going on as well. Although, Ed and my mentors made the transition easier with their support. It has been a great experience working with the Mifos community and I am looking forward to continue the same in the future.