Surveys Feature

[Pinchez25]

User description

Thank you for contributing to Mifos web self-service.

##Description
Describe the changes that were made.

##Related issues and discussion
-{Issue Number}

##Screenshots/GIFs, if any:

---

PR Type

Enhancement, Bug fix, Tests, Documentation

---

Description

• Introduced a new Surveys feature:

  • Added Surveys and Take Survey states with templates and controllers.
  • Implemented survey management, submission, and validation logic.
  • Styled survey-related components and questions.

• Added document management functionality:

  • Created Documents state with upload, download, and delete capabilities.
  • Added templates and controllers for document handling.

• Enhanced user profile functionality:

  • Added a Profile state with detailed user information display.
  • Styled profile components for better user experience.

• Improved toast notifications:

  • Added success, error, warning, and info styles for consistency.
  • Updated toast usage across components for better feedback.

• Refactored dashboard and application components:

  • Ensured fallback to default values for undefined data.
  • Updated dashboard headings and calculations for clarity.

• Fixed bugs and improved error handling:

  • Added error messages for login, registration, and other forms.
  • Enhanced validation and error feedback across components.

• Updated sidenav with new icons and buttons for Surveys and Documents.

• Added and updated stylesheets for new features and UI consistency.

---

Changes walkthrough 📝

	Relevant files
Enhancement	16 files index.html Updated application title and description metadata.            +2/-2      login.html Added error message display for login form.                            +6/-0      register.html Added error message display for registration form.              +6/-0      main.html Updated sidenav with new buttons and icons.                            +19/-4    profile.html Added profile page template for user details.                        +75/-0    surveys.html Added Surveys page template for survey management.              +61/-0    take-survey.html Added Take Survey page template for survey interactions.  +69/-0    documents-list.html Added Documents page template for document management.      +48/-0    upload-dialog.html Added upload dialog template for document uploads.              +39/-0    app.routes.js Added routes for Surveys, Documents, and Profile features. +32/-10  main.component.js Added navigation to Profile and updated sidenav logic.      +8/-0      profile.component.js Added Profile controller for user data retrieval and display. +46/-0    surveys.component.js Added Surveys controller for survey management.                    +64/-0    surveys.service.js Added SurveysService for survey data handling.                      +30/-0    take-survey.component.js Added Take Survey controller for survey interactions.        +138/-0  _custom.scss Updated styles for forms, toasts, and surveys.                      +195/-0
Bug fix	4 files dashboard.html Updated dashboard to handle undefined data gracefully.      +5/-5      login.component.js Enhanced login error handling and toast notifications.      +11/-4    register.component.js Improved registration error handling and feedback.              +13/-15  dashboard.component.js Refactored dashboard data handling for robustness.              +11/-9
Additional files	16 files _toast.scss +58/-0    profile.scss +74/-0    verification.components.js +2/-0      beneficiaries-add.component.js +1/-0      beneficiaries-edit.component.js +2/-0      beneficiaries-list.component.js +2/-0      loan-application.component.js +4/-2      savings-application.component.js +4/-2      shares-application.component.js +15/-11  review-tpt-dialog.component.js +2/-0      tpt.component.js +1/-0      review-transfer-dialog.component.js +2/-0      transfers.component.js +1/-0      documents-list.component.js +181/-0  upload-documents.component.js +68/-0    upload-documents.service.js +69/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 Security concerns Sensitive information exposure: The upload-documents.service.js file (lines 17-25) logs form data to the console, which could expose sensitive document information and metadata. This is particularly concerning since this appears to be a financial application where documents might contain personal or financial information. These console logs should be removed before deploying to production.

