KRYSTALM7 opened a new issue, #98: URL: https://github.com/apache/fineract-loan-origination/issues/98
## Description The staff application frontend currently contains very large Angular components with multiple UI responsibilities, inline templates, and inline styles. This makes the code difficult to navigate, maintain, test, and contribute to. The following components have been identified as the primary candidates for refactoring: - `staff-application-detail.component.ts` - `staff-layout.component.ts` The goal of this issue is to break these large components into smaller, focused components and move inline templates/styles into dedicated files while preserving the existing functionality and UI behavior. ## Proposed Refactoring ### 1. `staff-application-detail.component` Extract logically independent UI sections into dedicated components where appropriate, such as: - Credit score display - Approval decision/actions - Approval history/timeline - Fineract integration information Move the current inline template and styles into: - `staff-application-detail.component.html` - `staff-application-detail.component.scss` ### 2. `staff-layout.component` Separate the inline template and styles into dedicated files and extract the sidebar/navigation into a focused component where appropriate. The resulting structure should follow the existing Angular feature/component organization rather than introducing an entirely new architectural pattern. ## Expected Outcome - The main components contain primarily orchestration and component-level logic. - Clearly independent UI sections are represented by focused child components where there is a clear separation of responsibility. - Templates are stored in `.html` files rather than large inline templates. - Styles are stored in `.scss` files rather than large inline style blocks. - Components are easier to read, test, debug, and modify. - Existing application behavior and visual appearance remain unchanged. ## Acceptance Criteria - [ ] `staff-application-detail.component.ts` is substantially reduced in size and responsibility. - [ ] `staff-layout.component.ts` is substantially reduced in size and responsibility. - [ ] Large inline templates are moved to dedicated `.html` files. - [ ] Large inline styles are moved to dedicated `.scss` files. - [ ] Clearly independent sections are extracted into focused Angular components where appropriate. - [ ] Existing functionality, navigation, API interactions, and state handling continue to work. - [ ] Existing styling and responsive behavior are preserved. - [ ] No unnecessary duplication is introduced during extraction. - [ ] The frontend builds successfully after the refactoring. - [ ] Relevant linting/tests pass after the changes. - [ ] No business logic is changed as part of the refactoring. ## Technical Notes Contributors should inspect the existing implementation before deciding exactly where to split the components. The objective is **separation of responsibility**, not simply reducing line counts Avoid creating artificial components solely to make files smaller. Extract functionality only where the UI section has a clear responsibility and can communicate cleanly with the parent component. The existing Fineract LOS Angular conventions should be followed when creating the new component structure. --- **JIRA:** [FINERACT-2442](https://issues.apache.org/jira/browse/FINERACT-2442) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
