[DMP 2024]: Enhancements to Payment Hub EE Operations Web UI

[DavidH-1]

Ticket Contents

Description

Mifos Payment Hub EE (PH-EE)is a Modern orchestation engine for digital & real-time payments enabling Digital Financial Service Providers (DFSPs) to connect to and participate in instant inclusive payment systems and for governments to disburse payments in bulk to functional wallet accounts.

Payment Hub EE can be deployed directly by the government or by individual institutions across the ecosystem:

Pay-BB (Payment Building Block) - Engine and Portal which sits between beneficiary management system and payment switch including ID-account mapper capability, bulk processing capability, and payment orchestration to enable disbursement of G2P payments across multiple programs into the functional accounts of beneficiaries.
Payment Hub EE - DFSP Participation Toolkit that is core-banking and payment system agnostic which enables the seamless integration and participation of any DFSP into a payment system through process orchestration
The operations web user interface is a critical tool that enables the users of PH-EE to initiate operations within the Payment Hub EE, view tranaction history, and analyze performance and transaction throughput.

Recently a brand new mono-repo microfrontend-based approach was introduced for PH-EE enabling multiple users and roles with different personas to interact with PH-EE.

Goal of this project would continue to enhance the overall user experience of the PH-EE Operations Web UI

Goals & Mid-Point Milestone

Goals

• [1] [Propose & Design UI/UX enhancements]
• [2] [Document as stories the outstanding UI screens to be implemented from Pay-BB Designs]
• [3] [Extend scope of Keycloak integration]
• [4] [Implement remaining UI screens identfied]
• [5] Implement usabilty enhancements
• [6] Integrate in the kibana/grafana dashboards and data visualizations.
  [Goals Achieved By Mid-point Milestone]

Setup/Installation

https://github.com/openMF/ph-ee-operations-web/blob/master/README.md

Expected Outcome

PH-EE Operations Web UI with improved user experience, greater visibliity into performance status of digital payments, and increased functional coverage for additonal use cases.

Acceptance Criteria

No response

Implementation Details

https://github.com/openMF/ph-ee-operations-web

Improve upon and extend internationalization throughout the application
Introduce new screens that haven't yet been implemented from the design (voucher management, P2G)
Integrate in dashboards/visualizations from Kibana
Improved configurability of look and feel
Deepen integration with KeyCloak for user and role management.
Enhance usability of ID account mapper and bulk payment interface.

Mockups/Wireframes

https://govstack-global.atlassian.net/wiki/spaces/GH/pages/251527172/UI+Design+Wireframes+-+Delivery+Milestone+1
https://mifos.gitbook.io/docs/payment-hub-ee/overview/data-dictionary

Product Name

Mifos Payment Hub EE Operations Web UI

Organisation Name

The Mifos Initiative

Domain

Financial Inclusion

Tech Skills Needed

Angular, HTML, Microservices, RESTful APIs, UI/UX/Design

Mentor(s)

@alberto-art3ch

Category

Frontend

[vilol-04]

Hi @alberto-art3ch . I need some guidance on setting up the backend. Kindly assist me.

[DavidH-1]

@alberto are you able to pick up with Vilol

…

On 18 Apr 2024, at 14:21, vilol-04 ***@***.***> wrote: Hi @alberto-art3ch <https://github.com/alberto-art3ch> . I need some guidance on setting up the backend. Kindly assist me. — Reply to this email directly, view it on GitHub <#87 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBRYA4MLBBNNBIFGN3D6CNTY57CF3AVCNFSM6AAAAABGEY3KSKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRTHA2TKOJRGU>. You are receiving this because you authored the thread.

[AbhimanyuSamagra]

Do not ask process related questions about how to apply and who to contact in the above ticket. The only questions allowed are about technical aspects of the project itself. If you want help with the process, you can refer instructions listed on Unstop and any further queries can be taken up on our Discord channel titled DMP queries. Here's a Video Tutorial on how to submit a proposal for a project.

[Cephasgokula]

Hey @DavidH-1. i am interested to work on the ui/ux part of this project . can you assign it to me.

[DavidH-1]

@Cephasgokula you need to apply with a proposal, instructions are here https://unstop.com/competitions/dedicated-mentoring-program-dmp-2024-code-for-govtech-932803?lb=7gWXVfKv

[Cephasgokula]

Hey @DavidH-1 . i have got error in installation.

[karimjindani]

Weekly Goals

Week 1

• Understanding of project operations
• Set up a local development setup for Angular and Keycloak
• Implement enhancements to User Management - Create User functionality, User Requests handling, View User details and Integrate Keycloak API with User Management

