[DMP 2026]: Payment Hub EE, Operations UI in React

[DavidH-1]

Ticket Contents

Description

This project will create a new operations application from the ground up for the Payment Hub EE solution target at release 2.1 (Oct 26).

This task will need to replicate as an MVP the functional tasks of the existing Operations App (Angular)

Support both GovStack and non-GovStack use

  Orchestration for Governments

      G2P

      P2G

      Vouchers

   Orchestration for DFSPs

Integrate with RBAC (keycloak)

   different views for different roles

   authenticated login

Integrate with Reporting/Dashboards.

    Easier view for bulk transactions

    failure rates

     etc

Goals & Mid-Point Milestone

Goals

• [1] [Research best practice Design in Figma the ideal screens]
• [2] [Identify MVP scope]
• [3] [Modularise components within the UI so only those needed are deployed.]
• [4] [Plan for extensibility how would new functions be added for new PH-EE capabilities]
• [5] [Plan for maintainability how will the app be maintained]
• [6] [Test Coverage from start building suitable test cases for regression testing]

Setup/Installation

This is a new project but would be good to functionally understand our existing application first.

Expected Outcome

A new working and integrated UI providing existing functionality at a minimum built in React ShadCN

Acceptance Criteria

New Web App with existing functionality as MVP
Documented extensibility design
Documented maintainability process
Test cases for regression
Participation in mid and final presentations to Mifos Community
Final Project Report/blog documented and shared with community

Implementation Details

This will be created using React ShadCN

Mockups/Wireframes

to be created as part of the project but look at existing app for ideas

Product Name

Payment Hub EE

Organisation Name

The Mifos Initiative

Domain

Financial Inclusion

Tech Skills Needed

React

Mentor(s)

@DavidH-1 @IOhacker

Category

Frontend

[DavidH-1]

THIS PROJECT WILL BE ASSIGNED TO THE SUCCESSFUL CANDIDATE FOR DMP2026 DO NOT REASSIGN

[HarK-github]

Hi @DavidH-1 and @IOhacker, Harshit Kandpal here,
I’m interested in the task of rewriting the PH-EE Operations App using React and ShadCN. Since the current repository is a "greenfield" project, I’ve been studying the existing Angular implementation (ph-ee-operations-web) to understand the functional baseline.
I had some queries regarding the expectations from the architectural shift and backend integrations. Looking forward to discuss with you.

[DavidH-1]

@HarK-github please join our Mifos Slack Channels to discuss.

[DavidH-1]

HI All C4GT Hopefuls. If you are reading this you have found one of our projects we have listed this year. If would like to discuss about this project, as well as find our general guidance on what to include in your applications and how to stand our please ensure you join our Mifos Slack channel at:
https://join.slack.com/t/mifos/shared_invite/zt-3m6x47dgj-iX0Oqv8KS0VGgouNnuJrAg
channel: #c4gt-discussion

[katara-Jayprakash]

HI All C4GT Hopefuls. If you are reading this you have found one of our projects we have listed this year. If would like to discuss about this project, as well as find our general guidance on what to include in your applications and how to stand our please ensure you join our Mifos Slack channel at: https://join.slack.com/t/mifos/shared_invite/zt-3m6x47dgj-iX0Oqv8KS0VGgouNnuJrAg channel: #c4gt-discussion

thanx for sharing the details in depth. looking forward to contributing to it.

[shauryam2807]

Hello @DavidH-1
Thanks for this information I also want to contribute this year to mifos though DMP2026 program

[sanjanamutkiri]

Hi @DavidH-1 ,

Thank you for sharing the detailed overview of the project.

I’ve joined the Mifos Slack workspace and will continue the discussion there. I’m currently exploring the existing application to better understand the functionality and overall flow.

I’m really interested in contributing to this project for DMP 2026 and looking forward to learning more about the system and contributing effectively.

[charliehustlr1792]

Hi @DavidH-1 and @IOhacker,

I’ve gone through the project description and I’m very interested in contributing to the Payment Hub EE Operations UI in React as part of DMP 2026.

I’m currently exploring the existing Angular-based Operations App to better understand the functional scope.

I’ve also joined the Mifos Slack workspace and will continue discussions there. Looking forward to collaborating and contributing meaningfully to this project.

Thank you.

[Gungunverma1227]

"Hi @DavidH-1, I am a third-year CSE student applying for DMP 2026 for this project. I have already explored the existing Angular app and built a React prototype with ShadCN UI featuring role-based views and CRUD operations.

I am excited to contribute to this as a production-grade React application. Looking forward to your guidance!"

Thankyou.

[ProgrammerNesi]

Hi @DavidH-1 and @IOhacker,
I'm Nasir Yousuf, a CSE student. I find this project genuinely interesting and well-aligned with my skills. I've joined the Mifos Slack community and have started exploring the existing Angular app to understand its architecture. I'll share my approach for the new React app soon.
Looking forward to your guidance!
Thank you.

[Aerospace-prog]

Hi @DavidH-1 and team,

I went through the project description and tried to understand the scope of rebuilding the Operations UI for Payment Hub EE.

From what I understand, the core objective is to create a modular React-based UI that:

• Replicates key workflows from the existing Angular app
• Supports orchestration flows like G2P, P2G, vouchers
• Integrates RBAC (Keycloak) with role-specific dashboards
• Provides transaction visibility (bulk operations, failure tracking, etc.)

My current breakdown of the system:

1. UI Layer

• Dashboard views for different roles (admin/operator)
• Modular components for transactions, workflows, analytics

2. Integration Layer

• API consumption from Payment Hub EE backend
• Authentication & authorization via Keycloak (role mapping → UI views)

3. Feature Modules

• Bulk transaction monitoring
• Failure/error insights
• Workflow tracking (G2P/P2G/vouchers)

---

My plan to start contributing:

• Explore the existing Angular Operations App to understand current workflows and UI structure
• Set up the React + ShadCN base and identify reusable component patterns
• Start with a small module (e.g., transaction table / dashboard card) and integrate with APIs
• Gradually move towards role-based UI rendering using RBAC mappings

[mundele2004]

Hi @DavidH-1 ,

I’m interested in contributing to this project for rebuilding the Payment Hub EE Operations Application in React.

After reviewing the requirements, my understanding is that the goal is to create a new modular operations dashboard from the ground up that replicates the current Angular-based Operations App as an MVP, while improving maintainability, extensibility, and overall UI/UX. The project involves designing scalable React/ShadCN-based interfaces, integrating RBAC with Keycloak, building dashboards/reporting views, and architecting the frontend in a modular way for future Payment Hub EE capabilities.

This aligns strongly with my experience in full-stack and frontend-heavy development. I have worked on projects where I built frontend and backend systems end-to-end, designed modular UI components, integrated authentication/role-based access flows, and developed dashboard-style interfaces for data-driven applications. I’m comfortable working with modern component-based frontend architectures and focusing on maintainable, extensible design patterns.

I’m particularly interested in this project because it combines frontend engineering with architectural thinking around modularity, extensibility, and enterprise workflow design.

I would love to work on this project and contribute to designing and building the new Operations App.

Thanks,
Lokendra Mundele

[DavidH-1]

Updated Link: https://join.slack.com/t/mifos/shared_invite/zt-3wx5yrehv-FmnA2KZo_6VPjFvj62TpvQ