⚡ Recommended focus areas for review Security Concern The document download implementation doesn't properly handle binary data. The current approach with Blob and URL.createObjectURL may not work correctly for all document types, potentially causing data corruption or failed downloads. UploadDocumentsService.downloadDocument().get({ clientId: vm.clientId, documentId: documentId }).$promise .then(function(response) { const blob = new Blob([response.data], { type: 'application/octet-stream' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); Console Logging The service contains console.log statements with sensitive data that should be removed before production deployment. console.log("DATA", data); formData.append('file', data.file); formData.append('name', data.name); formData.append('description', data.description || ''); console.log("FORM DATA", { file: data.file, name: data.name, description: data.description }); Debug Code There's a console.log statement in the production code that should be removed. console.log(vm.surveys);

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Remove duplicate CSS class There's a duplicate .form-errors class definition in the file. The same styles are defined both within a nested selector and as a global style at the bottom of the file. This creates redundancy and potential maintenance issues. app/assets/stylesheets/_custom.scss [854-887] -.form-errors { - background-color: #ffebee; - border-radius: 4px; - margin-bottom: 16px; - padding: 12px; - border: 1px solid #ef9a9a; +// Remove this duplicate definition and use the global one at the bottom of the file - .error-message { - color: #c62828; - font-size: 14px; - line-height: 1.5; - margin-bottom: 4px; - display: flex; - align-items: center; - - &:before { - content: "!"; - display: inline-block; - width: 16px; - height: 16px; - line-height: 16px; - text-align: center; - background-color: #c62828; - color: white; - border-radius: 50%; - margin-right: 8px; - font-size: 12px; - } - - &:last-child { - margin-bottom: 0; - } - } -} - Apply this suggestion Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a significant code duplication issue. The .form-errors class is defined twice in the same file (lines 663-696 and 854-887) with identical styling, which creates maintenance problems and potential inconsistencies.	High
	Consolidate duplicate toast styles There's a conflict between toast styles defined in _custom.scss and _toast.scss. The same component is styled differently in two files, which will cause inconsistent behavior. Consider consolidating these styles into a single location. app/assets/stylesheets/_custom.scss [778-829] -.md-toast { - &.md-success { - background-color: #4CAF50; - .md-toast-content { - background-color: #4CAF50; - } - .md-toast-message { - color: #ffffff; - } - .md-toast-action { - color: #ffffff; - } - } +// Remove these toast styles and use the ones defined in _toast.scss +// Or merge both style sets into a single file - &.md-error { - background-color: #f44336; - .md-toast-content { - background-color: #f44336; - } - .md-toast-message { - color: #ffffff; - } - .md-toast-action { - color: #ffffff; - } - } - Apply this suggestion Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a critical issue where toast styles are duplicated across two files (_custom.scss and _toast.scss) with different implementations. This duplication will cause inconsistent behavior and maintenance problems.	High
	Remove !important declarations Avoid using !important declarations in your CSS as they override the natural cascading behavior and make styles harder to maintain. Instead, use more specific selectors or restructure your CSS to achieve the desired specificity. app/assets/stylesheets/_toast.scss [1-14] md-toast { &.md-success { .md-toast-content { - background-color: #4CAF50 !important; - color: #ffffff !important; + background-color: #4CAF50; + color: #ffffff; } } &.md-error { .md-toast-content { - background-color: #f44336 !important; - color: #ffffff !important; + background-color: #f44336; + color: #ffffff; } } Apply this suggestion Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies the use of !important declarations which is a poor CSS practice that makes styles harder to maintain and override. Removing these declarations would improve code maintainability and follow CSS best practices.	Medium
Possible issue	Improve document download reliability The current implementation for downloading documents doesn't properly handle the response data. The code assumes response.data is a binary array, but it's likely that the response structure is different. You should check if the response contains the actual binary data or if it needs to be extracted differently. app/src/upload-documents/documents-list.component.js [60-68] const blob = new Blob([response.data], { type: 'application/octet-stream' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; +a.style.display = 'none'; document.body.appendChild(a); a.click(); -document.body.removeChild(a); -window.URL.revokeObjectURL(url); +setTimeout(function() { + document.body.removeChild(a); + window.URL.revokeObjectURL(url); +}, 100); Apply this suggestion Suggestion importance[1-10]: 7 __ Why: The suggestion improves the document download functionality by hiding the download link and using a timeout to ensure proper cleanup. This enhances reliability across different browsers and prevents potential memory leaks.	Medium
Security	Remove debug logging statements Remove the console.log statements from the production code. These debug statements expose sensitive information about the uploaded documents and can clutter the console logs. They should be removed before deploying to production. app/src/upload-documents/upload-documents.service.js [15-27] transformRequest: function(data) { const formData = new FormData(); - console.log("DATA", data); formData.append('file', data.file); formData.append('name', data.name); formData.append('description', data.description || ''); - console.log("FORM DATA", { - file: data.file, - name: data.name, - description: data.description - }); return formData; } Apply this suggestion Suggestion importance[1-10]: 6 __ Why: Removing console.log statements that expose document data is important for security and code cleanliness. These debug statements could potentially expose sensitive information and should be removed before deployment.	Low
Update