Week 2

• Implement User Status Options - Active, Inactive, Blocked, Temporarily Disabled
• Add New Fields to the Create User Form - First Name and Last Name instead of Name
• Mask Form Fields with Sample Data
• Enhance Form Error Validation
• Implement user role management and access control
• R&D on Audits logs of keycloak

Week 3

• Update the "Create User" form - User Type determines the ID field and According Add necessary column in "View User"
• Add individual filtering and sorting functionalities to the "View User" columns
• Research on jBPM (Java Business Process Management) workflow engine.
• Develop a custom event listener to send a welcome email to newly approved users.

Week 4

• Create and Implement user management business process in jbpm
• Integrate the jBPM Rest API in angular of user management business process
• Implement the Login Screen UI

Week 5

• Continue Integrate the jBPM Rest API in angular app for user management business process
• Account Mapper implementation
• Start Vouchers Management UI Implementation

Week 6

• Complete Voucher Upload UI
• Implement Payment Hub UI, Batch, Sub-Batch view and Filters

Week 7

• Changes in Payment Hub UI for Batch, Sub-Batch (Columns)
• Grafana implementation - Implement test dashboard for KeyCloak
• Integrate Visualization in PHEE UI

Week 8

• G2P Payment Config UI and Back end work
• Visualization - Add additional screen and remove few items from Keycloak dashboard

Week 9

• Learn and Implement sample project in spring boot
• Code the backend for G2P Payment Config

Week 10

• Integrate the G2P payment Config in the Angular App

Week 11

• Modify the G2P payment Config to create only configs with distinctive govt_id and fsp_id
• Setup the ph-ee-identity-account-mapper microservice repo in local environment
• Setup Identity Account Mapper Microservices.
• Study the code structure of Account Mapper and its API

Week 12

• Connect User Management drop downs to use DFSP and Govt Entity in Database
• On Logged user - show their User Type and Inst Name (based on user type)
• In Account Mapper - hide FSP column if user is FSP type
• In Account Mapper - hide Govt Entity column if user is Govt Entity type
• In API call to back-end pass the User Type and institution and return filtered data

Week 13

• Account Mapper APIs should set the Registering Inst ID and FSP ID based on values in G2Pconfig schema when adding, updating records

[dipandhali2021]

Weekly Learnings & Updates

Week 1

• Understood the basic working and operations of Payment Hub Operations Web UI
• Explored and Implemented Keycloak Rest API
• Learned about the Project structure and area of development
• Learned about the user creation flow

Week 2

• Learned about the basic role management and assignment to individual user
• Increased the learning about Authentication best Practices and building secure app
• Understood the concept of Regular Expression Pattern Recognition

Week 3

• Studied how to create custom event listener for keycloak
• learned about maven package and JAR file
• Setup local SMTP server for mail using mailHog
• Created customised welcome mail for new user
• Started Learning Basics of JBPM Workflow Engine.

Week 4

• Studied JBPM and Implemented a Maker Checker business process for User management
• Created a Collection in Postman of JBPM Rest Api to be used
• Started Implementing the Rest API in Angular App

Week 5

• Continued and Completed the JBPM Rest API integration in Angular
• Recreated and Design the Dashboard, Account Mapper UI and Voucher Management.

Week 6

• Explored the implemented the angular xng-breadcrumb for navigation
• Redesigned sections like Voucher Upload and Payment Hub(Batches, Sub-Batches and Transactions)
• Added a user friendly filter Functionality for all tables.

Week 7

• Deployed Mojafos in vm and imported payment-hub api in postman collections
• Got Detailed Explanation for working of Payment Hub
• Added Keycloak Metrics SPI in Keycloak to scrap the data from it
• Build Keycloak Dashboard using Grafana with data sources as Prometheus to scrap metrics data from Keycloak.
• Implemented the latest Payment Hub Design

Week 8

• Added the New Additional Screen in Visualizations
• Completed the UI part of G2P Payment Config
• Started Exploring the Backend Code like paymenthub operations app (API)

Week 9

• Studied java and spring boot
• Studied best practices for building API in spring boot
• Implemented G2P Payment Config backend CRUD implementation in spring boot

Week 10

• Learned Spring Security
• Integrated the API in the frontend

Week 11

• Learn and setup about Zeebe orchestration
• Explored the code structure of Identity Mapper Microservice

Week 12

• Connected various microservice in the frontend
• Modified and Added some new UI updates

[karimjindani]

@dipandhali2021 - as discussed, do upload Videos in weekly learnings for each area worked upon.