Mukta sor

[Swathi-eGov]

Choose the appropriate template for your PR:

• Feature PR
• Bugfix PR
• Release PR

Summary by CodeRabbit

• New Features

  • Introduced a comprehensive README for the DIGIT UI project, detailing setup and usage.
  • Added new components for campaign management, including CampaignCard, CampaignDates, and BulkUpload.
  • Implemented a new uploadData feature for managing file uploads and validations.
  • Added a TimelineCampaign component for visualizing campaign steps.
  • Introduced configuration files for managing various campaign attributes and settings.

• Bug Fixes

  • Improved error handling across various components for better user feedback.

• Documentation

  • Updated README files and added changelogs for better clarity on module usage and updates.

• Chores

  • Refined .gitignore files to improve repository cleanliness.
  • Added configuration files for CSS and PostCSS for better styling management.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request introduces several changes across multiple files, including updates to the .gitignore, CODEOWNERS, and README.md files, as well as the addition of new files for configuration, components, and services related to a campaign management module. Key updates include modifications to ignored files in .gitignore, structural changes in the README.md for clarity, and the introduction of various React components and configuration files that enhance the functionality and organization of the application.

Changes

File Path	Change Summary
.gitignore	Added patterns to ignore node_modules in specific directories and corrected formatting.
CODEOWNERS	Added a newline after the entry for @egovernments/core-ui-reviewers.
README.md	Updated headings and content structure to reflect rebranding to "DIGIT UI" and clarified instructions.
health/micro-ui/.gitignore	New file created to specify ignored files and directories for the micro UI project.
health/micro-ui/Jenkinsfile	Added library dependency and build pipeline configuration.
health/micro-ui/README.md	New documentation file for the DIGIT UI project, outlining setup and usage.
health/micro-ui/web/.babelrc	New Babel configuration file to specify presets for transpiling JavaScript and React code.
health/micro-ui/web/.env.sample	Added new environment variables for configuration.
health/micro-ui/web/CHANGELOG.md	New changelog file documenting notable changes.
health/micro-ui/web/docker/Dockerfile	Introduced a multi-stage build process for the Node.js application.
health/micro-ui/web/docker/nginx.conf	New Nginx configuration file for serving the application.
health/micro-ui/web/install-deps.sh	New shell script for installing dependencies.
health/micro-ui/web/micro-ui-internals/.gitignore	New file created to ignore unnecessary files in the micro-ui-internals directory.
health/micro-ui/web/micro-ui-internals/.prettierignore	New file created to specify files ignored by Prettier.
health/micro-ui/web/micro-ui-internals/README.md	New documentation file for the Workbench UI.
health/micro-ui/web/micro-ui-internals/clean.sh	New shell script for cleaning node_modules directories.
health/micro-ui/web/micro-ui-internals/example/.env-health-qa	New environment configuration file for the health micro UI in the QA environment.
health/micro-ui/web/micro-ui-internals/example/.env-mz-prod	New environment configuration file for the production environment.
health/micro-ui/web/micro-ui-internals/example/.env-mz-uat	New environment configuration file for the UAT environment.
health/micro-ui/web/micro-ui-internals/example/.env-unifieddev	New environment configuration file for the unified development environment.
health/micro-ui/web/micro-ui-internals/example/public/index.html	New HTML file serving as the main entry point for the application.
health/micro-ui/web/micro-ui-internals/example/src/ComponentRegistry.js	New class Registry for managing component registration.
health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js	New file defining UI customizations for various components.
health/micro-ui/web/micro-ui-internals/example/src/complaintConfig.js	New configuration object for complaint management.
health/micro-ui/web/micro-ui-internals/example/src/components/SelectName.js	New React component for selecting names in forms.
health/micro-ui/web/micro-ui-internals/example/src/fsm.js	New configuration for employee application customization.
health/micro-ui/web/micro-ui-internals/example/src/index.js	New entry point for the React application.
health/micro-ui/web/micro-ui-internals/example/src/pgr.js	New file defining and exporting pgrCustomizations and pgrComponents.
health/micro-ui/web/micro-ui-internals/example/src/setupProxy.js	New file configuring proxy middleware for the application.
health/micro-ui/web/micro-ui-internals/packages/css/README.md	New README for the digit-ui-css package.
health/micro-ui/web/micro-ui-internals/packages/css/gulpfile.js	New file introducing a build system for processing CSS using Gulp.
health/micro-ui/web/micro-ui-internals/packages/css/postcss.config.js	New PostCSS configuration file for processing styles.
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss	New SCSS file for styling microplanning components.
health/micro-ui/web/micro-ui-internals/packages/css/src/index.scss	New SCSS file importing various CSS resources.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss	New SCSS file for styling the employee campaign page.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss	New SCSS file for styling the campaign cycle interface.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/coreOverride.scss	New SCSS file enhancing styles for the employee interface.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss	New SCSS file for the employee page.
health/micro-ui/web/micro-ui-internals/packages/css/src/typography.scss	New SCSS file defining a typography system.
health/micro-ui/web/micro-ui-internals/packages/css/tailwind.config.js	New Tailwind CSS configuration file.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/README.md	New README for the digit-ui-module-workbench.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js	New file introducing the CampaignModule component.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AddProductField.js	New component for managing product fields in campaigns.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BulkUpload.js	New component for handling bulk uploads.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js	New component for rendering campaign management cards.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js	New component for managing campaign date selection.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDocumentsPreview.js	New component for managing document previews.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignHeader.js	New component for rendering the campaign header.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignName.js	New component for managing campaign name input.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignResourceDocuments.js	New component for displaying campaign-related documents.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js	New component for providing a summary of campaign status.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js	New component for selecting campaign types.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CycleDataPreview.js	New component for displaying cycle data previews.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CycleDetaisPreview.js	New component for displaying cycle details.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DSSCard.js	New component for managing dashboard cards.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DetailsTable.js	New component for rendering customizable tables.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DocumentIcon.js	New component for rendering a document icon.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/PlusMinusInput.js	New component for managing numeric input with increment/decrement functionality.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/RemovableTagNew.js	New component for rendering removable tags.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundaries.js	New component for selecting boundaries based on hierarchy.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TimelineCampaign.js	New component for rendering a timeline interface.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js	New component for managing file uploads and validation.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/XlsPreview.js	New component for previewing Excel files.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/DustbinIcon.js	New component for rendering a dustbin icon.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/XlsxFile.js	New component for rendering an XLSX file icon.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js	New configuration file for campaign management UI.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/UICustomizations.js	New file defining UI customizations for campaign states.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/addProductConfig.js	New configuration for adding product fields.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/attributeConfig.js	New configuration for campaign attributes.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/baseTimeOut.js	New constant for managing timeout settings.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/deliveryConfig.js	New configuration for managing delivery settings.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/headerConfig.js	New configuration for managing header attributes.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/mailConfig.js	New configuration for managing email settings.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/myCampaignConfig.js	New configuration for managing campaign search settings.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/operatorConfig.js	New configuration for comparison operators.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/previewConfig.js	New configuration for managing campaign preview settings.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/productType.js	New configuration for managing product types.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/schemaConfig.js	New configuration for managing schemas.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/index.js	New file exporting a set of customized hooks for campaign management.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createCampaignService.js	New service for creating campaigns.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/updateCampaignService.js	New service for updating campaigns.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/useSearchCampaign.js	New service for searching campaigns.

Possibly related PRs

• css fix #1374: Related to changes in the .gitignore file as it involves CSS fixes that may affect the visibility of ignored files in the project.
• css fix  #1399: Involves CSS fixes that could relate to the .gitignore changes, particularly if the ignored files are CSS files that need to be updated.
• bug fixes for sandbox #1439: The changes in the sandbox UI may relate to the .gitignore modifications if they involve files that should be ignored or included in the project.
• Vertical stepper implemenetation #1441: The vertical stepper implementation may relate to the .gitignore changes if it involves files that should be ignored or included in the project.
• Sandbox UI fixes #1442: The sandbox UI fixes may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• updated versions #1469: The update to the stylesheet link may relate to the .gitignore changes if it involves files that should be ignored or included in the project.
• fixed summary and campaign creation #1479: The changes in the summary and campaign creation may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• Home page break issue fix, landing page css fix #1487: The home page break issue fix may relate to the .gitignore changes if it involves files that should be ignored or included in the project.
• updated summary redirection #1488: The changes in the delivery type and selection of boundary may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• css fixes #1792: The CSS fixes may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• fixed boundary selection dropdown issue #1796: The boundary selection dropdown issue may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• ui fixes #1798: The UI fixes may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• changes in the delivery type and selection of boundary #1816: The changes in the delivery type and selection of boundary may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• tenant logo css fix #1828: The tenant logo CSS fix may relate to the .gitignore changes if it involves files that should be ignored or included in the project.
• Hcmpre 1290 #1834: The changes for the draft flow may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• Inbox #1838: The inbox changes may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• Update UserUpload.js #1886: The update to UserUpload.js may relate to the .gitignore changes if it involves files that should be ignored or included in the project.
• fixed validation cond for app #1891: The fixed validation condition for the app may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• added back button, redirected checklist success and fixed null issue … #1894: The changes in the checklist may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• fixed filestore call issue #1895: The fixed filestore call issue may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• width fix for module card #1929: The width fix for the module card may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• fixed product chip and summary issue #1941: The fixed product chip and summary issue may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• Popup fix #1958: The popup fix may relate to the .gitignore changes if they involve files that should be ignored or included in the project.
• changes in the delivery type and selection of boundary #1816: The changes in the delivery type and selection of boundary may relate to the .gitignore changes if they involve files that should be ignored or included in the project.

Suggested reviewers

• nipunarora-eGov: Suggested reviewer for the changes made in this pull request.

🐇 In the garden, we hop and play,
New files sprout like flowers in May.
With each change, our project grows,
Ignored files, we now propose!
So let’s code with joy and cheer,
For DIGIT UI is finally here! 🌼

Warning

Rate limit exceeded

@Swathi-eGov has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 45 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between fb39080 and 14bf16a.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Caution

Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments.

🛑 Comments failed to post (215)

health/micro-ui/web/CHANGELOG.md (2)

4-4: 🧹 Nitpick (assertive)

Consider adding more version metadata.

For better version tracking and release management, consider adding additional metadata such as:

• Release type (Added/Changed/Deprecated/Removed/Fixed/Security)
• Link to the PR or issue number

Example:

## [0.1.0] - 2024-05-28

### Added
- Base Admin console web functionality (#1959)
  - Campaign creation and delivery rules configuration
  - Resource validation and creation (facility, user, boundary)

🧰 Tools

🪛 Markdownlint (0.35.0)

4-4: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines

(MD022, blanks-around-headings)

---

1-7: 🧹 Nitpick (assertive)

Fix markdown formatting issues for better readability.

Several markdown formatting issues need to be addressed:

1. Add blank lines around headings
2. Use consistent heading levels (h3 instead of h4)
3. Add blank lines around lists

Apply this diff to fix the formatting:

 # Changelog
+
 All notable changes to this module will be documented in this file.
 
 ## 0.1.0 - 2024-05-28
-#### Base Admin console web
+
+### Base Admin console web
+
   1. Helps in creating the Campaign and configure delivery rules
   2. Create Data: Validates and creates resource details of type facility,user and boundary.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

# Changelog

All notable changes to this module will be documented in this file.

## 0.1.0 - 2024-05-28

### Base Admin console web

  1. Helps in creating the Campaign and configure delivery rules
  2. Create Data: Validates and creates resource details of type facility,user and boundary.

🧰 Tools

🪛 Markdownlint (0.35.0)

5-5: Expected: h3; Actual: h4
Heading levels should only increment by one level at a time

(MD001, heading-increment)

---

1-1: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines

(MD022, blanks-around-headings)

---

4-4: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines

(MD022, blanks-around-headings)

---

5-5: Expected: 1; Actual: 0; Above
Headings should be surrounded by blank lines

(MD022, blanks-around-headings)

---

5-5: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines

(MD022, blanks-around-headings)

---

6-6: null
Lists should be surrounded by blank lines

(MD032, blanks-around-lists)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/productType.js (2)

2-15: 🧹 Nitpick (assertive)

Consider adding type safety and validation

The product type configuration could benefit from additional type safety and validation to prevent runtime errors.

Consider adding PropTypes or converting to TypeScript:

import PropTypes from 'prop-types';

export const ProductTypeShape = PropTypes.shape({
  key: PropTypes.number.isRequired,
  code: PropTypes.oneOf(['BEDNET', 'TABLET', 'DRUG']).isRequired,
});

export const productType = [
  { key: 1, code: "BEDNET" },
  { key: 2, code: "TABLET" },
  { key: 3, code: "DRUG" },
];

// Runtime validation
productType.forEach(type => ProductTypeShape.isRequired.validate(type));

Also, consider adding:

• Object.freeze() to prevent accidental modifications
• A mapping function for i18n support
• JSDoc documentation for better IDE support

---

1-1: 🧹 Nitpick (assertive)

Enhance migration documentation

The comment "migrated to mdms" lacks context. Consider adding more detailed documentation about:

• What "mdms" stands for
• The purpose of this migration
• Any related configuration or setup required

-//migrated to mdms
+/**
+ * @description Product type configurations migrated from local config to MDMS (Master Data Management System)
+ * @note This configuration is now maintained in MDMS and should be kept in sync
+ */

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

/**
 * @description Product type configurations migrated from local config to MDMS (Master Data Management System)
 * @note This configuration is now maintained in MDMS and should be kept in sync
 */

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/RemovableTagNew.js (2)

4-4: 🧹 Nitpick (assertive)

Fix component name typo and consider adding PropTypes.

1. The component name has a typo: "Removeable" should be "Removable"
2. Consider adding PropTypes for better type checking and documentation

-const RemoveableTagNew = ({ text = {}, onClick, extraStyles, disabled = false }) => (
+const RemovableTagNew = ({ text = {}, onClick, extraStyles, disabled = false }) => (

Add PropTypes:

import PropTypes from 'prop-types';

// After component definition
RemovableTagNew.propTypes = {
  text: PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.string
  }),
  onClick: PropTypes.func.isRequired,
  extraStyles: PropTypes.object,
  disabled: PropTypes.bool
};

---

5-13: ⚠️ Potential issue

Add keyboard accessibility support.

The component needs keyboard event handlers to be fully accessible. Users who navigate with keyboards should be able to remove tags.

-    <span onClick={disabled ? null : onClick}>
+    <span 
+      onClick={disabled ? null : onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          !disabled && onClick();
+        }
+      }}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+    >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  <div className="tag inbox-tag" style={extraStyles ? extraStyles?.tagStyles : {}}>
    {text?.label && <span className="text inbox-tag-label" style={extraStyles ? extraStyles?.textStyles : {}}>{`${text?.label} :`}</span>}
    <span className="text inbox-tag-values" style={extraStyles ? extraStyles?.textStyles : {}}>
      {text?.value}
    </span>
    <span 
      onClick={disabled ? null : onClick}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          !disabled && onClick();
        }
      }}
      role="button"
      tabIndex={disabled ? -1 : 0}
    >
      <Close className="close" style={extraStyles ? extraStyles?.closeIconStyles : {}} />
    </span>
  </div>

🧰 Tools

🪛 Biome (1.9.4)

[error] 10-10: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/headerConfig.js (3)

11-11: 🧹 Nitpick (assertive)

Consider extracting duplicate constant

The constant "HCM_ADMIN_CONSOLE_BOUNDARY_CODE_MANDATORY" is duplicated in both facilityWithBoundary and User sections. Consider extracting it to a common constant to improve maintainability.

+const MANDATORY_BOUNDARY_CODE = "HCM_ADMIN_CONSOLE_BOUNDARY_CODE_MANDATORY";
+
 export const headerConfig = {
   boundary: [
     "HCM_ADMIN_CONSOLE_BOUNDARY_CODE",
     "HCM_ADMIN_CONSOLE_TARGET_AT_THE_SELECTED_BOUNDARY_LEVEL"
   ],
   facilityWithBoundary: [
     "HCM_ADMIN_CONSOLE_FACILITY_CODE",
     "HCM_ADMIN_CONSOLE_FACILITY_NAME",
     "HCM_ADMIN_CONSOLE_FACILITY_TYPE",
     "HCM_ADMIN_CONSOLE_FACILITY_STATUS",
     "HCM_ADMIN_CONSOLE_FACILITY_CAPACITY",
-    "HCM_ADMIN_CONSOLE_BOUNDARY_CODE_MANDATORY"
+    MANDATORY_BOUNDARY_CODE
   ],
   user: [
     "HCM_ADMIN_CONSOLE_USER_NAME",
     "HCM_ADMIN_CONSOLE_USER_PHONE_NUMBER",
     "HCM_ADMIN_CONSOLE_USER_ROLE",
     "HCM_ADMIN_CONSOLE_USER_EMPLOYMENT_TYPE",
-    "HCM_ADMIN_CONSOLE_BOUNDARY_CODE_MANDATORY"
+    MANDATORY_BOUNDARY_CODE
   ]
 };

Also applies to: 18-18

---

13-13: 🧹 Nitpick (assertive)

Use consistent naming convention for object properties

The property name "User" uses PascalCase while other properties use camelCase. Consider renaming it to maintain consistency.

-  User: [
+  user: [

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  user: [

---

1-1: 🧹 Nitpick (assertive)

Add JSDoc documentation for the exported constant

Consider adding JSDoc documentation to describe the purpose and structure of the headerConfig object. This will improve code maintainability and help other developers understand its usage.

+/**
+ * Configuration object containing translation keys for headers in the campaign manager module
+ * @type {Object}
+ * @property {string[]} boundary - Translation keys for boundary-related headers
+ * @property {string[]} facilityWithBoundary - Translation keys for facility-related headers
+ * @property {string[]} user - Translation keys for user-related headers
+ */
 export const headerConfig = {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

/**
 * Configuration object containing translation keys for headers in the campaign manager module
 * @type {Object}
 * @property {string[]} boundary - Translation keys for boundary-related headers
 * @property {string[]} facilityWithBoundary - Translation keys for facility-related headers
 * @property {string[]} user - Translation keys for user-related headers
 */
export const headerConfig = {

health/micro-ui/web/micro-ui-internals/packages/css/postcss.config.js (3)

5-12: 🛠️ Refactor suggestion

Remove duplicate autoprefixer and consider production optimization

Two issues to address:

1. autoprefixer is included twice as it's also part of postcss-preset-env
2. Consider enabling cssnano for production builds to minimize CSS output

   plugins: [
     require("postcss-import"),
     require("postcss-nested").default,
     require("tailwindcss"),
     require("postcss-preset-env"),
-    require("autoprefixer"),
-    // require("cssnano"),
+    process.env.NODE_ENV === 'production' && require("cssnano")
   ].filter(Boolean),

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  plugins: [
    require("postcss-import"),
    require("postcss-nested").default,
    require("tailwindcss"),
    require("postcss-preset-env"),
    process.env.NODE_ENV === 'production' && require("cssnano")
  ].filter(Boolean),

---

1-4: 🧹 Nitpick (assertive)

Optimize postcss-preset-env configuration

The postcss-preset-env is imported but used without configuration. Consider utilizing the imported instance with specific configuration options to optimize CSS processing and browser compatibility.

 const postcssPresetEnv = require("postcss-preset-env");

 module.exports = {
   parser: require("postcss-scss"),
   plugins: [
     require("postcss-import"),
     require("postcss-nested").default,
     require("tailwindcss"),
-    require("postcss-preset-env"),
+    postcssPresetEnv({
+      features: {
+        'custom-properties': true
+      },
+      autoprefixer: {
+        cascade: false
+      }
+    }),
     require("autoprefixer"),

Committable suggestion skipped: line range outside the PR's diff.

---

15-55: 🧹 Nitpick (assertive)

Document the purpose of preserved configuration

The commented configuration contains valuable environment-specific handling and header generation. As per previous feedback, this code should be retained. However, consider adding a comment explaining why it's preserved and when it might be needed.

+// Preserved configuration for reference:
+// - Supports development/production/compat environments
+// - Generates CSS headers from package.json metadata
+// - Includes prefix handling and custom property processing
 // const fs = require('fs');
 // const { name, version, author, cssConfig } = JSON.parse(fs.readFileSync('package.json'));

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

// Preserved configuration for reference:
// - Supports development/production/compat environments
// - Generates CSS headers from package.json metadata
// - Includes prefix handling and custom property processing
// const fs = require('fs');
// const { name, version, author, cssConfig } = JSON.parse(fs.readFileSync('package.json'));

// const header = `
// @charset "UTF-8";
// /*!
//  * ${name} - ${version}
//  *
//  * Copyright (c) ${new Date().getFullYear()} ${author.name}
//  */
//   `;

// module.exports = (ctx) => {
//   const prefix = ctx.env === 'compat' ? '' : cssConfig.prefix;
//   const devMessage = `🎉🎉🎉🎉 \n${name} ${ctx.env} build was compiled sucessfully! \n`;


//   return {
//     map: ctx.options.map,
//     parser: ctx.options.parser,
//     plugins: {
//       'postcss-import': { root: ctx.file.dirname },
//       'postcss-prefixer': {
//         prefix,
//         ignore: [/\[class\*=.*\]/],
//       },
//       'postcss-preset-env': {
//         autoprefixer: {
//           cascade: false,
//         },
//         features: {
//           'custom-properties': true,
//         },
//       },
//       cssnano: ctx.env === 'production' || ctx.env === 'compat' ? {} : false,
//       'postcss-header': {
//         header,
//       },
//     },
//   };
// };

health/micro-ui/web/micro-ui-internals/example/src/setupProxy.js (6)

7-8: 🧹 Nitpick (assertive)

⚠️ Potential issue

Review security implications of proxy configuration.

The proxy is configured with secure: false which disables SSL certificate validation. This could expose the application to man-in-the-middle attacks in production. Consider:

1. Enabling SSL verification for production environments
2. Adding proper error handling for failed proxy requests

 changeOrigin: true,
-secure: false,
+secure: process.env.NODE_ENV === 'development' ? false : true,
+onError: (err, req, res) => {
+  console.error('Proxy error:', err);
+  res.status(500).json({ error: 'Proxy error occurred' });
+},

Also applies to: 12-13, 17-18

---

21-21: ⚠️ Potential issue

Remove duplicate route configuration.

The route "/mdms-v2/v2/_create" is configured twice for mdmsProxy. Remove the duplicate entry.

 ["/mdms-v2/v2/_create"].forEach((location) => app.use(location, mdmsProxy));
 // ... other routes ...
-["/mdms-v2/v2/_create"].forEach((location) => app.use(location, mdmsProxy));

Also applies to: 100-100

---

1-101: 🧹 Nitpick (assertive)

Consider adding health checks and monitoring.

The proxy setup would benefit from additional operational features:

1. Health check endpoints to verify proxy targets are accessible
2. Monitoring for proxy errors and performance
3. Rate limiting for security

Would you like me to provide an implementation for these features?

---

16-16: ⚠️ Potential issue

Fix incorrect environment variable usage.

The mdmsProxy is using REACT_APP_PROXY_ASSETS instead of a dedicated environment variable for MDMS services. This could lead to configuration conflicts.

-  target: process.env.REACT_APP_PROXY_ASSETS || "http://localhost:8080",
+  target: process.env.REACT_APP_PROXY_MDMS || "http://localhost:8080",

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  target: process.env.REACT_APP_PROXY_MDMS || "http://localhost:8080",

---

4-5: 🧹 Nitpick (assertive)

Remove commented code.

Remove the commented target URLs to maintain clean code. If these URLs are important for different environments, consider documenting them in the README or environment configuration files.

-  //target: process.env.REACT_APP_PROXY_API || "https://uat.digit.org",
-  // target: process.env.REACT_APP_PROXY_API || "https://qa.digit.org",

---

22-98: 🛠️ Refactor suggestion

Improve route organization and maintainability.

The current route configuration has several areas for improvement:

1. Related endpoints are scattered (e.g., project-related routes)
2. Multiple versions of services are mixed together
3. The list is quite long and could benefit from categorization

Consider refactoring to improve maintainability:

+const ROUTES = {
+  mdms: ['/mdms-v2/v2/_create'],
+  project: [
+    '/project/v1/',
+    '/project/staff/v1/_search',
+    '/project/v1/_search',
+    '/project-factory'
+  ],
+  billing: [
+    '/billing-service',
+    '/collection-services',
+    '/pg-service'
+  ],
+  // ... other categorized routes
+};
+
+Object.entries(ROUTES).forEach(([category, routes]) => {
+  routes.forEach(route => {
+    if (!route.startsWith('/')) {
+      console.warn(`Invalid route format: ${route} in category ${category}`);
+      return;
+    }
+    app.use(route, createProxy);
+  });
+});

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/DustbinIcon.js (2)

3-9: ⚠️ Potential issue

Add accessibility attributes to SVG icon

The SVG icon is missing accessibility attributes which are essential for screen readers.

Apply this diff to add accessibility support:

-export const DustbinIcon = () => (
+export const DustbinIcon = () => (
   <svg
     width="12"
     height="16"
     viewBox="0 0 12 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Delete"
   >
+    <title>Delete</title>
     <path
       d="M0.999837 13.8333C0.999837 14.75 1.74984 15.5 2.6665 15.5L9.33317 15.5C10.2498 15.5 10.9998 14.75 10.9998 13.8333L10.9998 3.83333L0.999837 3.83333L0.999837 13.8333ZM11.8332 1.33333L8.9165 1.33333L8.08317 0.5L3.9165 0.5L3.08317 1.33333L0.166504 1.33333L0.166504 3L11.8332 3V1.33333Z"
       fill={PRIMARY_COLOR}
     />
   </svg>
 );

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

export const DustbinIcon = () => (
  <svg
    width="12"
    height="16"
    viewBox="0 0 12 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    role="img"
    aria-label="Delete"
  >
    <title>Delete</title>
    <path
      d="M0.999837 13.8333C0.999837 14.75 1.74984 15.5 2.6665 15.5L9.33317 15.5C10.2498 15.5 10.9998 14.75 10.9998 13.8333L10.9998 3.83333L0.999837 3.83333L0.999837 13.8333ZM11.8332 1.33333L8.9165 1.33333L8.08317 0.5L3.9165 0.5L3.08317 1.33333L0.166504 1.33333L0.166504 3L11.8332 3V1.33333Z"
      fill={PRIMARY_COLOR}
    />
  </svg>
);

🧰 Tools

🪛 Biome (1.9.4)

[error] 4-4: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

---

1-10: 🧹 Nitpick (assertive)

Consider making the icon component more reusable

The component could be more flexible by accepting props for customization.

Consider this implementation for better reusability:

 import React from "react";
 import { PRIMARY_COLOR } from "../../utils";
-export const DustbinIcon = () => (
+export const DustbinIcon = ({ 
+  width = "12",
+  height = "16",
+  color = PRIMARY_COLOR,
+  className,
+  title = "Delete"
+}) => (
   <svg
-    width="12"
-    height="16"
+    width={width}
+    height={height}
     viewBox="0 0 12 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    role="img"
+    aria-label={title}
   >
+    <title>{title}</title>
     <path
       d="M0.999837 13.8333C0.999837 14.75 1.74984 15.5 2.6665 15.5L9.33317 15.5C10.2498 15.5 10.9998 14.75 10.9998 13.8333L10.9998 3.83333L0.999837 3.83333L0.999837 13.8333ZM11.8332 1.33333L8.9165 1.33333L8.08317 0.5L3.9165 0.5L3.08317 1.33333L0.166504 1.33333L0.166504 3L11.8332 3V1.33333Z"
-      fill={PRIMARY_COLOR}
+      fill={color}
     />
   </svg>
 );

This change allows:

• Customizable dimensions
• Custom colors
• CSS class injection
• Custom accessibility title

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import React from "react";
import { PRIMARY_COLOR } from "../../utils";
export const DustbinIcon = ({ 
  width = "12",
  height = "16",
  color = PRIMARY_COLOR,
  className,
  title = "Delete"
}) => (
  <svg
    width={width}
    height={height}
    viewBox="0 0 12 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
    role="img"
    aria-label={title}
  >
    <title>{title}</title>
    <path
      d="M0.999837 13.8333C0.999837 14.75 1.74984 15.5 2.6665 15.5L9.33317 15.5C10.2498 15.5 10.9998 14.75 10.9998 13.8333L10.9998 3.83333L0.999837 3.83333L0.999837 13.8333ZM11.8332 1.33333L8.9165 1.33333L8.08317 0.5L3.9165 0.5L3.08317 1.33333L0.166504 1.33333L0.166504 3L11.8332 3V1.33333Z"
      fill={color}
    />
  </svg>
);

🧰 Tools

🪛 Biome (1.9.4)

[error] 4-4: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/attributeConfig.js (1)

2-23: 🛠️ Refactor suggestion

Consider improving the attribute configuration structure

The current implementation has some potential issues:

1. Using sequential numeric keys (1,2,3,4) is fragile:

   • Reordering attributes would break references to these keys
   • Inserting new attributes between existing ones would break the sequence

2. The configuration could benefit from additional metadata:

   • Data type for each attribute (number for Age/Height/Weight, enum for Gender)
   • Validation rules (min/max for Age, valid options for Gender)
   • Unit information (years for Age, cm/ft for Height, kg/lb for Weight)

Consider restructuring like this:

 export const attributeConfig = [
   {
-    key: 1,
+    key: "AGE",
     code: "Age",
     i18nKey: "CAMPAIGN_ATTRIBUTE_AGE",
+    type: "number",
+    validation: {
+      min: 0,
+      max: 150
+    },
+    unit: "years"
   },
   {
-    key: 2,
+    key: "HEIGHT",
     code: "Height",
     i18nKey: "CAMPAIGN_ATTRIBUTE_HEIGHT",
+    type: "number",
+    validation: {
+      min: 0
+    },
+    unit: "cm"
   },
   {
-    key: 3,
+    key: "WEIGHT",
     code: "Weight",
     i18nKey: "CAMPAIGN_ATTRIBUTE_WEIGHT",
+    type: "number",
+    validation: {
+      min: 0
+    },
+    unit: "kg"
   },
   {
-    key: 4,
+    key: "GENDER",
     code: "Gender",
     i18nKey: "CAMPAIGN_ATTRIBUTE_GENDER",
+    type: "enum",
+    options: ["MALE", "FEMALE", "OTHER"]
   }
 ];

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

export const attributeConfig = [
  {
    key: "AGE",
    code: "Age",
    i18nKey: "CAMPAIGN_ATTRIBUTE_AGE",
    type: "number",
    validation: {
      min: 0,
      max: 150
    },
    unit: "years"
  },
  {
    key: "HEIGHT",
    code: "Height",
    i18nKey: "CAMPAIGN_ATTRIBUTE_HEIGHT",
    type: "number",
    validation: {
      min: 0
    },
    unit: "cm"
  },
  {
    key: "WEIGHT",
    code: "Weight",
    i18nKey: "CAMPAIGN_ATTRIBUTE_WEIGHT",
    type: "number",
    validation: {
      min: 0
    },
    unit: "kg"
  },
  {
    key: "GENDER",
    code: "Gender",
    i18nKey: "CAMPAIGN_ATTRIBUTE_GENDER",
    type: "enum",
    options: ["MALE", "FEMALE", "OTHER"]
  }
];

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/schemaConfig.js (2)

19-49: 🧹 Nitpick (assertive)

Consider refining property constraints and naming conventions.

Several suggestions for improvement:

1. The property naming is inconsistent (e.g., "Capacity" vs "Facility Name"). Consider using consistent naming conventions.
2. The maximum capacity of 100,000,000 seems excessive. Please verify if this aligns with real-world facility capacities.
3. A 2000-character limit for facility names seems unnecessarily high. Consider reducing this to a more practical limit (e.g., 255 characters).

---

50-79: ⚠️ Potential issue

Fix critical issues in User schema definition.

Several critical issues need to be addressed:

1. The required array references "Phone Number (Mandatory)" but the property is defined as "Phone Number"
2. Phone number validation could be improved:
   • Consider using string type with pattern validation for phone numbers
   • Current integer type drops leading zeros
3. "Role (Mandatory)" field lacks enumeration of allowed values
4. The "Capacity" property has inconsistent JSON formatting (using quotes unnecessarily)

Apply these fixes:

     "Phone Number": {
-      type: "integer",
-      minimum: 100000000,
-      maximum: 9999999999,
+      type: "string",
+      pattern: "^[0-9]{10}$",
     },
     "Role (Mandatory)": {
       type: "string",
+      enum: ["FIELD_AGENT", "SUPERVISOR", "MANAGER"],  // Add appropriate roles
     },
     "Capacity": {
-      "type": "number",
-      "minimum": 1,
-      "maximum": 100000000
+      type: "number",
+      minimum: 1,
+      maximum: 100000000
     }
   },
   required: [
     "Name of the Person (Mandatory)",
-    "Phone Number (Mandatory)",
+    "Phone Number",
     "Role (Mandatory)",
     "Employment Type (Mandatory)"
   ],

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  User: {
    $schema: "http://json-schema.org/draft-07/schema#",
    title: "UserTemplateSchema",
    type: "object",
    properties: {
      "Name of the Person (Mandatory)": {
        type: "string",
        maxLength: 128,
        minLength: 1,
      },
      "Phone Number": {
        type: "string",
        pattern: "^[0-9]{10}$",
      },
      "Role (Mandatory)": {
        type: "string",
        enum: ["FIELD_AGENT", "SUPERVISOR", "MANAGER"],
      },
      "Employment Type (Mandatory)": {
        type: "string",
        enum: ["Temporary", "Permanent"],
      },
      "Capacity": {
        type: "number",
        minimum: 1,
        maximum: 100000000
      }
    },
    required: [
      "Name of the Person (Mandatory)",
      "Phone Number",
      "Role (Mandatory)",
      "Employment Type (Mandatory)"
    ],
  },

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/operatorConfig.js (2)

2-27: 🧹 Nitpick (assertive)

Consider enhancing the operator configuration structure

The current implementation could benefit from several improvements:

1. Add display labels and descriptions for better maintainability
2. Consider using TypeScript for type safety
3. Use standard operator naming conventions (e.g., "LESS_THAN_OR_EQUAL_TO" instead of "LESSER_THAN_EQUAL_TO")

Consider refactoring to:

 export const operatorConfig = [
   {
     key: 1,
     code: "LESS_THAN",
+    label: "Less Than",
+    symbol: "<",
   },
   {
     key: 2,
     code: "GREATER_THAN",
+    label: "Greater Than",
+    symbol: ">",
   },
   // ... other operators
   {
     key: 6,
-    code: "LESSER_THAN_EQUAL_TO",
+    code: "LESS_THAN_OR_EQUAL_TO",
+    label: "Less Than or Equal To",
+    symbol: "≤",
   },
 ];

Committable suggestion skipped: line range outside the PR's diff.

---

1-1: 💡 Codebase verification

Migration to MDMS is incomplete - Action Required

The comment "migrated to mdms" is misleading as the code shows active usage of the operator configurations in the codebase. The evidence shows:

1. The operators are actively used in multiple files:

   • SetupCampaign.js
   • previewConfig.js
   • deliveryConfig.js
   • AddDeliverycontext.js

2. The AddDeliverycontext.js is already fetching operator configurations from MDMS using useCustomMDMS hook with "HCM-ADMIN-CONSOLE" module and "operatorConfig" master, but still maintains a local fallback.

Please either:

• Complete the migration by removing the local operatorConfig.js and ensuring all components use MDMS data
• Or remove the misleading comment if MDMS migration is not intended

🔗 Analysis chain

Clarify the MDMS migration status

The comment "migrated to mdms" is ambiguous. Please clarify:

• Is this a TODO item?
• Should this file be used, or should we reference MDMS instead?
• What's the timeline for the migration?

Let's check if this configuration exists in MDMS:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for operator configurations in MDMS files
rg -g "*.json" "LESS_THAN|GREATER_THAN|IN_BETWEEN|EQUAL_TO" mdms/

Length of output: 113

---

Script:

#!/bin/bash
# Let's check if there are any MDMS-related directories or files in the repository
fd mdms

# Also search for operator configurations in any JSON files
rg -g "*.json" "LESS_THAN|GREATER_THAN|IN_BETWEEN|EQUAL_TO"

# Check if there are any references to MDMS in the codebase
rg -i "mdms" -g "!*.{lock,svg,min.js}"

# Look for similar operator configurations
rg -g "!*.{lock,svg,min.js}" "operatorConfig|LESS_THAN|GREATER_THAN|IN_BETWEEN|EQUAL_TO"

Length of output: 65947

---

Script:

#!/bin/bash
# Let's check if there are any references to these operators in MDMS or other configuration files
rg -g "*.{json,js}" "LESS_THAN|GREATER_THAN|IN_BETWEEN|EQUAL_TO" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

# Let's also check for any MDMS-related files in the campaign manager module
fd mdms health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

# Check if there are any other operator configurations in the codebase
rg -g "*.js" "operatorConfig" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

Length of output: 8644

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/PlusMinusInput.js (5)

1-3: 🛠️ Refactor suggestion

Clean up unused imports and improve component declaration

The component has several issues in its declaration:

1. useState is imported but never used
2. customProps parameter is never used
3. Props could be destructured for better readability

-import React, { useState } from "react";
+import React from "react";

-const PlusMinusInput = (props, customProps) => {
+const PlusMinusInput = ({ defaultValues = 1, onSelect }) => {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import React from "react";

const PlusMinusInput = ({ defaultValues = 1, onSelect }) => {

---

47-47: 🧹 Nitpick (assertive)

Add PropTypes for better documentation and type checking

The component is missing PropTypes definitions which would help with documentation and runtime type checking.

+import PropTypes from 'prop-types';
+
 const PlusMinusInput = ({ defaultValues = 1, onSelect }) => {
   // ... component implementation ...
 };
+
+PlusMinusInput.propTypes = {
+  defaultValues: PropTypes.number,
+  onSelect: PropTypes.func.isRequired,
+};
+
 export default PlusMinusInput;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import PropTypes from 'prop-types';

const PlusMinusInput = ({ defaultValues = 1, onSelect }) => {
  // ... component implementation ...
};

PlusMinusInput.propTypes = {
  defaultValues: PropTypes.number,
  onSelect: PropTypes.func.isRequired,
};

export default PlusMinusInput;

---

4-4: ⚠️ Potential issue

Critical: Replace regular variable with React state

Using a regular variable for count instead of React state will prevent the component from re-rendering when the value changes. This will cause the UI to become out of sync with the actual value.

-let count = props?.defaultValues || 1;
+const [count, setCount] = useState(defaultValues || 1);

 function incrementCount() {
   if (count >= 1) {
-    count = count + 1;
+    setCount(count + 1);
-    props.onSelect(count);
+    onSelect(count + 1);
   } else {
-    count = 1;
+    setCount(1);
-    props.onSelect(count);
+    onSelect(1);
   }
 }

Committable suggestion skipped: line range outside the PR's diff.

---

25-44: 🛠️ Refactor suggestion

Improve accessibility and clean up render logic

The render logic needs improvements for accessibility and code cleanliness:

1. Remove unnecessary Fragment
2. Add proper accessibility attributes
3. Clean up handler calls

-return (
-  <React.Fragment>
-    <div className="PlusMinus">
-      <button type="button" onClick={() => decrementCount(count)} className="PlusMinusbutton">
-        -
-      </button>
+return (
+  <div className="PlusMinus">
+    <button
+      type="button"
+      onClick={decrementCount}
+      className="PlusMinusbutton"
+      aria-label="Decrease value">
+      -
+    </button>
+    <input
+      readOnly
+      value={count}
+      aria-label="Quantity value"
+      style={{
+        textAlign: "center",
+        border: "1px solid #505A5F",
+      }}
+    />
+    <button
+      type="button"
+      onClick={incrementCount}
+      className="PlusMinusbutton"
+      aria-label="Increase value">
+      +
+    </button>
+  </div>
-    </React.Fragment>
-  );

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  return (
    <div className="PlusMinus">
      <button
        type="button"
        onClick={decrementCount}
        className="PlusMinusbutton"
        aria-label="Decrease value">
        -
      </button>
      <input
        readOnly
        value={count}
        aria-label="Quantity value"
        style={{
          textAlign: "center",
          border: "1px solid #505A5F",
        }}
      />
      <button
        type="button"
        onClick={incrementCount}
        className="PlusMinusbutton"
        aria-label="Increase value">
        +
      </button>
    </div>
  );

---

6-23: 🛠️ Refactor suggestion

Simplify event handlers and remove redundant code

The increment and decrement handlers can be simplified by:

1. Removing redundant conditions
2. Eliminating duplicate code
3. Removing unused parameters

-function incrementCount() {
-  if (count >= 1) {
-    count = count + 1;
-    props.onSelect(count);
-  } else {
-    count = 1;
-    props.onSelect(count);
-  }
-}
-function decrementCount() {
-  if (count > 1) {
-    count = count - 1;
-    props.onSelect(count);
-  } else {
-    count = 1;
-    props.onSelect(count);
-  }
-}
+const incrementCount = () => {
+  const newCount = count + 1;
+  setCount(newCount);
+  onSelect(newCount);
+};
+
+const decrementCount = () => {
+  const newCount = count > 1 ? count - 1 : 1;
+  setCount(newCount);
+  onSelect(newCount);
+};

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/myCampaignConfig.js (5)

436-439: ⚠️ Potential issue

Inconsistent default value keys

The default value keys are inconsistent across configurations:

• Drafts section uses campaignName and campaignType
• Other sections use name and type

Apply this fix to standardize the keys:

// In all non-draft sections
defaultValues: {
-  name: "",
-  type: "",
+  campaignName: "",
+  campaignType: "",
}

Also applies to: 567-570

---

11-665: 🛠️ Refactor suggestion

Consider extracting common configuration patterns

The configuration structure is heavily duplicated across all campaign states (ongoing, completed, upcoming, drafts, failed). Each state shares identical:

• Search field configurations
• Column definitions
• API endpoints
• UI styling

Consider refactoring to:

1. Extract common configurations into shared objects
2. Create a factory function that generates state-specific configs by extending the base config

Here's a suggested approach:

const baseSearchFields = [
  {
    label: "CAMPAIGN_SEARCH_NAME",
    type: "text",
    // ... common field config
  },
  {
    label: "CAMPAIGN_SEARCH_TYPE",
    type: "apidropdown",
    // ... common field config
  }
];

const baseColumns = [
  {
    label: "CAMPAIGN_NAME",
    jsonPath: "campaignName",
    additionalCustomization: true,
  },
  // ... other common columns
];

const createCampaignConfig = (state) => ({
  label: `CAMPAIGN_${state.toUpperCase()}`,
  type: "search",
  apiDetails: {
    serviceName: "/project-factory/v1/project-type/search",
    moduleName: `MyCampaignConfig${state}`,
    // ... common API config
  },
  sections: {
    search: {
      uiConfig: {
        fields: baseSearchFields,
        // ... common search config
      }
    },
    searchResult: {
      uiConfig: {
        columns: baseColumns,
        // ... common result config
      }
    }
  }
});

export const myCampaignConfig = {
  tenantId: "mz",
  moduleName: "commonCampaignUiConfig",
  showTab: true,
  myCampaignConfig: [
    "Ongoing",
    "Completed",
    "Upcoming",
    "Drafts",
    "Failed"
  ].map(createCampaignConfig)
};

This refactoring would:

• Reduce code duplication by ~80%
• Make maintenance easier
• Reduce the likelihood of configuration inconsistencies
• Make it easier to add new campaign states

---

121-124: 🧹 Nitpick (assertive)

Remove commented pagination configuration

The commented pagination configuration is duplicated across all campaign states. Either implement it or remove it.

Apply this fix to remove the commented code:

-            // customDefaultPagination: {
-            //   limit: 5,
-            //   offset: 0,
-            // },

Also applies to: 252-255, 383-386, 514-517, 645-648

---

598-599: ⚠️ Potential issue

Incorrect module name in Failed campaigns configuration

The Failed campaigns section incorrectly uses MyCampaignConfigCompleted instead of MyCampaignConfigFailed for the module name.

Apply this fix:

-  moduleName: "MyCampaignConfigCompleted",
+  moduleName: "MyCampaignConfigFailed",

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                  moduleName: "MyCampaignConfigFailed",
                  customfn: "populateCampaignTypeReqCriteria",

---

7-8: 🧹 Nitpick (assertive)

💡 Codebase verification

Based on the search results, I can generate the final response as we have sufficient information to verify the tenant ID configuration concern.

Tenant ID should be configurable through environment or session storage

The hardcoded tenant ID "mz" in the campaign configuration should be replaced with a dynamic value. The codebase consistently uses session storage or service methods to obtain tenant IDs:

• Digit.ULBService.getCurrentTenantId()
• Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")?.code
• Digit.ULBService.getStateId()

🔗 Analysis chain

Verify tenant ID configuration

The hardcoded tenant ID "mz" might limit the reusability of this configuration across different deployments.

Consider making the tenant ID configurable through environment variables or a central configuration file for better maintainability across different deployments.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for other tenant IDs in the codebase
rg -g '*.js' -B 2 -A 2 'tenantId.*=.*["'\''].*["'\'']'

Length of output: 20599

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignHeader.js (6)

10-10: 🛠️ Refactor suggestion

Remove unused translation hook

The useTranslation hook is imported and initialized but never used in the component.

Remove the unused translation hook:

-  const { t } = useTranslation();

Also applies to: 22-29

---

25-27: 🧹 Nitpick (assertive)

Consider using a more semantic class name

The class name wbh-header is not very descriptive. Consider using a more semantic name that reflects its purpose in the campaign management context.

Suggested change:

-      <div className="wbh-header">
+      <div className="campaign-header-help">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

      <div className="campaign-header-help">
        <Help startTour={startTour} />
      </div>

---

8-12: 🧹 Nitpick (assertive)

Remove commented code

The commented code referencing TutorialContext should be removed if it's no longer needed. The explanatory comment about pathname usage is valuable and should be kept.

Apply this diff:

  const { tourState, setTourState } = useTourState();
-  // const { tutorial, updateTutorial } = useContext(TutorialContext);
  const { t } = useTranslation();

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const { tourState, setTourState } = useTourState();
  const { t } = useTranslation();
  //using location.pathname we can update the stepIndex accordingly when help is clicked from any other screen(other than home screen)
  const { pathname } = useLocation();

---

1-5: 🛠️ Refactor suggestion

Clean up imports and remove commented code

The BackButton component is imported but never used in the code. Additionally, there's unused useEffect and useContext imports.

Apply this diff to clean up the imports:

-import { BackButton, Tutorial, useTourState, Help } from "@egovernments/digit-ui-react-components";
-import React, { useEffect, useContext, Fragment } from "react";
+import { Tutorial, useTourState, Help } from "@egovernments/digit-ui-react-components";
+import React, { Fragment } from "react";

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import { Tutorial, useTourState, Help } from "@egovernments/digit-ui-react-components";
import React, { Fragment } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { TourSteps } from "../utils/TourSteps";

---

14-20: 🧹 Nitpick (assertive)

Simplify boolean expressions in startTour function

The boolean expressions using ternary operators can be simplified for better readability.

Apply this diff:

  const startTour = () => {
    setTourState({
-      run: TourSteps[pathname]?.length > 0 ? true : false,
-      steps: TourSteps[pathname] || [],
-      tourActive: TourSteps[pathname]?.length > 0 ? true : false,
+      run: Boolean(TourSteps[pathname]?.length),
+      steps: TourSteps[pathname] || [],
+      tourActive: Boolean(TourSteps[pathname]?.length),
    });
  };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const startTour = () => {
    setTourState({
      run: Boolean(TourSteps[pathname]?.length),
      steps: TourSteps[pathname] || [],
      tourActive: Boolean(TourSteps[pathname]?.length),
    });
  };

🧰 Tools

🪛 Biome (1.9.4)

[error] 16-16: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

[error] 18-18: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

5-5: 💡 Codebase verification

Missing tour steps configuration for campaign routes

The TourSteps utility currently only contains configurations for workbench-related paths (/workbench-ui/employee/workbench/*), but is missing configurations for the campaign management routes:

• /campaign/setup-campaign
• /campaign/my-campaign
• /campaign/create-campaign/upload-boundary-data
• /campaign/create-campaign/cycle-configure
• /campaign/create-campaign/delivery-details
• /campaign/preview
• /campaign/response
• /campaign/selecting-boundary
• /campaign/add-product

🔗 Analysis chain

Verify TourSteps configuration

Please ensure that the TourSteps utility is properly configured with all the required pathname mappings for the campaign management module.

Also applies to: 16-18

---

Let me check the actual TourSteps configuration to verify if it's properly defined.

---

Let me check the campaign management routes to verify if they need tour steps configuration.

---

Let me check the actual routes defined in these files to understand which paths need tour steps.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if TourSteps are properly configured for all campaign routes
rg -A 5 "TourSteps\[.*\]" "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/"

Length of output: 1146

---

Script:

#!/bin/bash
# Check TourSteps configuration in utils
cat "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/TourSteps.js"

Length of output: 4248

---

Script:

#!/bin/bash
# Check campaign management routes
rg -l "Route|path.*campaign" "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/"

Length of output: 419

---

Script:

#!/bin/bash
# Check campaign routes in Module.js and index.js
echo "=== Module.js routes ==="
cat "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js"
echo -e "\n=== index.js routes ==="
cat "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js"

Length of output: 11360

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/previewConfig.js (6)

123-123: ⚠️ Potential issue

Remove undefined property

The undefined: {} property appears to be an error and should be removed.

-  undefined: {},

---

2-7: 🛠️ Refactor suggestion

Consider making campaign dates configurable at runtime

Hardcoding future dates (April 2024) in the configuration file could cause issues when the dates need to be updated. Consider making these dates configurable through environment variables or a configuration service.

 HCM_CAMPAIGN_DATE: {
   campaignDates: {
-    startDate: "2024-04-01",
-    endDate: "2024-04-26",
+    startDate: process.env.CAMPAIGN_START_DATE || "2024-04-01",
+    endDate: process.env.CAMPAIGN_END_DATE || "2024-04-26",
   },
 },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  HCM_CAMPAIGN_DATE: {
    campaignDates: {
      startDate: process.env.CAMPAIGN_START_DATE || "2024-04-01",
      endDate: process.env.CAMPAIGN_END_DATE || "2024-04-26",
    },
  },

---

8-33: 🛠️ Refactor suggestion

Multiple improvements needed in campaign type configuration

1. The hardcoded UUID (84e28a7b-8c6d-4505-a7ef-5d714e0361f6) should be managed through a proper ID system.
2. Dashboard URLs should be environment-aware.
3. Task procedure rules for bednet distribution are incomplete - they don't cover all possible household sizes.

 projectType: {
-  id: "84e28a7b-8c6d-4505-a7ef-5d714e0361f6",
+  id: process.env.CAMPAIGN_TYPE_ID,
   ...
   dashboardUrls: {
-    NATIONAL_SUPERVISOR: "/digit-ui/employee/dss/landing/national-health-dashboard",
-    PROVINCIAL_SUPERVISOR: "/digit-ui/employee/dss/dashboard/provincial-health-dashboard",
-    DISTRICT_SUPERVISOR: "/digit-ui/employee/dss/dashboard/district-health-dashboard",
+    NATIONAL_SUPERVISOR: `${process.env.DASHBOARD_BASE_URL}/national-health-dashboard`,
+    PROVINCIAL_SUPERVISOR: `${process.env.DASHBOARD_BASE_URL}/provincial-health-dashboard`,
+    DISTRICT_SUPERVISOR: `${process.env.DASHBOARD_BASE_URL}/district-health-dashboard`,
   },

Committable suggestion skipped: line range outside the PR's diff.

---

57-122: ⚠️ Potential issue

Multiple issues in delivery rules configuration

1. Age values need clarification:
   • 576 (possibly months = 48 years?)
   • 65 (presumably years)
2. Empty objects (delivery: {}, products: []) could cause runtime issues
3. Inconsistent active states between cycles might cause confusion

Consider these improvements:

1. Use consistent age units and add documentation
2. Remove empty objects or provide default values
3. Validate active states across cycles

 attributes: [
   {
     key: 1,
     attribute: {
       key: 1,
       code: "Age",
+      unit: "months", // Add units for clarity
     },
     operator: {
       key: 1,
       code: "LESS_THAN",
     },
-    value: "576",
+    value: "576", // 48 years in months
   },
 ],
-products: [],
+products: null, // or remove if not needed

Committable suggestion skipped: line range outside the PR's diff.

---

34-36: ⚠️ Potential issue

Replace test campaign name with a meaningful value

The campaign name "sdkfkdhsdjkhkjsdh" appears to be a placeholder or test value. This should be replaced with a meaningful name before deployment.

 HCM_CAMPAIGN_NAME: {
-  campaignName: "sdkfkdhsdjkhkjsdh",
+  campaignName: "LLIN Distribution Campaign 2024",
 },

Committable suggestion skipped: line range outside the PR's diff.

---

37-56: ⚠️ Potential issue

Fix cycle configuration date issues

The cycle configuration has several issues:

1. Date ranges span unusually long periods (2001-2011)
2. These dates are far in the past and inconsistent with the campaign dates
3. The date format should be validated to ensure consistency

Consider implementing date validation and using more realistic cycle periods:

 cycleData: [
   {
     key: 1,
-    fromDate: "2001-12-12",
-    toDate: "2002-11-11",
+    fromDate: "2024-04-01",
+    toDate: "2024-04-15",
   },
   {
     key: 2,
-    fromDate: "2002-01-12",
-    toDate: "2011-11-11",
+    fromDate: "2024-04-16",
+    toDate: "2024-04-26",
   },
 ],

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  HCM_CAMPAIGN_CYCLE_CONFIGURE: {
    cycleConfigure: {
      cycleConfgureDate: {
        cycle: 2,
        deliveries: 1,
      },
      cycleData: [
        {
          key: 1,
          fromDate: "2024-04-01",
          toDate: "2024-04-15",
        },
        {
          key: 2,
          fromDate: "2024-04-16",
          toDate: "2024-04-26",
        },
      ],
    },
  },

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/XlsPreview.js (4)

29-48: 🧹 Nitpick (assertive)

Extract inline styles to CSS classes.

The component contains multiple inline styles that should be moved to CSS for better maintainability and reusability.

Consider creating a separate CSS file with these styles:

-      <div style={{ display: "flex", justifyContent: "space-between", marginLeft: "2.5rem", marginRight: "2.5rem", marginTop: "2.5rem" }}>
+      <div className="campaign-preview-header">

Add a new CSS file with:

.campaign-preview-header {
  display: flex;
  justify-content: space-between;
  margin: 2.5rem 2.5rem 0;
}

---

17-28: 🛠️ Refactor suggestion

Add prop-types validation and error handling.

The component lacks proper prop validation and error handling for invalid file props.

Consider adding:

1. Prop-types validation
2. Error handling for invalid file props
3. Loading state handling

+import PropTypes from 'prop-types';
+
 function XlsPreview({ file, ...props }) {
   const { t } = useTranslation();
+  if (!file) {
+    return null;
+  }
+
   const documents = file
     ? [
         {
           fileType: "xlsx",
           fileName: file?.filename,
           uri: file?.url,
         },
       ]
     : null;
   // ... rest of the component
 }
+
+XlsPreview.propTypes = {
+  file: PropTypes.shape({
+    filename: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }),
+  onBack: PropTypes.func.isRequired,
+  onDownload: PropTypes.func.isRequired
+};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import PropTypes from 'prop-types';

function XlsPreview({ file, ...props }) {
  const { t } = useTranslation();
  if (!file) {
    return null;
  }

  const documents = file
    ? [
        {
          fileType: "xlsx",
          fileName: file?.filename,
          uri: file?.url,
        },
      ]
    : null;

XlsPreview.propTypes = {
  file: PropTypes.shape({
    filename: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
  }),
  onBack: PropTypes.func.isRequired,
  onDownload: PropTypes.func.isRequired
};

---

7-16: ⚠️ Potential issue

Add accessibility attributes to SVG component.

The SVG lacks proper accessibility attributes which makes it difficult for screen readers to interpret the content.

Apply this diff to improve accessibility:

 const ArrowBack = ({ className = "", height = "15", width = "15", styles = {} }) => {
   return (
-    <svg className={className} style={styles} width={width} height={height} viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg 
+      className={className} 
+      style={styles} 
+      width={width} 
+      height={height} 
+      viewBox="0 0 15 14" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Back button"
+    >
+      <title>Back Arrow</title>
       <path
         d="M14.1663 6.16658H4.02467L8.68301 1.50825L7.49967 0.333252L0.833008 6.99992L7.49967 13.6666L8.67467 12.4916L4.02467 7.83325H14.1663V6.16658Z"
         fill={PRIMARY_COLOR}
       />
     </svg>
   );
 };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const ArrowBack = ({ className = "", height = "15", width = "15", styles = {} }) => {
  return (
    <svg 
      className={className} 
      style={styles} 
      width={width} 
      height={height} 
      viewBox="0 0 15 14" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-label="Back button"
    >
      <title>Back Arrow</title>
      <path
        d="M14.1663 6.16658H4.02467L8.68301 1.50825L7.49967 0.333252L0.833008 6.99992L7.49967 13.6666L8.67467 12.4916L4.02467 7.83325H14.1663V6.16658Z"
        fill={PRIMARY_COLOR}
      />
    </svg>
  );
};

🧰 Tools

🪛 Biome (1.9.4)

[error] 9-9: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

---

49-64: 🛠️ Refactor suggestion

Consider adding error boundary and loading states.

The DocViewer component might fail to load or encounter errors while rendering documents.

Consider wrapping the DocViewer with an error boundary and adding loading states:

-      <div className="campaign-popup-module" style={{ marginTop: "1.5rem" }}>
+      <ErrorBoundary fallback={<div>{t("ERROR_LOADING_PREVIEW")}</div>}>
+        {documents ? (
         <DocViewer
           style={{ height: "80vh", overflowY: "hidden" }}
           theme={{
             primary: PRIMARY_COLOR,
             secondary: "#feefe7",
             tertiary: "#feefe7",
             textPrimary: "#0B0C0C",
             textSecondary: "#505A5F",
             textTertiary: "#00000099",
             disableThemeScrollbar: true,
           }}
           documents={documents}
           pluginRenderers={DocViewerRenderers}
+          config={{
+            header: {
+              disableHeader: true
+            }
+          }}
         />
+        ) : (
+          <div className="loading-preview">{t("LOADING_PREVIEW")}</div>
+        )}
+      </ErrorBoundary>
       </div>

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TimelineCampaign.js (4)

32-40: ⚠️ Potential issue

Improve accessibility and styling

The component needs accessibility improvements and better style management:

1. Add keyboard navigation support
2. Include ARIA labels
3. Move inline styles to CSS

Apply these improvements:

-    <div className="timeline-container" style={isMobile ? {} : { margin: "0 8px 15px" }}>
+    <div className="timeline-container" style={isMobile ? {} : { margin: "0 8px 15px" }} role="navigation" aria-label={t("TIMELINE_NAVIGATION")}>
       {actions.map((action, index, arr) => (
-        <div className="timeline-checkpoint"  style={{ cursor: 'pointer' }} key={index} onClick={() => onStepClick(index)}>
+        <div 
+          className="timeline-checkpoint" 
+          key={index}
+          role="button"
+          tabIndex={0}
+          aria-current={index === currentStep - 1 ? "step" : undefined}
+          onClick={() => onStepClick(index)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              onStepClick(index);
+            }
+          }}
+        >
           <div className="timeline-content">
-            <span className={`circle ${index <= currentStep - 1 && "active"}`}>{index < currentStep - 1 ? <TickMark /> : index + 1}</span>
+            <span className={`circle ${index <= currentStep - 1 ? "active" : ""}`} aria-hidden="true">
+              {index < currentStep - 1 ? <TickMark /> : index + 1}
+            </span>
             <span className="secondary-color">{t(action)}</span>
           </div>
-          {index < arr.length - 1 && <span className={`line ${index < currentStep - 1 && "active"}`}></span>}
+          {index < arr.length - 1 && <span className={`line ${index < currentStep - 1 ? "active" : ""}`} aria-hidden="true" />}
         </div>

Also, consider moving styles to a CSS file:

.timeline-container {
  /* Add your margin styles here */
}

.timeline-checkpoint {
  cursor: pointer;
}

/* Add other styles... */

🧰 Tools

🪛 Biome (1.9.4)

[error] 34-34: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

[error] 39-39: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

5-5: 🛠️ Refactor suggestion

Move actions array inside component scope

Declaring a mutable array outside the component can lead to unexpected behavior in React's rendering lifecycle and potential issues with concurrent rendering. Consider moving this declaration inside the component or managing it through state/context.

-let actions = [];

const TimelineCampaign = ({ currentStep = 1, flow = "" , onStepClick }) => {
+  let actions = [];
   const { t } = useTranslation();

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const TimelineCampaign = ({ currentStep = 1, flow = "" , onStepClick }) => {
  let actions = [];

---

27-29: 🧹 Nitpick (assertive)

Add PropTypes validation

Add prop-types validation to improve component documentation and runtime type checking.

+import PropTypes from 'prop-types';
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { TickMark } from "@egovernments/digit-ui-react-components";

 const TimelineCampaign = ({ currentStep = 1, flow = "" , onStepClick }) => {
   // ... component implementation ...
 };
+
+TimelineCampaign.propTypes = {
+  currentStep: PropTypes.number,
+  flow: PropTypes.string,
+  onStepClick: PropTypes.func.isRequired
+};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import PropTypes from 'prop-types';
import React from "react";
import { useTranslation } from "react-i18next";
import { TickMark } from "@egovernments/digit-ui-react-components";

const TimelineCampaign = ({ currentStep = 1, flow = "" , onStepClick }) => {
  const { t } = useTranslation();
  const isMobile = window.Digit.Utils.browser.isMobile();

TimelineCampaign.propTypes = {
  currentStep: PropTypes.number,
  flow: PropTypes.string,
  onStepClick: PropTypes.func.isRequired
};

---

7-26: 🛠️ Refactor suggestion

Refactor getAction for better maintainability and predictability

The current implementation has several concerns:

1. Side effects through mutation of external state
2. Hard-coded translation keys
3. No error handling for invalid flow values

Consider refactoring to a pure function approach:

-const getAction = (flow) => {
-  switch (flow) {
-    case "STAKEHOLDER":
-      actions = ["BPA_LICENSE_DETAILS_LABEL", "BPA_NEW_ADDRESS_HEADER_DETAILS", "BPA_DOC_DETAILS_SUMMARY", "BPA_STEPPER_SUMMARY_HEADER"];
-      break;
-    case "OCBPA":
-      actions = ["BPA_BASIC_AND_PLOT_DETAILS_LABEL", "BPA_SCRUTINY_DETAILS", "BPA_DOCUMENT_AND_NOC_DETAILS_LABEL", "BPA_STEPPER_SUMMARY_HEADER"];
-      break;
-    default:
-      actions = [
-        "HCM_CAMPAIGN_SETUP_DETAILS",
-        "HCM_DELIVERY_DETAILS",
-        "HCM_BOUNDARY_DETAILS",
-        "HCM_TARGETS",
-        "HCM_FACILITY_DETAILS",
-        "HCM_USER_DETAILS",
-        "HCM_REVIEW_DETAILS",
-      ];
-  }
-};
+const FLOW_ACTIONS = {
+  STAKEHOLDER: ["BPA_LICENSE_DETAILS_LABEL", "BPA_NEW_ADDRESS_HEADER_DETAILS", "BPA_DOC_DETAILS_SUMMARY", "BPA_STEPPER_SUMMARY_HEADER"],
+  OCBPA: ["BPA_BASIC_AND_PLOT_DETAILS_LABEL", "BPA_SCRUTINY_DETAILS", "BPA_DOCUMENT_AND_NOC_DETAILS_LABEL", "BPA_STEPPER_SUMMARY_HEADER"],
+  DEFAULT: [
+    "HCM_CAMPAIGN_SETUP_DETAILS",
+    "HCM_DELIVERY_DETAILS",
+    "HCM_BOUNDARY_DETAILS",
+    "HCM_TARGETS",
+    "HCM_FACILITY_DETAILS",
+    "HCM_USER_DETAILS",
+    "HCM_REVIEW_DETAILS",
+  ]
+};
+
+const getAction = (flow) => FLOW_ACTIONS[flow] || FLOW_ACTIONS.DEFAULT;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const FLOW_ACTIONS = {
  STAKEHOLDER: ["BPA_LICENSE_DETAILS_LABEL", "BPA_NEW_ADDRESS_HEADER_DETAILS", "BPA_DOC_DETAILS_SUMMARY", "BPA_STEPPER_SUMMARY_HEADER"],
  OCBPA: ["BPA_BASIC_AND_PLOT_DETAILS_LABEL", "BPA_SCRUTINY_DETAILS", "BPA_DOCUMENT_AND_NOC_DETAILS_LABEL", "BPA_STEPPER_SUMMARY_HEADER"],
  DEFAULT: [
    "HCM_CAMPAIGN_SETUP_DETAILS",
    "HCM_DELIVERY_DETAILS",
    "HCM_BOUNDARY_DETAILS",
    "HCM_TARGETS",
    "HCM_FACILITY_DETAILS",
    "HCM_USER_DETAILS",
    "HCM_REVIEW_DETAILS",
  ]
};

const getAction = (flow) => FLOW_ACTIONS[flow] || FLOW_ACTIONS.DEFAULT;

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js (6)

106-106: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

Template literals enhance readability and are preferred over string concatenation.

Apply this diff to use a template literal:

- <CardText style={{ margin: 0 }}>{t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT") + " "}</CardText>
+ <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT")} `}</CardText>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

              <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT")} `}</CardText>

🧰 Tools

🪛 Biome (1.9.4)

[error] 106-106: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

47-51: ⚠️ Potential issue

Prevent infinite re-renders by adding dependency array to useEffect

The useEffect hook without a dependency array runs on every render, potentially causing performance issues or infinite loops.

Apply this diff to include dependencies in the useEffect:

useEffect(() => {
  if (executionCount < 5) {
    onSelect("projectType", type);
    setExecutionCount((prevCount) => prevCount + 1);
  }
- });
+ }, [executionCount, onSelect, type]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    if (executionCount < 5) {
      onSelect("projectType", type);
      setExecutionCount((prevCount) => prevCount + 1);
    }
  }, [executionCount, onSelect, type]);

---

105-105: ⚠️ Potential issue

Add a unique key to the JSX element in the array

When rendering elements in an array, each element should have a unique key prop to help React identify changes.

Apply this diff to add a key prop:

- <div>
+ <div key="modal-text">
  <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT")} `}</CardText>
</div>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            <div key="modal-text">

🧰 Tools

🪛 Biome (1.9.4)

[error] 105-105: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

113-135: ⚠️ Potential issue

Add unique keys to elements in footerChildren array

Each element in the footerChildren array should have a unique key prop to prevent potential issues during reconciliation.

Apply this diff to add key props:

footerChildren={[
+ <Button
+   key="back-button"
    className={"campaign-type-alert-button"}
    type={"button"}
    size={"large"}
    variation={"secondary"}
    label={t("ES_CAMPAIGN_BOUNDARY_MODAL_BACK")}
    onClick={() => {
      setShowPopUp(false);
      setCanUpdate(true);
    }}
  />,
+ <Button
+   key="submit-button"
    className={"campaign-type-alert-button"}
    type={"button"}
    size={"large"}
    variation={"primary"}
    label={t("ES_CAMPAIGN_BOUNDARY_MODAL_SUBMIT")}
    onClick={() => {
      setShowPopUp(false);
      setCanUpdate(false);
    }}
  />,
]}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            <Button
              key="back-button"
              className={"campaign-type-alert-button"}
              type={"button"}
              size={"large"}
              variation={"secondary"}
              label={t("ES_CAMPAIGN_BOUNDARY_MODAL_BACK")}
              onClick={() => {
                setShowPopUp(false);
                setCanUpdate(true);
              }}
            />,
            <Button
              key="submit-button"
              className={"campaign-type-alert-button"}
              type={"button"}
              size={"large"}
              variation={"primary"}
              label={t("ES_CAMPAIGN_BOUNDARY_MODAL_SUBMIT")}
              onClick={() => {
                setShowPopUp(false);
                setCanUpdate(false);
              }}
            />,
          ]}

🧰 Tools

🪛 Biome (1.9.4)

[error] 113-123: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 124-134: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

61-77: ⚠️ Potential issue

Improve keyboard accessibility by adding corresponding keyboard event handlers

The div element with onClick handlers should have corresponding keyboard event handlers to ensure accessibility for users who navigate using the keyboard alone.

Apply this diff to add onKeyDown event handlers:

<div
  className="campaign-type-wrapper"
  onClick={(e) => {
    if (props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType && !canUpdate) {
      setShowPopUp(true);
      return;
    }
    return;
  }}
+ onKeyDown={(e) => {
+   if (e.key === 'Enter' || e.key === ' ') {
+     if (props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType && !canUpdate) {
+       setShowPopUp(true);
+       return;
+     }
+     return;
+   }
+ }}
  tabIndex={0}
>

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 61-77: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

100-137: 🛠️ Refactor suggestion

Refactor PopUp component to pass children as JSX elements

Passing children as a prop is not recommended. Instead, include children between the opening and closing tags of the PopUp component.

Apply this diff to refactor the PopUp usage:

<PopUp
  className={"boundaries-pop-module"}
  type={"default"}
- heading={t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_HEADER")}
- children={[
-   <div>
-     <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT")} `}</CardText>
-   </div>,
- ]}
  onOverlayClick={() => {
    setShowPopUp(false);
  }}
  footerChildren={[
    <Button
      className={"campaign-type-alert-button"}
      type={"button"}
      size={"large"}
      variation={"secondary"}
      label={t("ES_CAMPAIGN_BOUNDARY_MODAL_BACK")}
      onClick={() => {
        setShowPopUp(false);
        setCanUpdate(true);
      }}
    />,
    <Button
      className={"campaign-type-alert-button"}
      type={"button"}
      size={"large"}
      variation={"primary"}
      label={t("ES_CAMPAIGN_BOUNDARY_MODAL_SUBMIT")}
      onClick={() => {
        setShowPopUp(false);
        setCanUpdate(false);
      }}
    />,
  ]}
  sortFooterChildren={true}
>
+ <Header>{t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_HEADER")}</Header>
+ <div>
+   <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT")} `}</CardText>
+ </div>
</PopUp>

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 100-137: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

---

[error] 106-106: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

[error] 104-104: Avoid passing children using a prop

The canonical way to pass children in React is to use JSX elements

(lint/correctness/noChildrenProp)

---

[error] 105-105: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 113-123: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 124-134: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/deliveryConfig.js (2)

68-79: ⚠️ Potential issue

Duplicate key values in productConfig arrays

Multiple products within the productConfig arrays have the same key value of 1. This could lead to issues in rendering or data handling where unique keys are expected. Please ensure that key values are unique within each productConfig array.

Example diff to update key values:

...
            productConfig: [
              {
-               key: 1,
+               key: 1,
                count: 1,
                value: "PVAR-2024-01-24-000079",
                name: "AQ - 75mg",
              },
              {
-               key: 1,
+               key: 2,
                count: 1,
                value: "PVAR-2024-05-03-000305",
                name: "SP - 250mg",
              },
            ],
...

Apply similar changes to other productConfig arrays to ensure keys are unique.

Also applies to: 97-102, 124-129, 146-151, 173-178, 195-200

---

106-154: 🧹 Nitpick (assertive)

Refactor repeated delivery configurations to improve maintainability

The configurations for deliveries 2 and 3 under projectType: "MR-DN" are nearly identical, with only the delivery number changing. Consider refactoring these configurations to reduce code duplication, such as using a function or loop to generate the delivery configurations dynamically.

Also applies to: 156-203

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/XlsxFile.js (3)

3-3: 🛠️ Refactor suggestion

Remove unused props or apply them to the SVG element.

The component declares fill and style props but doesn't utilize them. Either:

• Remove these unused props, or
• Apply them to the SVG element

-export const XlsxFile = ({ className = "", fill = "none", style = {} }) => (
+export const XlsxFile = ({ className = "" }) => (

Or if the props are needed:

-export const XlsxFile = ({ className = "", fill = "none", style = {} }) => (
-  <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+export const XlsxFile = ({ className = "", fill = "none", style = {} }) => (
+  <svg width="38" height="38" viewBox="0 0 38 38" fill={fill} xmlns="http://www.w3.org/2000/svg" className={className} style={style}>

Committable suggestion skipped: line range outside the PR's diff.

---

4-4: ⚠️ Potential issue

Add accessibility attributes to the SVG.

The SVG lacks accessibility attributes which makes it difficult for screen readers to interpret. Add a title element and appropriate ARIA attributes.

-  <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+  <svg 
+    width="38" 
+    height="38" 
+    viewBox="0 0 38 38" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg" 
+    className={className}
+    role="img"
+    aria-labelledby="xlsxFileTitle"
+  >
+    <title id="xlsxFileTitle">Excel XLSX File</title>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  <svg 
    width="38" 
    height="38" 
    viewBox="0 0 38 38" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg" 
    className={className}
    role="img"
    aria-labelledby="xlsxFileTitle"
  >
    <title id="xlsxFileTitle">Excel XLSX File</title>

🧰 Tools

🪛 Biome (1.9.4)

[error] 4-4: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

---

5-30: 🧹 Nitpick (assertive)

Improve SVG maintainability with semantic grouping.

Consider grouping related SVG paths using <g> elements for better maintainability and organization. This will make it easier to update specific parts of the icon in the future.

+    <g id="border">
     <path d="M5.5 31.0801H3L5.5 33.5801V31.0801Z" fill="#006C36" />
     <path d="M32.8008 31.0801H35.3008L32.8008 33.5801V31.0801Z" fill="#006C36" />
+    </g>
+    <g id="background">
     <path
       d="M6.35357 2.21162C6.91188 1.59227 7.66322 1.25 8.44042 1.25H25.9133L32.83 8.92294V33.0872C32.83 33.9743 32.5121 34.8206 31.953 35.4408C31.3947 36.0601 30.6434 36.4024 29.8661 36.4024H8.44042C7.66322 36.4024 6.91188 36.0601 6.35357 35.4408C5.79448 34.8206 5.47656 33.9743 5.47656 33.0872V4.56524C5.47656 3.67809 5.79448 2.83184 6.35357 2.21162Z"
       fill="#EBFAF3"
       stroke="#00A251"
       stroke-width="0.5"
     />
+    </g>
+    <g id="text">
     <!-- Rest of the paths for the text -->
+    </g>

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (6)

6-6: ⚠️ Potential issue

Inconsistent access of props object.

The props object is being inconsistently accessed throughout the component. In line 6, props is destructured as { onSelect, formData, ...props }, but later accessed using props?.props. This can lead to confusion and potential errors.

Consider refactoring to ensure consistent and clear usage of props. For example, avoid accessing props.props and adjust the destructuring accordingly.

---

29-39: 🛠️ Refactor suggestion

Error handling logic may not cover all cases.

In the useEffect hook, the error handling for form submission checks multiple conditions, but may not cover cases where only one of startDate or endDate is missing.

Review and adjust the conditional statements to ensure all scenarios are handled correctly, including cases where one date is present, and the other is missing.

---

90-110: 🧹 Nitpick (assertive)

Duplicate min attribute in date fields.

Both the populators.validation.min and the min prop are set for the FieldV1 components. This may be redundant or cause conflicts.

Consider removing one of the min specifications to simplify the code. If populators.validation.min suffices for validation, you can remove the min prop.

---

90-110: 🧹 Nitpick (assertive)

Hardcoded date offsets may cause user experience issues.

The min dates for the start date and end date are set to Date.now() + ONE_DAY_IN_MS and Date.now() + 2 * ONE_DAY_IN_MS, respectively. This restricts users from selecting today's date or dates within the next day.

Re-evaluate the requirement for date offsets. If users should be able to select today's date or if the offsets should be configurable, adjust the values accordingly.

---

57-62: 🛠️ Refactor suggestion

Potential unnecessary execution of onSelect.

The useEffect hook runs on every render and increments executionCount, calling onSelect multiple times even when dependencies haven't changed.

Add a dependency array to the useEffect to control when it runs. If you intend it to run on initial mount, you can use an empty dependency array [].

useEffect(() => {
  if (executionCount < 5) {
    onSelect("campaignDates", { startDate: startDate, endDate: endDate });
    setExecutionCount((prevCount) => prevCount + 1);
  }
-});
+}, [executionCount, onSelect, startDate, endDate]);

Alternatively, reconsider whether this effect is necessary.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  useEffect(() => {
    if (executionCount < 5) {
      onSelect("campaignDates", { startDate: startDate, endDate: endDate });
      setExecutionCount((prevCount) => prevCount + 1);
    }
  }, [executionCount, onSelect, startDate, endDate]);

---

41-55: ⚠️ Potential issue

Validation logic depends on startValidation not set for start date changes.

The startValidation flag is used to control when validation errors are displayed, but it is only set to true when the end date changes (line 112). This means validation may not trigger when the start date is changed.

Uncomment the setStartValidation(true); line in the onChange handler for the start date (line 95) to ensure validation runs when the start date changes.

onChange={(d) => {
-  // setStartValidation(true);
+  setStartValidation(true);
   setStart(d);
}}

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)

89-109: 🧹 Nitpick (assertive)

Use forEach instead of map for iterating over keys with side effects.

The overrideHooks function uses map to iterate over object keys but does not utilize the returned array from map. This is not the intended use of map.

Replace map with forEach for better semantics and clarity.

-Object.keys(CustomisedHooks).map((ele) => {
+Object.keys(CustomisedHooks).forEach((ele) => {
  // ...
-  Object.keys(CustomisedHooks[ele]).map((hook) => {
+  Object.keys(CustomisedHooks[ele]).forEach((hook) => {
    // ...
-    Object.keys(CustomisedHooks[ele][hook]).map((method) => {
+    Object.keys(CustomisedHooks[ele][hook]).forEach((method) => {
      //...
    });
  });
});

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const overrideHooks = () => {
  Object.keys(CustomisedHooks).forEach((ele) => {
    if (ele === "Hooks") {
      Object.keys(CustomisedHooks[ele]).forEach((hook) => {
        Object.keys(CustomisedHooks[ele][hook]).forEach((method) => {
          setupHooks(hook, method, CustomisedHooks[ele][hook][method]);
        });
      });
    } else if (ele === "Utils") {
      Object.keys(CustomisedHooks[ele]).forEach((hook) => {
        Object.keys(CustomisedHooks[ele][hook]).forEach((method) => {
          setupHooks(hook, method, CustomisedHooks[ele][hook][method], false);
        });
      });
    } else {
      Object.keys(CustomisedHooks[ele]).forEach((method) => {
        setupLibraries(ele, method, CustomisedHooks[ele][method]);
      });
    }
  });
};

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DSSCard.js (4)

81-81: 🧹 Nitpick (assertive)

Use const instead of let for links variable.

Similarly, in the DSSCard component, links is not reassigned.

Change let to const.

-let links = Object.values(nationalScreenURLs)
+const links = Object.values(nationalScreenURLs)
  .filter((ele) => ele["active"] === true)
  .map((obj) => ({ /* ... */ }));

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 81-81: This let declares a variable that is only assigned once.

'links' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

---

118-118: 🧹 Nitpick (assertive)

Use const instead of let for links variable.

In the DynamicDSSCard component, links is initialized but not reassigned.

Change let to const.

-let links = [];
+const links = [];

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    const links = [];

🧰 Tools

🪛 Biome (1.9.4)

[error] 118-118: This let declares a variable that is only assigned once.

'links' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

---

41-41: 🧹 Nitpick (assertive)

Use const instead of let for links variable.

The links variable is not reassigned after its initial assignment.

Change let to const for clarity and to prevent accidental reassignment.

-let links = Object.values(nationalScreenURLs)
+const links = Object.values(nationalScreenURLs)
  .filter((ele) => ele["nActive"] === true)
  .map((obj) => ({ /* ... */ }));

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 41-41: This let declares a variable that is only assigned once.

'links' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

---

45-46: ⚠️ Potential issue

Duplicate link property in link object.

The link property is defined twice in the object literal (lines 45-46), which results in the first link property being overwritten.

Remove the duplicate property to prevent unintended behavior.

{
  label: t(obj?.label),
- link: `/digit-ui/employee/dss/dashboard/${obj?.key}`,
  link: obj?.others ? `/digit-ui/employee/dss/${obj?.key}` : `/digit-ui/employee/dss/dashboard/${obj?.key}`,
}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

      link: obj?.others?`/digit-ui/employee/dss/${obj?.key}`:`/digit-ui/employee/dss/dashboard/${obj?.key}`,

🧰 Tools

🪛 Biome (1.9.4)

[error] 45-45: This property value named link is later overwritten by an object member with the same name.

Overwritten with this value.

If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property value named link

(lint/suspicious/noDuplicateObjectKeys)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/UICustomizations.js (10)

76-78: ⚠️ Potential issue

Duplicate getCustomActionLabel property in MyCampaignConfigOngoing.

The getCustomActionLabel property is defined twice within the same object, causing the first definition to be overwritten.

Remove the duplicate property or merge them to ensure only one definition exists.

Also applies to: 104-106

🧰 Tools

🪛 Biome (1.9.4)

[error] 76-78: This property value named getCustomActionLabel is later overwritten by an object member with the same name.

Overwritten with this value.

If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property value named getCustomActionLabel

(lint/suspicious/noDuplicateObjectKeys)

---

132-134: 🧹 Nitpick (assertive)

Avoid using delete operator on objects.

Similar to earlier, the delete operator is used.

Consider setting properties to undefined or omitting them when creating the object.

🧰 Tools

🪛 Biome (1.9.4)

[error] 132-132: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 133-133: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 134-134: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

167-169: ⚠️ Potential issue

Duplicate getCustomActionLabel property in MyCampaignConfigCompleted.

The getCustomActionLabel property is duplicated, leading to overwritten definitions.

Ensure only one getCustomActionLabel exists within the object.

Also applies to: 195-197

🧰 Tools

🪛 Biome (1.9.4)

[error] 167-169: This property value named getCustomActionLabel is later overwritten by an object member with the same name.

Overwritten with this value.

If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property value named getCustomActionLabel

(lint/suspicious/noDuplicateObjectKeys)

---

224-226: 🧹 Nitpick (assertive)

Avoid using delete operator on objects.

Repeated use of delete can degrade performance.

Modify the code to avoid using delete.

🧰 Tools

🪛 Biome (1.9.4)

[error] 224-224: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 225-225: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 226-226: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

259-261: ⚠️ Potential issue

Duplicate getCustomActionLabel property in MyCampaignConfigUpcoming.

There are multiple definitions of getCustomActionLabel in the same object.

Consolidate the definitions to prevent unexpected behavior.

Also applies to: 287-289

🧰 Tools

🪛 Biome (1.9.4)

[error] 259-261: This property value named getCustomActionLabel is later overwritten by an object member with the same name.

Overwritten with this value.

If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property value named getCustomActionLabel

(lint/suspicious/noDuplicateObjectKeys)

---

314-317: 🧹 Nitpick (assertive)

Avoid using delete operator on objects.

For better performance and to prevent de-optimization, avoid using delete.

Set properties to undefined instead.

🧰 Tools

🪛 Biome (1.9.4)

[error] 314-314: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 315-315: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 316-316: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 317-317: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

350-352: ⚠️ Potential issue

Duplicate getCustomActionLabel property in MyCampaignConfigDrafts.

Multiple definitions of getCustomActionLabel are present.

Remove the duplicates to maintain a single source of truth.

Also applies to: 378-380

🧰 Tools

🪛 Biome (1.9.4)

[error] 350-352: This property value named getCustomActionLabel is later overwritten by an object member with the same name.

Overwritten with this value.

If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property value named getCustomActionLabel

(lint/suspicious/noDuplicateObjectKeys)

---

405-407: 🧹 Nitpick (assertive)

Avoid using delete operator on objects.

Again, consider alternatives to delete for better performance.

Adjust the code accordingly.

🧰 Tools

🪛 Biome (1.9.4)

[error] 405-405: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 406-406: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 407-407: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

440-442: ⚠️ Potential issue

Duplicate getCustomActionLabel property in MyCampaignConfigFailed.

The getCustomActionLabel property is repeated, causing overwrites.

Ensure only one definition exists to avoid confusion.

Also applies to: 468-470

🧰 Tools

🪛 Biome (1.9.4)

[error] 440-442: This property value named getCustomActionLabel is later overwritten by an object member with the same name.

Overwritten with this value.

If an object property with the same name is defined multiple times (except when combining a getter with a setter), only the last definition makes it into the object and previous definitions are ignored.
Unsafe fix: Remove this property value named getCustomActionLabel

(lint/suspicious/noDuplicateObjectKeys)

---

41-43: 🧹 Nitpick (assertive)

Avoid using delete operator on objects.

Using delete on object properties can negatively impact performance due to de-optimizations in JavaScript engines.

Instead of deleting properties, set them to undefined or create a new object without those properties.

-delete data.body.custom;
-delete data.body.inbox;
-delete data.params;
+data.body.custom = undefined;
+data.body.inbox = undefined;
+data.params = undefined;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

      data.body.custom = undefined;
      data.body.inbox = undefined;
      data.params = undefined;

🧰 Tools

🪛 Biome (1.9.4)

[error] 41-41: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 42-42: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

---

[error] 43-43: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js (12)

41-41: 🧹 Nitpick (assertive)

Use const instead of let for variables not reassigned

The variable newArray is never reassigned. Use const instead of let for better code clarity and to prevent accidental reassignments.

Apply this diff:

- let newArray = [];
+ const newArray = [];

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const newArray = [];

🧰 Tools

🪛 Biome (1.9.4)

[error] 41-41: This let declares a variable that is only assigned once.

'newArray' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

---

214-214: 🧹 Nitpick (assertive)

Use const instead of let for variables not reassigned

The variable temp is never reassigned. Use const instead of let for better code clarity and to prevent accidental reassignments.

Apply this diff:

- let temp = await fetchResourceFile(tenantId, resourceIdArr);
+ const temp = await fetchResourceFile(tenantId, resourceIdArr);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

          const temp = await fetchResourceFile(tenantId, resourceIdArr);

🧰 Tools

🪛 Biome (1.9.4)

[error] 214-214: This let declares a variable that is only assigned once.

'temp' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

---

400-400: 🧹 Nitpick (assertive)

Simplify boolean expression

The ternary operator id ? true : false is unnecessary. You can directly assign the boolean value of id.

Apply this diff to simplify the code:

- enabled: id ? true : false,
+ enabled: !!id,

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

      enabled: !!id,

🧰 Tools

🪛 Biome (1.9.4)

[error] 400-400: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

---

363-364: ⚠️ Potential issue

Fix unsafe optional chaining to prevent runtime errors

The use of optional chaining in data?.[0]?.deliveryRules.map(...) could result in a TypeError if data[0] is undefined. Ensure that data[0]?.deliveryRules is defined before calling map on it.

Apply this diff to safely handle undefined scenarios:

- data?.[0]?.deliveryRules.map((item) => item.deliveryNumber)
+ data?.[0]?.deliveryRules ? data[0].deliveryRules.map((item) => item.deliveryNumber) : []

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                        ? Math.max(...(data?.[0]?.deliveryRules ? data[0].deliveryRules.map((item) => item.deliveryNumber) : []))
                        : t("CAMPAIGN_SUMMARY_NA"),

🧰 Tools

🪛 Biome (1.9.4)

[error] 363-363: Unsafe usage of optional chaining.

If it short-circuits with 'undefined' the evaluation will throw TypeError here:

(lint/correctness/noUnsafeOptionalChaining)

---

269-272: 🛠️ Refactor suggestion

Add keyboard event handlers for accessibility

The onClick event handler on the <div> should be accompanied by keyboard event handlers like onKeyUp, onKeyDown, or onKeyPress to support keyboard-only navigation and improve accessibility.

Apply this diff:

<div className="campaign-preview-edit-container" onClick={() => handleRedirect(7)}
+     onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(7); }}
+     tabIndex="0">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(7)}
                         onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(7); }}
                         tabIndex="0">
                      <span>{t(`CAMPAIGN_EDIT`)}</span>
                      <EditIcon />
                    </div>

🧰 Tools

🪛 Biome (1.9.4)

[error] 269-269: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

315-318: 🛠️ Refactor suggestion

Add keyboard event handlers for accessibility

The onClick event handler on the <div> should be accompanied by keyboard event handlers like onKeyUp, onKeyDown, or onKeyPress to support keyboard-only navigation and improve accessibility.

Apply this diff:

<div className="campaign-preview-edit-container" onClick={() => handleRedirect(9)}
+     onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(9); }}
+     tabIndex="0">

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 315-315: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

356-357: ⚠️ Potential issue

Fix unsafe optional chaining to prevent runtime errors

The use of optional chaining in data?.[0]?.deliveryRules.map(...) could result in a TypeError if data[0] is undefined. Ensure that data[0]?.deliveryRules is defined before calling map on it.

Apply this diff to safely handle undefined scenarios:

- data?.[0]?.deliveryRules.map((item) => item.cycleNumber)
+ data?.[0]?.deliveryRules ? data[0].deliveryRules.map((item) => item.cycleNumber) : []

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                        ? Math.max(...(data?.[0]?.deliveryRules ? data[0].deliveryRules.map((item) => item.cycleNumber) : []))
                        : t("CAMPAIGN_SUMMARY_NA"),

🧰 Tools

🪛 Biome (1.9.4)

[error] 356-356: Unsafe usage of optional chaining.

If it short-circuits with 'undefined' the evaluation will throw TypeError here:

(lint/correctness/noUnsafeOptionalChaining)

---

292-295: 🛠️ Refactor suggestion

Add keyboard event handlers for accessibility

The onClick event handler on the <div> should be accompanied by keyboard event handlers like onKeyUp, onKeyDown, or onKeyPress to support keyboard-only navigation and improve accessibility.

Apply this diff:

<div className="campaign-preview-edit-container" onClick={() => handleRedirect(8)}
+     onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(8); }}
+     tabIndex="0">

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 292-292: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

380-383: 🛠️ Refactor suggestion

Add keyboard event handlers for accessibility

The onClick event handler on the <div> should be accompanied by keyboard event handlers like onKeyUp, onKeyDown, or onKeyPress to support keyboard-only navigation and improve accessibility.

Apply this diff:

<div className="campaign-preview-edit-container" onClick={() => handleRedirect(5)}
+     onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(5); }}
+     tabIndex="0">

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 380-380: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

229-232: 🛠️ Refactor suggestion

Add keyboard event handlers for accessibility

The onClick event handler on the <div> should be accompanied by keyboard event handlers like onKeyUp, onKeyDown, or onKeyPress to support keyboard-only navigation and improve accessibility.

Apply this diff to include keyboard event handlers:

<div className="campaign-preview-edit-container" onClick={() => handleRedirect(1)}
+     onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(1); }}
+     tabIndex="0">

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 229-229: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

346-349: 🛠️ Refactor suggestion

Add keyboard event handlers for accessibility

The onClick event handler on the <div> should be accompanied by keyboard event handlers like onKeyUp, onKeyDown, or onKeyPress to support keyboard-only navigation and improve accessibility.

Apply this diff:

<div className="campaign-preview-edit-container" onClick={() => handleRedirect(5)}
+     onKeyPress={(e) => { if (e.key === 'Enter') handleRedirect(5); }}
+     tabIndex="0">

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 346-346: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

370-393: ⚠️ Potential issue

Ensure cycleData is defined before mapping

Using cycleData?.map(...) can result in a TypeError if cycleData is undefined. Ensure that cycleData has a default value or handle the case when it's undefined.

Apply this diff to handle undefined cycleData:

- ...cycleData?.map((item, index) => {
+ ...(cycleData || []).map((item, index) => {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            ...(cycleData || []).map((item, index) => {
              return {
                name: `CYCLE_${index + 1}`,
                errorName: "deliveryErrors",
                sections: [
                  {
                    name: `CYCLE_${index + 1}`,
                    type: "COMPONENT",
                    cardHeader: { value: `${t("CYCLE")} ${item?.cycleIndex}`, inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
                    cardSecondaryAction: noAction !== "false" && (
                      <div className="campaign-preview-edit-container" onClick={() => handleRedirect(5)}>
                        <span>{t(`CAMPAIGN_EDIT`)}</span>
                        <EditIcon />
                      </div>
                    ),
                    component: "CycleDataPreview",
                    props: {
                      data: item,
                    },
                  },
                ],
              };
            }),
          ],

🧰 Tools

🪛 Biome (1.9.4)

[error] 370-370: Unsafe usage of optional chaining.

If it short-circuits with 'undefined' the evaluation will throw TypeError here:

(lint/correctness/noUnsafeOptionalChaining)

---

[error] 380-380: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundaries.js (4)

554-554: 🧹 Nitpick (assertive)

Prefer template literals over string concatenation

Consider using template literals instead of string concatenation for better readability.

Apply this diff:

- <CardText style={{ margin: 0 }}>{t("ES_CAMPAIGN_UPDATE_BOUNDARY_MODAL_TEXT") + " "}</CardText>
+ <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_BOUNDARY_MODAL_TEXT")} `}</CardText>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

              <CardText style={{ margin: 0 }}>{`${t("ES_CAMPAIGN_UPDATE_BOUNDARY_MODAL_TEXT")} `}</CardText>

🧰 Tools

🪛 Biome (1.9.4)

[error] 554-554: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

352-352: 🧹 Nitpick (assertive)

Use Object.hasOwn() instead of hasOwnProperty

To avoid prototype pollution and improve code safety, use Object.hasOwn() instead of hasOwnProperty when checking for properties.

Apply this diff:

- if (type !== boundary?.boundaryType && updatedBoundaryData?.hasOwnProperty(type)) {
+ if (type !== boundary?.boundaryType && Object.hasOwn(updatedBoundaryData, type)) {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

          if (type !== boundary?.boundaryType && Object.hasOwn(updatedBoundaryData, type)) {

🧰 Tools

🪛 Biome (1.9.4)

[error] 352-352: Do not access Object.prototype method 'hasOwnProperty' from target object.

It's recommended using Object.hasOwn() instead of using Object.hasOwnProperty().
See MDN web docs for more details.

(lint/suspicious/noPrototypeBuiltins)

---

497-497: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

For better readability, consider using template literals.

Apply this diff:

- {t((hierarchy + "_" + boundary?.boundaryType).toUpperCase())}
+ {t(`${hierarchy}_${boundary?.boundaryType}`.toUpperCase())}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                    {t(`${hierarchy}_${boundary?.boundaryType}`.toUpperCase())}

🧰 Tools

🪛 Biome (1.9.4)

[error] 497-497: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

474-474: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

For better readability, consider using template literals.

Apply this diff:

- {t((hierarchy + "_" + boundary?.boundaryType).toUpperCase())}
+ {t(`${hierarchy}_${boundary?.boundaryType}`.toUpperCase())}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                    {t(`${hierarchy}_${boundary?.boundaryType}`.toUpperCase())}

🧰 Tools

🪛 Biome (1.9.4)

[error] 474-474: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js (5)

77-77: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

Consider using template literals for better readability.

Apply this diff:

- documentType: action?.action + " DOC",
+ documentType: `${action?.action} DOC`,

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            documentType: `${action?.action} DOC`,

🧰 Tools

🪛 Biome (1.9.4)

[error] 77-77: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

127-127: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

Consider using template literals for better readability.

Apply this diff:

- documentType: action?.action + " DOC",
+ documentType: `${action?.action} DOC`,

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            documentType: `${action?.action} DOC`,

🧰 Tools

🪛 Biome (1.9.4)

[error] 127-127: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

102-102: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

Consider using template literals for better readability.

Apply this diff:

- documentType: action?.action + " DOC",
+ documentType: `${action?.action} DOC`,

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            documentType: `${action?.action} DOC`,

🧰 Tools

🪛 Biome (1.9.4)

[error] 102-102: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

---

9-9: 🧹 Nitpick (assertive)

Use const instead of var to declare Digit

Using const or let is preferred over var to limit the scope of the variable and to avoid hoisting issues.

Apply this diff:

- var Digit = window.Digit || {};
+ const Digit = window.Digit || {};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const Digit = window.Digit || {};

🧰 Tools

🪛 Biome (1.9.4)

[error] 8-9: Use let or const instead of var.

A variable declared with var is accessible in the whole module. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.

(lint/style/noVar)

---

152-152: 🧹 Nitpick (assertive)

Use template literals instead of string concatenation

Consider using template literals for better readability.

Apply this diff:

- documentType: action?.action + " DOC",
+ documentType: `${action?.action} DOC`,

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            documentType: `${action?.action} DOC`,

🧰 Tools

🪛 Biome (1.9.4)

[error] 152-152: Template literals are preferred over string concatenation.

Unsafe fix: Use a template literal.

(lint/style/useTemplate)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)

83-85: 🧹 Nitpick (assertive)

Use let or const instead of var

Using let or const is preferred over var to limit the scope of variables and avoid hoisting issues.

Apply this diff:

- var translateSchema = (schema) => {
-   var newSchema = { ...schema };
-   var newProp = {};
+ const translateSchema = (schema) => {
+   const newSchema = { ...schema };
+   const newProp = {};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const translateSchema = (schema) => {
    const newSchema = { ...schema };
    const newProp = {};

🧰 Tools

🪛 Biome (1.9.4)

[error] 83-105: Use let or const instead of var.

A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.

(lint/style/noVar)

---

[error] 84-84: Use let or const instead of var.

A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.

(lint/style/noVar)

---

[error] 85-85: Use let or const instead of var.

A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.

(lint/style/noVar)

health/micro-ui/Jenkinsfile (2)

3-3: 🧹 Nitpick (assertive)

Document pipeline configuration

Consider adding comments to document:

• The purpose of this pipeline
• Required permissions/credentials
• Expected build stages

 library 'ci-libs'
 
+// Pipeline for building and deploying health micro-ui
+// Required credentials: docker-registry, npm-token
+// Stages: build -> test -> deploy
 buildPipeline(configFile: './build/build-config.yml')

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

library 'ci-libs'

// Pipeline for building and deploying health micro-ui
// Required credentials: docker-registry, npm-token
// Stages: build -> test -> deploy
buildPipeline(configFile: './build/build-config.yml')

---

1-2: 💡 Codebase verification

Version pinning recommended for ci-libs library

The ci-libs library is imported without version specification, which could lead to unexpected behavior if the library is updated. The build configuration file is properly referenced and contains valid build configurations, but the library versioning needs attention.

• Add version pinning to the library import in health/micro-ui/Jenkinsfile, e.g., library '[email protected]'
• Consider documenting the required version of ci-libs in the project documentation

🔗 Analysis chain

Verify the ci-libs library source and version

The external CI library dependency should be properly versioned to ensure build stability and security.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if build config exists and verify ci-libs usage
fd -t f "build-config.yml" --exec echo "Build config found at: {}"

Length of output: 114

---

Script:

#!/bin/bash
# Check the content of build-config.yml for ci-libs configuration
cat ./build/build-config.yml

Length of output: 2957

---

Script:

#!/bin/bash
# Check for any shared Jenkins library configuration files
fd -t f "jenkins.libraries" "jenkins-shared-library" "jenkins.lib" --exec echo "Jenkins library config found at: {}"

# Look for any version pinning in the Jenkinsfile
rg -A 3 "library ['\"](ci-libs|jenkins-shared-library)" health/micro-ui/Jenkinsfile

Length of output: 441

health/micro-ui/web/.babelrc (1)

1-5: 🧹 Nitpick (assertive)

Enhance Babel configuration with environment-specific settings

While the basic presets are good, consider enhancing the configuration for better optimization and development experience.

 {
     "presets": [
-      "@babel/preset-env","@babel/preset-react"
+      ["@babel/preset-env", {
+        "targets": {
+          "browsers": [">0.25%", "not ie 11", "not op_mini all"]
+        }
+      }],
+      ["@babel/preset-react", {
+        "development": process.env.NODE_ENV === "development"
+      }]
     ]
   }

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/mailConfig.js (1)

1-4: 🧹 Nitpick (assertive)

⚠️ Potential issue

Critical: Move sensitive email configuration to environment variables

Hardcoding email addresses in source code poses several risks:

• Security concerns with exposing internal email addresses
• Difficulty in maintaining different configurations across environments
• Potential PII exposure

Consider refactoring to use environment variables:

-export const mailConfig = 
-    {
-      mailId: "[email protected]"
-    };
+export const mailConfig = {
+  mailId: process.env.REACT_APP_CAMPAIGN_SUPPORT_EMAIL
+};

Also, ensure to:

1. Add this variable to your environment configuration
2. Document the required environment variables
3. Add a validation check for required configuration

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/baseTimeOut.js (1)

1-5: 🛠️ Refactor suggestion

Improve naming and documentation of timeout configuration

The current implementation has several areas for improvement:

1. Property name conflicts with object name
2. Missing documentation for timeout values
3. Could use destructuring for cleaner exports

Consider applying these changes:

-export const baseTimeOut = 
-    {
-      baseTimeOut: 100,
-      maxTime: 5000
-    };
+/**
+ * Timeout configuration for campaign manager operations
+ * @property {number} defaultTimeout - Base timeout in milliseconds for standard operations
+ * @property {number} maxTimeout - Maximum timeout in milliseconds for long-running operations
+ */
+export const timeoutConfig = {
+  defaultTimeout: 100,
+  maxTimeout: 5000
+};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

/**
 * Timeout configuration for campaign manager operations
 * @property {number} defaultTimeout - Base timeout in milliseconds for standard operations
 * @property {number} maxTimeout - Maximum timeout in milliseconds for long-running operations
 */
export const timeoutConfig = {
  defaultTimeout: 100,
  maxTimeout: 5000
};

health/micro-ui/web/.env.sample (1)

1-3: 🛠️ Refactor suggestion

Enhance environment variable documentation and security

The environment sample file should provide better guidance and security practices:

1. Development URLs shouldn't be exposed in sample files
2. Missing documentation for variable purposes
3. No validation rules or format specifications

Consider updating the file like this:

-SKIP_PREFLIGHT_CHECK=true
-REACT_APP_STATE_LEVEL_TENANT_ID=pb
-REACT_APP_PROXY_URL=https://works-dev.digit.org
+# React build configuration
+SKIP_PREFLIGHT_CHECK=true
+
+# Tenant configuration
+REACT_APP_STATE_LEVEL_TENANT_ID=<tenant-id>
+
+# API configuration
+# Format: https://<environment>.<domain>
+REACT_APP_PROXY_URL=https://your-api-endpoint

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

# React build configuration
SKIP_PREFLIGHT_CHECK=true

# Tenant configuration
REACT_APP_STATE_LEVEL_TENANT_ID=<tenant-id>

# API configuration
# Format: https://<environment>.<domain>
REACT_APP_PROXY_URL=https://your-api-endpoint

.gitignore (1)

5-7: 🧹 Nitpick (assertive)

Optimize .gitignore patterns and add missing entries

The current changes introduce redundant patterns since utilities/ already covers all subdirectories:

1. Specific node_modules patterns are unnecessary when parent directory is ignored
2. Missing common patterns for logs and environment files

Consider simplifying and enhancing the patterns:

.DS_Store
accelerators/frontend/micro-ui-internals/node_modules/*
.idea
index.lock
-utilities/project-factory/node_modules/*
-utilities/egov-bff/node_modules/*
-utilities/
+# Utilities and dependencies
+utilities/
+
+# Logs
+*.log
+npm-debug.log*
+
+# Environment variables
+.env
+.env.*
+!.env.sample

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

.DS_Store
accelerators/frontend/micro-ui-internals/node_modules/*
.idea
index.lock
# Utilities and dependencies
utilities/

# Logs
*.log
npm-debug.log*

# Environment variables
.env
.env.*
!.env.sample

health/micro-ui/web/micro-ui-internals/example/src/ComponentRegistry.js (1)

1-9: 🧹 Nitpick (assertive)

Consider enhancing the Registry class with additional safety features

The Registry class implementation could benefit from some essential improvements:

1. Add input validation for the id parameter
2. Add a method to register new components
3. Add type checking for components

Consider this enhanced implementation:

 class Registry {
   constructor(registry = {}) {
     this._registry = registry;
   }

   getComponent(id) {
+    if (!id) {
+      throw new Error('Component ID is required');
+    }
     return this._registry[id];
   }
+
+  registerComponent(id, component) {
+    if (!id || !component) {
+      throw new Error('Both ID and component are required');
+    }
+    if (typeof component !== 'function' && typeof component !== 'object') {
+      throw new Error('Component must be a valid React component');
+    }
+    this._registry[id] = component;
+  }
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

class Registry {
  constructor(registry = {}) {
    this._registry = registry;
  }

  getComponent(id) {
    if (!id) {
      throw new Error('Component ID is required');
    }
    return this._registry[id];
  }

  registerComponent(id, component) {
    if (!id || !component) {
      throw new Error('Both ID and component are required');
    }
    if (typeof component !== 'function' && typeof component !== 'object') {
      throw new Error('Component must be a valid React component');
    }
    this._registry[id] = component;
  }
}

health/micro-ui/web/docker/nginx.conf (1)

1-12: 🛠️ Refactor suggestion

Enhance nginx configuration with security and performance optimizations

The current nginx configuration lacks several important security and performance features:

1. Security headers are missing
2. No SSL/TLS configuration
3. No compression settings
4. No cache control headers

Consider enhancing the configuration:

 server {
   listen 80;
   underscores_in_headers on;
+
+  # Security headers
+  add_header X-Frame-Options "SAMEORIGIN";
+  add_header X-XSS-Protection "1; mode=block";
+  add_header X-Content-Type-Options "nosniff";
+
+  # Enable compression
+  gzip on;
+  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+  gzip_min_length 1000;

   location /digit-ui {
     root /var/web;
     index index.html index.htm;
     try_files $uri $uri/ /digit-ui/index.html;
+
+    # Cache control for static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+      expires 30d;
+      add_header Cache-Control "public, no-transform";
+    }
   }
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

server {
  listen 80;
  underscores_in_headers on;

  # Security headers
  add_header X-Frame-Options "SAMEORIGIN";
  add_header X-XSS-Protection "1; mode=block";
  add_header X-Content-Type-Options "nosniff";

  # Enable compression
  gzip on;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_min_length 1000;

  location /digit-ui {
    root /var/web;
    index index.html index.htm;
    try_files $uri $uri/ /digit-ui/index.html;

    # Cache control for static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
      expires 30d;
      add_header Cache-Control "public, no-transform";
    }
  }
}

health/micro-ui/web/micro-ui-internals/example/src/components/SelectName.js (2)

1-2: 🧹 Nitpick (assertive)

Consider implementing error boundaries

Since this component relies on an external FormStep component, it would be beneficial to implement error boundaries to gracefully handle potential rendering errors.

Would you like me to provide an example implementation of an error boundary wrapper?

---

4-6: 🛠️ Refactor suggestion

Enhance component with React best practices

The component could benefit from several improvements:

1. The onSkip prop is defined but never used
2. Missing PropTypes validation
3. Self-closing tag can be optimized as flagged by static analysis

Consider this enhanced implementation:

 import React from "react";
 import { FormStep } from "@egovernments/digit-ui-react-components";
+import PropTypes from 'prop-types';

-const SelectName = ({ config, onSelect, onSkip, t }) => {
-  return <FormStep config={config} onSelect={onSelect} t={t}></FormStep>;
+const SelectName = ({ config, onSelect, t }) => {
+  return <FormStep config={config} onSelect={onSelect} t={t} />;
 };

+SelectName.propTypes = {
+  config: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
+};

 export default SelectName;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import React from "react";
import { FormStep } from "@egovernments/digit-ui-react-components";
import PropTypes from 'prop-types';

const SelectName = ({ config, onSelect, t }) => {
  return <FormStep config={config} onSelect={onSelect} t={t} />;
};

SelectName.propTypes = {
  config: PropTypes.object.isRequired,
  onSelect: PropTypes.func.isRequired,
  t: PropTypes.func.isRequired
};

export default SelectName;

🧰 Tools

🪛 Biome (1.9.4)

[error] 5-5: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.

Unsafe fix: Use a SelfClosingElement instead

(lint/style/useSelfClosingElements)

health/micro-ui/web/install-deps.sh (2)

11-14: 🛠️ Refactor suggestion

Improve command efficiency and complete implementation

1. The command substitution in echo can be simplified
2. The yarn install command is commented out, leaving the script incomplete

Apply these improvements:

-cd $INTERNALS && echo "Branch: $(git branch --show-current)" && echo "$(git log -1 --pretty=%B)" && echo "installing packages"
+cd "$INTERNALS" || exit 1
+git branch --show-current
+git log -1 --pretty=%B
+echo "Installing packages..."
 
-# yarn install
+yarn install

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

cd "$INTERNALS" || exit 1
git branch --show-current
git log -1 --pretty=%B
echo "Installing packages..."

yarn install

🧰 Tools

🪛 Shellcheck (0.10.0)

[style] 11-11: Useless echo? Instead of 'echo $(cmd)', just use 'cmd'.

(SC2005)

---

3-11: ⚠️ Potential issue

Add error handling and path validation

The script lacks error handling for critical operations:

1. Git commands might fail if not in a repository
2. File copy operation could fail if paths don't exist
3. Directory change could fail if INTERNALS directory is missing

Consider adding these safety checks:

 #!/bin/sh
+set -e  # Exit on any error
 
+if ! git rev-parse --git-dir > /dev/null 2>&1; then
+  echo "Error: Not in a git repository" >&2
+  exit 1
+fi
+
 BRANCH="$(git branch --show-current)"
 
 echo "Main Branch: $BRANCH"
 
 INTERNALS="micro-ui-internals"
 
+if [ ! -d "$INTERNALS" ]; then
+  echo "Error: $INTERNALS directory not found" >&2
+  exit 1
+fi
+
+if [ ! -f "$INTERNALS/example/src/UICustomizations.js" ]; then
+  echo "Error: Source customization file not found" >&2
+  exit 1
+fi
+
 cp $INTERNALS/example/src/UICustomizations.js src/Customisations

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

#!/bin/sh
set -e  # Exit on any error

if ! git rev-parse --git-dir > /dev/null 2>&1; then
  echo "Error: Not in a git repository" >&2
  exit 1
fi

BRANCH="$(git branch --show-current)"

echo "Main Branch: $BRANCH"

INTERNALS="micro-ui-internals"

if [ ! -d "$INTERNALS" ]; then
  echo "Error: $INTERNALS directory not found" >&2
  exit 1
fi

if [ ! -f "$INTERNALS/example/src/UICustomizations.js" ]; then
  echo "Error: Source customization file not found" >&2
  exit 1
fi

cp $INTERNALS/example/src/UICustomizations.js src/Customisations

cd $INTERNALS && echo "Branch: $(git branch --show-current)" && echo "$(git log -1 --pretty=%B)" && echo "installing packages"

🧰 Tools

🪛 Shellcheck (0.10.0)

[style] 11-11: Useless echo? Instead of 'echo $(cmd)', just use 'cmd'.

(SC2005)

health/micro-ui/web/micro-ui-internals/example/.env-mz-prod (1)

3-4: ⚠️ Potential issue

Critical: Remove hardcoded authentication tokens

Hardcoding authentication tokens in version control is a security risk. These tokens should be:

1. Moved to a secure secret management system

2. Injected during deployment

3. Rotated regularly

4. Remove tokens from the file and use placeholder values:

-REACT_APP_EMPLOYEE_TOKEN=c835932f-2ad4-4d05-83d6-49e0b8c59f8a
-REACT_APP_CITIZEN_TOKEN=7cd58aae-30b3-41ed-a1b3-3417107a993c
+REACT_APP_EMPLOYEE_TOKEN=${EMPLOYEE_TOKEN}
+REACT_APP_CITIZEN_TOKEN=${CITIZEN_TOKEN}

2. Add these tokens to your CI/CD secrets or use a secret management service.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

REACT_APP_EMPLOYEE_TOKEN=${EMPLOYEE_TOKEN}
REACT_APP_CITIZEN_TOKEN=${CITIZEN_TOKEN}

🧰 Tools

🪛 Gitleaks (8.21.2)

3-3: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

---

4-4: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

health/micro-ui/web/micro-ui-internals/example/.env-mz-uat (2)

3-4: ⚠️ Potential issue

Critical: Using production tokens in UAT environment

The UAT environment is using the same authentication tokens as production. This violates the principle of environment isolation and could lead to:

1. Accidental production data access from UAT

2. Security breaches affecting both environments

3. Difficulty in tracking the source of potential issues

4. Generate separate tokens for UAT environment

5. Update the configuration to use UAT-specific tokens

6. Ensure proper access controls for each environment

🧰 Tools

🪛 Gitleaks (8.21.2)

3-3: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

---

4-4: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

---

5-7: 🧹 Nitpick (assertive)

Inconsistent configuration across environments

There are inconsistencies between UAT and production configurations:

1. Different S3 bucket regions (ap-south-1 vs af-south-1)
2. Inconsistent domain naming (moz-health-uat.digit.org vs salama.digit.org)

Consider:

1. Standardizing the region across environments
2. Following a consistent domain naming convention
3. Documenting the reasons for any intentional differences

health/micro-ui/web/micro-ui-internals/example/.env-health-qa (1)

3-4: 🧹 Nitpick (assertive)

⚠️ Potential issue

Critical: Remove hardcoded API tokens from version control

The employee and citizen tokens should not be committed to version control as they pose a security risk. These tokens should be managed securely through a secrets management system or environment-specific configuration.

Consider:

1. Moving tokens to a secure secrets management system
2. Using placeholder values in the committed file
3. Documenting the required tokens in a template file (e.g., .env.example)

🧰 Tools

🪛 Gitleaks (8.21.2)

3-3: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

---

4-4: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

health/micro-ui/web/micro-ui-internals/example/src/pgr.js (3)

3-3: 🧹 Nitpick (assertive)

Remove commented out code

Remove the commented import and configuration lines. If they're needed later, they can be retrieved from version control history.

-// import { config as complaintConfig } from "./complaintConfig";
-  // complaintConfig,

Also applies to: 6-6

---

7-9: ⚠️ Potential issue

Implement or document empty method

The getComplaintDetailsTableRows method returns an empty object without any implementation. This could lead to unexpected behavior.

Please either:

1. Implement the required functionality
2. Add a TODO comment explaining why it's empty
3. Document that this is an intentional placeholder

---

12-14: 🧹 Nitpick (assertive)

Simplify component export syntax

The component mapping can be simplified using object property shorthand.

-  SelectName: SelectName,
+  SelectName,

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const pgrComponents = {
  SelectName,
};

health/micro-ui/web/micro-ui-internals/.prettierignore (1)

1-23: 🧹 Nitpick (assertive)

Enhance Prettier ignore patterns

The configuration is good but could be improved with additional common patterns:

 # builds
 build
 dist
 .rpt2_cache
+coverage
+.next
+
 # dev
 dev.css
 index.css
 index.compat.css
 index.min.css
+
 # misc
 .DS_Store
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.env.*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea
+.vscode

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# builds
build
dist
.rpt2_cache
coverage
.next

# dev
dev.css
index.css
index.compat.css
index.min.css

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.env.*
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.idea
.vscode

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/addProductConfig.js (1)

9-12: 💡 Codebase verification

Empty validation objects should be populated with required field validations

The AddProductField component shows that name, type, and variant fields are marked as mandatory (with * symbol), but the corresponding validation rules are missing in the configuration. The validation objects should be populated to enforce these requirements.

Example validation rules to add:

validation: {
  name: {
    required: true
  },
  type: {
    required: true
  },
  variant: {
    required: true
  }
}

🔗 Analysis chain

Consider implementing validation rules.

The validation objects are currently empty. If validation is required for the product fields, consider implementing appropriate validation rules.

Let's check if validation rules exist in related files:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for validation patterns in related campaign manager files
rg -t js "validation.*Product" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

Length of output: 106

---

Script:

#!/bin/bash
# Let's search for any validation patterns in the campaign manager module
rg -t js "validation:" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

# Also search for form validation related imports or usage
rg -t js "formValidation|validator|required|validate" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

Length of output: 9104

---

Script:

#!/bin/bash
# Let's check the AddProductField component to understand if validation is handled there
ast-grep --pattern 'const AddProductField = $_' -l js

# Also check for any product-related validation in the campaign manager
rg -t js "product.*validation|validation.*product" -i health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

Length of output: 19525

health/micro-ui/web/micro-ui-internals/packages/css/src/index.scss (1)

1-3: 🧹 Nitpick (assertive)

Clarify the status of commented imports.

The normalize.css and Google Fonts imports are commented out. If these are required dependencies, they should be uncommented. If they're no longer needed, consider removing the commented code.

health/micro-ui/.gitignore (1)

7-13: 🧹 Nitpick (assertive)

Remove duplicate .yarn entry.

The .yarn directory is listed twice in the .gitignore file (lines 7 and 13). Remove one of the duplicate entries to maintain cleaner configuration.

# yarn $
.yarn
yarn.lock
.yarnrc.yml

# dependencies
node_modules
-.yarn
/.pnp
.pnp.js

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

.yarn
yarn.lock
.yarnrc.yml

# dependencies
node_modules

health/micro-ui/web/micro-ui-internals/example/.env-unifieddev (1)

3-4: ⚠️ Potential issue

⚠️ Security Risk: Exposed API Tokens

The employee and citizen tokens should not be committed to version control as they could be misused if exposed.

Recommendations:

1. Remove these tokens and use placeholder values
2. Document the token format in a .env.example file
3. Add .env* to .gitignore (except .env.example)
4. Share actual tokens through a secure channel

🧰 Tools

🪛 Gitleaks (8.21.2)

3-3: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

---

4-4: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createCampaignService.js (2)

1-8: 🧹 Nitpick (assertive)

Consider migrating to TypeScript for better type safety

Adding type definitions would improve maintainability and catch potential issues at compile time.

Example type definitions:

interface CampaignRequest {
  // Add campaign request properties
}

interface CampaignResponse {
  // Add campaign response properties
}

const createCampaignService = async (
  req: CampaignRequest,
  tenantId: string
): Promise<CampaignResponse> => {
  // ... implementation
}

---

11-15: 🛠️ Refactor suggestion

Improve error handling robustness

The current error handling makes assumptions about the error response structure that could lead to runtime errors.

-    if (!error?.response?.data?.Errors[0].description) {
-      throw new Error(error?.response?.data?.Errors[0].code);
-    } else {
-      throw new Error(error?.response?.data?.Errors[0].description);
-    }
+    const errorResponse = error?.response?.data;
+    const errorDetails = errorResponse?.Errors?.[0];
+    if (!errorDetails) {
+      throw new Error('Unknown error occurred');
+    }
+    throw new Error(errorDetails.description || errorDetails.code || 'Service error');

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    const errorResponse = error?.response?.data;
    const errorDetails = errorResponse?.Errors?.[0];
    if (!errorDetails) {
      throw new Error('Unknown error occurred');
    }
    throw new Error(errorDetails.description || errorDetails.code || 'Service error');

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/updateCampaignService.js (3)

11-11: 🧹 Nitpick (assertive)

Remove commented out code

Dead code should be removed to maintain cleanliness. If this was an alternative implementation, consider documenting it in comments explaining why it was not used.

---

1-18: 🛠️ Refactor suggestion

Extract common service logic to reduce duplication

This service shares significant code with createCampaignService. Consider extracting the common logic into a shared utility.

// campaignServiceUtils.js
export const handleCampaignRequest = async (endpoint, req, tenantId) => {
  try {
    return await Digit.CustomService.getResponse({
      url: `/project-factory/v1/project-type/${endpoint}`,
      body: {
        CampaignDetails: req,
      },
    });
  } catch (error) {
    const errorResponse = error?.response?.data;
    const errorDetails = errorResponse?.Errors?.[0];
    if (!errorDetails) {
      throw new Error('Unknown error occurred');
    }
    throw new Error(errorDetails.description || errorDetails.code || 'Service error');
  }
};

// updateCampaignService.js
const updateCampaignService = (req, tenantId) => 
  handleCampaignRequest('update', req, tenantId);

// createCampaignService.js
const createCampaignService = (req, tenantId) => 
  handleCampaignRequest('create', req, tenantId);

---

1-20: 🧹 Nitpick (assertive)

Add input validation

Consider adding validation for the request payload before making the API call to catch issues early.

const validateCampaignRequest = (req) => {
  if (!req) throw new Error('Campaign details are required');
  // Add more validation as needed
};

const updateCampaignService = async (req, tenantId) => {
  validateCampaignRequest(req);
  // ... rest of the implementation
};

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/useSearchCampaign.js (3)

1-2: ⚠️ Potential issue

Missing required import for Digit utility

The Digit utility is used but not imported. Add the import statement to prevent runtime errors.

import { useQuery } from "react-query";
+ import { Digit } from "@egovernments/digit-ui-module-core";

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import { useQuery } from "react-query";
import { Digit } from "@egovernments/digit-ui-module-core";

---

19-21: 🧹 Nitpick (assertive)

Enhance query key structure and configuration

The current query key structure could be improved for better cache management:

1. Consider using a more specific prefix
2. Add version to query key
3. Serialize filter object to ensure consistent cache keys

- export const useSearchCampaign = ({ tenantId, filter, pagination, config = {} }) => {
+ export const useSearchCampaign = ({ tenantId, filter, pagination, config = {} }) => {
+   const queryKey = [
+     "CAMPAIGN_MANAGER",
+     "SEARCH_CAMPAIGN",
+     "v1",
+     tenantId,
+     JSON.stringify(filter),
+     JSON.stringify(pagination)
+   ];
-   return useQuery(["SEARCH_CAMPAIGN", tenantId, filter, pagination], () => searchCampaignService({ tenantId, filter, pagination }), config);
+   return useQuery(
+     queryKey,
+     () => searchCampaignService({ tenantId, filter, pagination }),
+     {
+       staleTime: 5 * 60 * 1000, // 5 minutes
+       ...config
+     }
+   );
  };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

export const useSearchCampaign = ({ tenantId, filter, pagination, config = {} }) => {
  const queryKey = [
    "CAMPAIGN_MANAGER",
    "SEARCH_CAMPAIGN",
    "v1",
    tenantId,
    JSON.stringify(filter),
    JSON.stringify(pagination)
  ];
  return useQuery(
    queryKey,
    () => searchCampaignService({ tenantId, filter, pagination }),
    {
      staleTime: 5 * 60 * 1000, // 5 minutes
      ...config
    }
  );
};

---

3-17: 🛠️ Refactor suggestion

Add error handling and response validation

The service function needs improvements in error handling and response validation:

1. No error handling for failed API calls
2. No validation of response structure
3. No TypeScript types for better type safety

Consider refactoring to:

- const searchCampaignService = async ({ tenantId, filter, pagination }) => {
+ const searchCampaignService = async ({ tenantId, filter, pagination }) => {
+   try {
      const response = await Digit.CustomService.getResponse({
        url: "/project-factory/v1/project-type/search",
        body: {
          CampaignDetails: {
            tenantId: tenantId,
            ...filter,
            pagination: {
              ...pagination,
            },
          },
        },
      });
+     if (!response?.CampaignDetails) {
+       throw new Error('Invalid response format');
+     }
      return response?.CampaignDetails;
+   } catch (error) {
+     throw new Error(`Failed to fetch campaign details: ${error.message}`);
+   }
  };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const searchCampaignService = async ({ tenantId, filter, pagination }) => {
  try {
    const response = await Digit.CustomService.getResponse({
      url: "/project-factory/v1/project-type/search",
      body: {
        CampaignDetails: {
          tenantId: tenantId,
          ...filter,
          pagination: {
            ...pagination,
          },
        },
      },
    });
    if (!response?.CampaignDetails) {
      throw new Error('Invalid response format');
    }
    return response?.CampaignDetails;
  } catch (error) {
    throw new Error(`Failed to fetch campaign details: ${error.message}`);
  }
};

health/micro-ui/web/docker/Dockerfile (3)

18-20: 🧹 Nitpick (assertive)

Clean up commented code

Remove commented out lines to improve maintainability.

FROM nginx:mainline-alpine
- #FROM ghcr.io/egovernments/nginx:mainline-alpine

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

FROM nginx:mainline-alpine
ENV WORK_DIR=/var/web/digit-ui

---

12-16: 🧹 Nitpick (assertive)

Use WORKDIR instead of cd command

Replace cd command with WORKDIR instruction for better Dockerfile practices.

- #RUN node web/envs.js
- RUN cd web/ \
+ WORKDIR /app/web
+ RUN \
    && chmod +x install-deps.sh \
    && yarn install \
    && yarn build:webpack 

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Hadolint (2.12.0)

[warning] 13-13: Use WORKDIR to switch to a directory

(DL3003)

---

3-4: 🛠️ Refactor suggestion

Pin package versions for better reproducibility

For better reproducibility and security, pin the package versions in apk add command.

RUN apk update && apk upgrade
- RUN apk add --no-cache git>2.30.0
+ RUN apk add --no-cache git=2.34.8-r0

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Hadolint (2.12.0)

[warning] 4-4: Pin versions in apk add. Instead of apk add <package> use apk add <package>=<version>

(DL3018)

health/micro-ui/web/micro-ui-internals/clean.sh (2)

9-28: 🧹 Nitpick (assertive)

Optimize directory cleanup operations

The script can be more efficient by using find command and avoiding multiple cd operations.

- msg "Cleaning root"
- rm -rf node_modules
-
- msg "Cleaning css"
- cd "$BASEDIR/packages/css" && rm -rf node_modules
-
- msg "Cleaning libraries"
- cd "$BASEDIR/packages/libraries" && rm -rf node_modules
-
- msg "Cleaning react-components"
- cd "$BASEDIR/packages/react-components" && rm -rf node_modules
-
- msg "Cleaning PGR module"
- cd "$BASEDIR/packages/modules/pgr" && rm -rf node_modules
-
- msg "Cleaning FSM module"
- cd "$BASEDIR/packages/modules/fsm" && rm -rf node_modules
-
- msg "Cleaning Core module"
- cd "$BASEDIR/packages/modules/core" && rm -rf node_modules
+ msg "Cleaning all node_modules directories"
+ find "$BASEDIR" -name "node_modules" -type d -prune -exec rm -rf {} +

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

msg "Cleaning all node_modules directories"
find "$BASEDIR" -name "node_modules" -type d -prune -exec rm -rf {} +

---

1-8: 🛠️ Refactor suggestion

Add error handling and safety checks

The script should handle errors and include safety checks.

#!/bin/bash
+ set -euo pipefail

BASEDIR="$( cd "$( dirname "$0" )" && pwd )"

+ # Check if we're in the right directory
+ if [[ ! -f "$BASEDIR/package.json" ]]; then
+   echo "Error: package.json not found in $BASEDIR"
+   exit 1
+ fi

msg() {
  echo -e "\n\n\033[32;32m$1\033[0m"
}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

#!/bin/bash
set -euo pipefail

BASEDIR="$( cd "$( dirname "$0" )" && pwd )"

# Check if we're in the right directory
if [[ ! -f "$BASEDIR/package.json" ]]; then
  echo "Error: package.json not found in $BASEDIR"
  exit 1
fi

msg() {
  echo -e "\n\n\033[32;32m$1\033[0m"
}

health/micro-ui/web/micro-ui-internals/example/src/complaintConfig.js (1)

18-26: ⚠️ Potential issue

Fix incorrect validation configuration for apartment field

The validation and error message appear to be copied from a pincode field configuration:

1. The validation lengths (6-7) seem more appropriate for a pincode than an apartment name
2. The error message references an invalid pincode

Suggested fix:

  {
    label: "Apartment",
    type: "text",
    name: "custom.additionalDetails.apartment",
    validation: {
-     minLength: 6,
-     maxLength: 7,
+     minLength: 1,
+     maxLength: 100,
    },
-   error: "CORE_COMMON_PINCODE_INVALID",
+   error: "CORE_COMMON_APARTMENT_INVALID",
  },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

          label: "Apartment",
          type: "text",
          name: "custom.additionalDetails.apartment",
          validation: {
            minLength: 1,
            maxLength: 100,
          },
          error: "CORE_COMMON_APARTMENT_INVALID",
        },

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/index.js (3)

12-16: 🛠️ Refactor suggestion

Remove or implement empty service objects

The UserService, workbench, and contracts objects are empty and appear to be unused. Either implement these services or remove them to avoid dead code.

---

35-37: 🛠️ Refactor suggestion

Replace placeholder function with proper implementation

The sample function is a no-op placeholder. Either implement meaningful functionality or remove it.

---

1-11: 🧹 Nitpick (assertive)

Consider organizing imports for better maintainability

The imports mix relative and service paths. Consider organizing them by:

1. External dependencies
2. Internal services
3. Internal hooks

health/micro-ui/web/micro-ui-internals/packages/css/README.md (3)

1-1: 🧹 Nitpick (assertive)

Remove or address TODO comment

The TODO comment at the top of the file should either be addressed or removed before merging.

---

26-28: 🧹 Nitpick (assertive)

Ensure version consistency in documentation

The README shows different versions:

• Package.json example shows "^1.5.0"
• CSS import shows "@1.5.22"

Please ensure version references are consistent throughout the documentation.

Also applies to: 39-39

---

58-58: 🧹 Nitpick (assertive)

Fix bare URL in documentation

Convert the bare URL to a proper Markdown link.

-DIGIT Frontend Repo (https://github.com/egovernments/Digit-Frontend/tree/develop)
+DIGIT Frontend Repo ([https://github.com/egovernments/Digit-Frontend/tree/develop](https://github.com/egovernments/Digit-Frontend/tree/develop))

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Markdownlint (0.35.0)

58-58: null
Bare URL used

(MD034, no-bare-urls)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignResourceDocuments.js (4)

10-24: 🛠️ Refactor suggestion

Consider extracting API configuration

The API request configuration should be moved to a separate service file for better maintainability and reusability.

+// services/campaignResourceService.js
+export const getResourceSearchCriteria = (tenantId, resources) => ({
+  url: '/project-factory/v1/data/_search',
+  body: {
+    SearchCriteria: {
+      tenantId,
+      id: resources,
+    },
+  },
+  config: {
+    enabled: true,
+    select: (data) => data?.ResourceDetails,
+  },
+});

Committable suggestion skipped: line range outside the PR's diff.

---

6-6: 🧹 Nitpick (assertive)

Consider adding prop-types validation

For better type safety and documentation, consider adding PropTypes validation for the component props.

+import PropTypes from 'prop-types';

function CampaignResourceDocuments({ resources = [], svgStyles = {}, isUserGenerate = false }) {
  // ... component code ...
}

+CampaignResourceDocuments.propTypes = {
+  resources: PropTypes.arrayOf(PropTypes.string),
+  svgStyles: PropTypes.object,
+  isUserGenerate: PropTypes.bool
+};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

import PropTypes from 'prop-types';

function CampaignResourceDocuments({ resources = [], svgStyles = {}, isUserGenerate = false }) {

CampaignResourceDocuments.propTypes = {
  resources: PropTypes.arrayOf(PropTypes.string),
  svgStyles: PropTypes.object,
  isUserGenerate: PropTypes.bool
};

---

44-46: ⚠️ Potential issue

Inconsistent isUserGenerate prop usage

The isUserGenerate prop is hardcoded to true in CampaignDocumentsPreview while being passed as a prop to the parent component.

-<CampaignDocumentsPreview documents={processData} isUserGenerate={true} />
+<CampaignDocumentsPreview documents={processData} isUserGenerate={isUserGenerate} />

Committable suggestion skipped: line range outside the PR's diff.

---

28-38: ⚠️ Potential issue

Add error handling for data processing

The useEffect block should include error handling for potential undefined or malformed data.

 useEffect(() => {
   if (!isLoading) {
+    if (!Array.isArray(resourceData)) {
+      console.error('Expected array of resource data');
+      setProcessData([]);
+      return;
+    }
     const temp = resourceData.map((i) => {
       return {
         id: i?.processedFilestoreId,
         type: "User Credential",
       };
     });
     setProcessData(temp);
   }
 }, [isLoading, resourceData]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  useEffect(() => {
    if (!isLoading) {
      if (!Array.isArray(resourceData)) {
        console.error('Expected array of resource data');
        setProcessData([]);
        return;
      }
      const temp = resourceData.map((i) => {
        return {
          id: i?.processedFilestoreId,
          type: "User Credential",
        };
      });
      setProcessData(temp);
    }
  }, [isLoading, resourceData]);

health/micro-ui/web/micro-ui-internals/example/src/fsm.js (2)

6-7: 🧹 Nitpick (assertive)

Remove commented code

Remove commented code that appears to be TODO items. If these are planned features, they should be tracked in the issue tracker instead.

---

19-23: ⚠️ Potential issue

Enhance validation pattern

The current regex pattern /[A-Za-z]/ only checks for a single letter. Consider using a more specific pattern based on the field requirements.

 validation: {
   required: true,
-  pattern: /[A-Za-z]/,
+  pattern: /^[A-Za-z\s]{2,50}$/,  // Allows 2-50 characters, letters and spaces
 },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

              validation: {
                required: true,
                pattern: /^[A-Za-z\s]{2,50}$/,  // Allows 2-50 characters, letters and spaces
              },
            },

health/micro-ui/web/micro-ui-internals/example/public/index.html (2)

17-20: 🧹 Nitpick (assertive)

⚠️ Potential issue

Consolidate CSS dependencies

Multiple versions of digit-ui-css are being loaded, which could lead to conflicts and unnecessary bandwidth usage. Consider consolidating these into a single version.

Consider using a CSS bundler to combine these stylesheets and ensure consistent versioning.

---

6-6: 🛠️ Refactor suggestion

Add security headers

Consider adding security-related meta tags to protect against common web vulnerabilities.

 <meta charset="utf-8" />
+<meta http-equiv="X-Content-Type-Options" content="nosniff">
+<meta http-equiv="X-Frame-Options" content="DENY">
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' https://fonts.googleapis.com https://unpkg.com; font-src 'self' https://fonts.gstatic.com;">

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/css/gulpfile.js (4)

68-71: 🧹 Nitpick (assertive)

Remove commented code

Remove the commented-out gulp.task code as it's no longer needed and may cause confusion.

-// gulp.task("watch:styles", function () {
-//   livereload.listen();
-//   gulp.watch("**/*.scss", ["styles"]);
-// });

---

1-1: 🛠️ Refactor suggestion

Use node: protocol for Node.js builtin modules

For better clarity and explicit Node.js module identification, use the node: protocol.

-const fs = require("fs");
+const fs = require("node:fs");

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const fs = require("node:fs");

🧰 Tools

🪛 Biome (1.9.4)

[error] 1-1: A Node.js builtin module should be imported with the node: protocol.

Using the node: protocol is more explicit and signals that the imported module belongs to Node.js.
Unsafe fix: Add the node: protocol.

(lint/style/useNodejsImportProtocol)

---

4-12: 🧹 Nitpick (assertive)

Remove extra whitespace in header string template

The header string template has unnecessary whitespace that might affect the output.

-const headerString = `
-@charset "UTF-8";
-/*!
- * ${name} - ${version}
- *
- * Copyright (c) ${new Date().getFullYear()} ${author}
- * 
- */
-  `;
+const headerString = `@charset "UTF-8";
/*!
 * ${name} - ${version}
 *
 * Copyright (c) ${new Date().getFullYear()} ${author}
 */`;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const headerString = `@charset "UTF-8";
/*!
 * ${name} - ${version}
 *
 * Copyright (c) ${new Date().getFullYear()} ${author}
 */`;

---

34-44: 🛠️ Refactor suggestion

Add error handling for file operations

The styles task should handle potential errors during file processing to prevent silent failures.

 function styles() {
   const plugins = [
     require("postcss-import"),
     require("tailwindcss"),
     postcssPresetEnv({ stage: 2, autoprefixer: { cascade: false }, features: { "custom-properties": true } }),
     require("autoprefixer"),
     require("cssnano"),
     header({ header: headerString }),
   ];
-  return src("src/index.scss").pipe(postcss(plugins)).pipe(sass()).pipe(dest(output));
+  return src("src/index.scss")
+    .pipe(postcss(plugins))
+    .pipe(sass().on('error', sass.logError))
+    .pipe(dest(output))
+    .on('error', function(err) {
+      console.error('Error in styles task:', err.toString());
+      this.emit('end');
+    });

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

function styles() {
  const plugins = [
    require("postcss-import"),
    require("tailwindcss"),
    postcssPresetEnv({ stage: 2, autoprefixer: { cascade: false }, features: { "custom-properties": true } }),
    require("autoprefixer"),
    require("cssnano"),
    header({ header: headerString }),
  ];
  return src("src/index.scss")
    .pipe(postcss(plugins))
    .pipe(sass().on('error', sass.logError))
    .pipe(dest(output))
    .on('error', function(err) {
      console.error('Error in styles task:', err.toString());
      this.emit('end');
    });
}

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (2)

94-109: 🧹 Nitpick (assertive)

Use SCSS variables for consistent values

Replace hardcoded values with SCSS variables for better maintainability and consistency.

+$popup-width: 45rem;
+$spacing-none: 0;
+
 .digit-popup-wrapper{
   &.popUpClass{
-    width:45rem;
+    width: $popup-width;
 
     .popUpFooter{
       .digit-popup-footer-buttons{
-        margin-left: 0px;
+        margin-left: $spacing-none;
         width: 100%;
 
         button{

Committable suggestion skipped: line range outside the PR's diff.

---

39-45: 🛠️ Refactor suggestion

Avoid using !important

Using !important makes styles difficult to override and maintain. Consider restructuring the CSS specificity instead.

 .mandatory-date {
   margin-top: 0.8rem;
   margin-left: 0.5rem;
-  color: red !important;
+  color: red;
   font-size: 1rem;
   font-weight: 700;
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

.mandatory-date {
  margin-top: 0.8rem;
  margin-left: 0.5rem;
  color: red;
  font-size: 1rem;
  font-weight: 700;
}

health/micro-ui/web/micro-ui-internals/README.md (1)

1-100: 🧹 Nitpick (assertive)

Fix markdown formatting issues

The README has several formatting issues that should be addressed for better readability:

1. Remove trailing spaces
2. Fix multiple consecutive blank lines
3. Add blank lines around code blocks
4. Wrap bare URLs in proper markdown links

-# workbench ui 
+# Workbench UI
 
 A React App built on top of DIGIT UI Core.
 
-
-# DIGIT UI 
+# DIGIT UI
 
-DIGIT (Digital Infrastructure for Governance, Impact & Transformation) is India's largest platform for governance services. Visit https://www.digit.org for more details.
+DIGIT (Digital Infrastructure for Governance, Impact & Transformation) is India's largest platform for governance services. Visit [https://www.digit.org](https://www.digit.org) for more details.
 
 This repository contains source code for web implementation of the new Digit UI modules with dependencies and libraries.
 
@@ -94,7 +94,7 @@
 ## Support
 
-For support, add the issues in https://github.com/egovernments/DIGIT-core/issues.
+For support, add the issues in [https://github.com/egovernments/DIGIT-core/issues](https://github.com/egovernments/DIGIT-core/issues).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

# Workbench UI

A React App built on top of DIGIT UI Core.

# DIGIT UI

DIGIT (Digital Infrastructure for Governance, Impact & Transformation) is India's largest platform for governance services. Visit [https://www.digit.org](https://www.digit.org) for more details.

This repository contains source code for web implementation of the new Digit UI modules with dependencies and libraries.

Workbench module is used to Manage the master data (MDMS V2 Service) used across the DIGIT Services / Applications

It is also used to manage the Localisation data present in the system (Localisation service)


## Run Locally

Clone the project

🧰 Tools

🪛 LanguageTool

[uncategorized] ~53-~53: Loose punctuation mark.
Context: ...o your .env file REACT_APP_PROXY_API :: {{server url}} REACT_APP_GLOBAL ...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~55-~55: Loose punctuation mark.
Context: ... {{server url}} REACT_APP_GLOBAL :: {{server url}} `REACT_APP_PROXY_AS...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~57-~57: Loose punctuation mark.
Context: ...erver url}} REACT_APP_PROXY_ASSETS :: {{server url}} REACT_APP_USER_TYP...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~59-~59: Loose punctuation mark.
Context: ...{{server url}} REACT_APP_USER_TYPE :: {{EMPLOYEE||CITIZEN}} SKIP_PREFLI...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~61-~61: Loose punctuation mark.
Context: ...YEE||CITIZEN}} SKIP_PREFLIGHT_CHECK::true` [sample .env file](https://git...

(UNLIKELY_OPENING_PUNCTUATION)

🪛 Markdownlint (0.35.0)

2-2: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

7-7: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

67-67: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

6-6: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

17-17: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

48-48: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

83-83: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

88-88: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

93-93: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

98-98: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

27-27: null
Fenced code blocks should be surrounded by blank lines

(MD031, blanks-around-fences)

---

38-38: null
Fenced code blocks should be surrounded by blank lines

(MD031, blanks-around-fences)

---

9-9: null
Bare URL used

(MD034, no-bare-urls)

---

96-96: null
Bare URL used

(MD034, no-bare-urls)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (3)

23-44: 🧹 Nitpick (assertive)

Remove or implement commented API integration code

The commented-out code suggests an incomplete API integration. This could lead to confusion and technical debt.

Either implement the API integration or remove the commented code to maintain cleaner codebase. Would you like me to help implement the API integration or create an issue to track this?

---

45-58: 🧹 Nitpick (assertive)

Consider dynamic link generation

The links array is hardcoded with static routes. Consider making this more maintainable by moving it to a configuration file.

Consider extracting these routes to a separate configuration file that can be easily maintained and reused across components.

---

17-17: 🧹 Nitpick (assertive)

Simplify array flattening operation

The flatMap usage here is unnecessary since you're only flattening the array without any mapping operation.

-if (!Digit.Utils.didEmployeeHasAtleastOneRole(Object.values(ROLES).flatMap((e) => e))) {
+if (!Digit.Utils.didEmployeeHasAtleastOneRole(Object.values(ROLES).flat())) {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  if (!Digit.Utils.didEmployeeHasAtleastOneRole(Object.values(ROLES).flat())) {

🧰 Tools

🪛 Biome (1.9.4)

[error] 17-17: Avoid unnecessary callback in flatMap call.

You can just use flat to flatten the array.
Safe fix: Replace unnecessary flatMap call to flat instead.

(lint/correctness/noFlatMapIdentity)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignName.js (3)

17-31: 🛠️ Refactor suggestion

Consolidate validation logic

Multiple useEffect hooks handle validation with overlapping concerns. This could lead to race conditions and makes the code harder to maintain.

Consider consolidating the validation logic into a single useEffect or custom hook:

const useValidation = (name, isSubmitting) => {
  const [error, setError] = useState(null);
  
  useEffect(() => {
    if (isSubmitting && !name) {
      setError({ message: "CAMPAIGN_FIELD_ERROR_MANDATORY" });
    } else if (!name) {
      setError({ message: "CAMPAIGN_NAME_FIELD_ERROR" });
    } else {
      setError(null);
    }
  }, [name, isSubmitting]);

  return error;
};

---

49-60: 🧹 Nitpick (assertive)

Consider using React Hook Form's built-in validation

Since you're already using React Hook Form (imported via FieldV1), consider leveraging its built-in validation capabilities instead of managing validation state manually.

<FieldV1
  type="text"
  rules={{
    required: { value: true, message: t("CAMPAIGN_FIELD_ERROR_MANDATORY") }
  }}
  // ... other props
/>

---

33-38: ⚠️ Potential issue

Optimize useEffect hook execution

The useEffect hook is missing a dependency array and will run on every render. Additionally, the execution count limit seems like a workaround for a deeper issue.

-  useEffect(() => {
-    if (executionCount < 5) {
-      onSelect("campaignName", name);
-      setExecutionCount((prevCount) => prevCount + 1);
-    }
-  });
+  useEffect(() => {
+    onSelect("campaignName", name);
+  }, [name, onSelect]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  useEffect(() => {
    onSelect("campaignName", name);
  }, [name, onSelect]);

README.md (2)

14-14: 🧹 Nitpick (assertive)

Remove duplicate heading

There are multiple "DIGIT UI" headings in the document which could cause confusion in navigation.

Consider renaming the second occurrence to be more specific, such as "DIGIT UI Implementation" or "DIGIT UI Overview".

🧰 Tools

🪛 Markdownlint (0.35.0)

14-14: null
Multiple headings with the same content

(MD024, no-duplicate-heading)

---

58-66: 🧹 Nitpick (assertive)

Standardize environment variable documentation format

The environment variable documentation uses inconsistent formatting with double colons.

Consider using a more standard format:

- `REACT_APP_PROXY_API`: Server URL
- `REACT_APP_GLOBAL`: Server URL
- `REACT_APP_PROXY_ASSETS`: Server URL
- `REACT_APP_USER_TYPE`: EMPLOYEE or CITIZEN
- `SKIP_PREFLIGHT_CHECK`: true

🧰 Tools

🪛 LanguageTool

[uncategorized] ~58-~58: Loose punctuation mark.
Context: ...o your .env file REACT_APP_PROXY_API :: {{server url}} REACT_APP_GLOBAL :...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~60-~60: Loose punctuation mark.
Context: ...:: {{server url}} REACT_APP_GLOBAL :: {{server url}} `REACT_APP_PROXY_ASS...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~62-~62: Loose punctuation mark.
Context: ...server url}} REACT_APP_PROXY_ASSETS::{{server url}} REACT_APP_USER_TYPE...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~64-~64: Loose punctuation mark.
Context: ...{{server url}} REACT_APP_USER_TYPE :: {{EMPLOYEE||CITIZEN}} `SKIP_PREFLIG...

(UNLIKELY_OPENING_PUNCTUATION)

---

[uncategorized] ~66-~66: Loose punctuation mark.
Context: ...YEE||CITIZEN}} SKIP_PREFLIGHT_CHECK::true` [sample .env file](https://git...

(UNLIKELY_OPENING_PUNCTUATION)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DetailsTable.js (4)

9-9: ⚠️ Potential issue

Add missing dependency to useMemo

The columns memoization only depends on t, but columnsData should also be included in the dependency array since it's used in the calculation.

-  const columns = React.useMemo(() => columnsData, [t]);
+  const columns = React.useMemo(() => columnsData, [columnsData, t]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const columns = React.useMemo(() => columnsData, [columnsData, t]);

---

63-65: 🧹 Nitpick (assertive)

Extract hardcoded styles and magic numbers

The inline styles and index-based conditions should be extracted into constants or CSS classes for better maintainability.

+  const SUMMARY_STYLES = {
+    borderCell: { borderRight: "0.5px solid #d6d5d4", textAlign: "right", fontWeight: 700 },
+  };
+  const SUMMARY_STATUS_INDEX = 4;
+  const SUMMARY_AMOUNT_INDEX = 3;
+
   // In the render
-                  <td className="data" style={index === 3 ? { borderRight: "0.5px solid #d6d5d4", textAlign: "right", fontWeight: 700 } : {}}>
+                  <td className="data" style={index === SUMMARY_AMOUNT_INDEX ? SUMMARY_STYLES.borderCell : {}}>
-                    {index === 4 ? <span className={cell === "Pass" ? "sla-cell-success" : "sla-cell-error"}> {cell} </span> : cell}
+                    {index === SUMMARY_STATUS_INDEX ? <span className={cell === "Pass" ? "sla-cell-success" : "sla-cell-error"}> {cell} </span> : cell}

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 63-63: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

35-43: ⚠️ Potential issue

Add missing key prop to header rows and cells

React requires unique key props for elements in iterables to optimize rendering and prevent potential issues with component updates.

-              <tr {...headerGroup.getHeaderGroupProps()} className="row">
+              <tr {...headerGroup.getHeaderGroupProps()} className="row" key={headerGroup.id}>
                 {headerGroup.headers.map((column) => (
-                  <th {...column.getHeaderProps()} className="head">
+                  <th {...column.getHeaderProps()} className="head" key={column.id}>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()} className="row" key={headerGroup.id}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()} className="head" key={column.id}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}

🧰 Tools

🪛 Biome (1.9.4)

[error] 36-36: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 38-38: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

47-58: ⚠️ Potential issue

Add missing key prop to data rows and cells

Similar to the header, data rows and cells need unique key props.

-                <tr {...row.getRowProps()} className="row">
+                <tr {...row.getRowProps()} className="row" key={row.id}>
                   {row.cells.map((cell) => (
-                    <td {...cell.getCellProps()} className="data">
+                    <td {...cell.getCellProps()} className="data" key={cell.column.id}>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            {rows.map((row) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()} className="row" key={row.id}>
                  {row.cells.map((cell) => (
                    <td {...cell.getCellProps()} className="data" key={cell.column.id}>
                      {cell.render("Cell")}
                    </td>
                  ))}
                </tr>
              );
            })}

🧰 Tools

🪛 Biome (1.9.4)

[error] 50-50: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 52-52: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

health/micro-ui/README.md (2)

108-113: 🧹 Nitpick (assertive)

Use fenced code blocks for module list

Convert the indented code block to fenced code blocks for consistency.

-    1. Core
-    2. Workbench
-    3. HRMS
-    4. Dashboard
-    5. Engagement
-    6. Payment
+```markdown
+1. Core
+2. Workbench
+3. HRMS
+4. Dashboard
+5. Engagement
+6. Payment
+```

🧰 Tools

🪛 Markdownlint (0.35.0)

108-108: Expected: fenced; Actual: indented
Code block style

(MD046, code-block-style)

---

98-98: ⚠️ Potential issue

Fix broken documentation link

The documentation link contains a duplicate https:// protocol.

-[Documentation](https://https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui)
+[Documentation](https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

[Documentation](https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui)

health/micro-ui/web/micro-ui-internals/example/src/index.js (3)

24-28: 🧹 Nitpick (assertive)

Clean up commented code

Remove commented-out code to improve code readability. If these modules are needed later, they can be retrieved from version control history.

-  //  "Engagement", "NDSS","QuickPayLinks", "Payment",
   "Utilities",
   "Microplanning"
-  //added to check fsm
-  // "FSM"

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  "Utilities",
  "Microplanning"

---

54-54: 🧹 Nitpick (assertive)

Use optional chaining for better null safety

Replace the length check with optional chaining to make the code more concise and safer.

-if (employeeTenantId && employeeTenantId.length) window.Digit.SessionStorage.set("Employee.tenantId", employeeTenantId);
+if (employeeTenantId?.length) window.Digit.SessionStorage.set("Employee.tenantId", employeeTenantId);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  if (employeeTenantId?.length) window.Digit.SessionStorage.set("Employee.tenantId", employeeTenantId);

🧰 Tools

🪛 Biome (1.9.4)

[error] 54-54: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

16-16: ⚠️ Potential issue

Replace var with const

Using var for variable declarations is discouraged as it can lead to scope-related issues. Use const instead since this variable is not being reassigned.

-var Digit = window.Digit || {};
+const Digit = window.Digit || {};

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

const Digit = window.Digit || {};

🧰 Tools

🪛 Biome (1.9.4)

[error] 15-16: Use let or const instead of var.

A variable declared with var is accessible in the whole module. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.

(lint/style/noVar)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDocumentsPreview.js (3)

17-19: 🧹 Nitpick (assertive)

Use const instead of let for non-reassigned variable

The acc variable is only assigned once, so it should use const instead of being implicitly declared with let.

-    let acc = documents?.map((i) => (i?.id ? i?.id : i?.filestoreId));
+    const acc = documents?.map((i) => (i?.id ? i?.id : i?.filestoreId));

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    const acc = documents?.map((i) => (i?.id ? i?.id : i?.filestoreId));
    setFilesArray(acc);
  }, [documents]);

🧰 Tools

🪛 Biome (1.9.4)

[error] 17-17: This let declares a variable that is only assigned once.

'acc' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

---

41-45: ⚠️ Potential issue

Add keyboard accessibility support

The click handler needs keyboard event support for accessibility. Add onKeyDown handler for keyboard navigation.

-                  <div onClick={() => setShowPreview(true)}>
+                  <div 
+                    onClick={() => setShowPreview(true)}
+                    onKeyDown={(e) => e.key === 'Enter' && setShowPreview(true)}
+                    role="button"
+                    tabIndex={0}
+                  >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                  <div 
                    onClick={() => setShowPreview(true)}
                    onKeyDown={(e) => e.key === 'Enter' && setShowPreview(true)}
                    role="button"
                    tabIndex={0}
                  >
                    <div style={{ display: "flex" }}>
                      <XlsxFile />
                    </div>
                    <p className="campaign-document-title">

🧰 Tools

🪛 Biome (1.9.4)

[error] 41-41: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)

---

74-84: ⚠️ Potential issue

Add key prop to mapped InfoCard components

React requires a unique key prop when mapping over elements to help with efficient rendering and updates.

-            {cardErrors?.map((i) => (
+            {cardErrors?.map((i, index) => (
               <InfoCard
+                key={`error-${index}`}
                 populators={{
                   name: "infocard",
                 }}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

            {cardErrors?.map((i, index) => (
              <InfoCard
                key={`error-${index}`}
                populators={{
                  name: "infocard",
                }}
                variant="error"
                text={t(i?.error ? i?.error : i?.message)}
                hasAdditionalElements={true}
                // additionalElements={[<Button label={i?.button} onClick={i.onClick} />]}
              />
            ))}

🧰 Tools

🪛 Biome (1.9.4)

[error] 75-83: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/coreOverride.scss (3)

148-165: 🧹 Nitpick (assertive)

Remove or uncomment large commented code block

Large blocks of commented code should either be removed if they're no longer needed or uncommented if they're still required. This improves code maintainability.

---

130-131: 🛠️ Refactor suggestion

Use theme variables instead of hard-coded colors

Hard-coded colors should be replaced with theme variables for consistency and maintainability.

-    background: #0b4b66 !important;
-    color: #fff;
+    background: theme(digitv2.lightTheme.primary) !important;
+    color: theme(digitv2.lightTheme.paper);

Committable suggestion skipped: line range outside the PR's diff.

---

72-72: 🛠️ Refactor suggestion

Avoid using !important declarations

Using !important is generally considered bad practice as it breaks the natural cascading of CSS and makes styles harder to maintain. Consider increasing specificity instead.

-    color: theme(digitv2.lightTheme.primary) !important;
+    .inbox-search-wrapper .link-label {
+      color: theme(digitv2.lightTheme.primary);
+    }

Committable suggestion skipped: line range outside the PR's diff.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js (10)

1-26: 🛠️ Refactor suggestion

Review mandatory flag and error handling for campaign type selection.

The campaign type selection appears to be a critical first step, but has some potential issues:

1. isMandatory is set to false but this seems to be a required selection
2. Error handling configuration is missing
3. The purpose of skipAPICall is unclear and undocumented

Consider applying these improvements:

 {
   isMandatory: false,
   key: "projectType",
   type: "component",
   skipAPICall: true,
+  // Add comment explaining skipAPICall purpose
   component: "CampaignSelection",
   withoutLabel: true,
   disable: false,
   customProps: {
     module: "HCM",
     sessionData: totalFormData,
     isSubmitting: isSubmitting,
   },
   populators: {
     name: "projectType",
+    required: true,
+    error: "CAMPAIGN_TYPE_REQUIRED"
   },
 }

Committable suggestion skipped: line range outside the PR's diff.

---

108-133: ⚠️ Potential issue

Fix sessionData placement and remove commented code.

The cycle configuration has two issues:

1. sessionData is incorrectly placed in populators instead of customProps
2. Contains unnecessary commented code

   customProps: {
     module: "HCM",
+    sessionData: totalFormData,
   },
   populators: {
     name: "cycleConfiguration",
-    sessionData: totalFormData,
-    // optionsKey: "code",
     error: "ES__REQUIRED",
     required: true,
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "3",
          key: "5",
          name: "HCM_CAMPAIGN_CYCLE_CONFIGURE",
          body: [
            {
              isMandatory: false,
              key: "cycleConfigure",
              type: "component",
              component: "CycleConfiguration",
              withoutLabelFieldPair: true,
              withoutLabel: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
              },
              populators: {
                name: "cycleConfiguration",
                error: "ES__REQUIRED",
                required: true,
              },
            },
          ],
        },

---

134-159: 🧹 Nitpick (assertive)

Remove commented code from delivery rule configuration.

The configuration contains unnecessary commented code.

   populators: {
     name: "deliveryRule",
-    // optionsKey: "code",
     error: "ES__REQUIRED",
     required: true,
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "3",
          key: "6",
          name: "HCM_CAMPAIGN_DELIVERY_DATA",
          body: [
            {
              isMandatory: false,
              key: "deliveryRule",
              type: "component",
              component: "DeliveryRule",
              withoutLabelFieldPair: true,
              withoutLabel: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
              },
              populators: {
                name: "deliveryRule",
                error: "ES__REQUIRED",
                required: true,
              },
            },
          ],
        },

---

160-186: 🛠️ Refactor suggestion

Add error message for required boundary data upload.

The boundary data upload configuration marks the field as required but lacks an error message configuration.

   populators: {
     name: "uploadBoundary",
-    // optionsKey: "code",
-    // error: "ES__REQUIRED",
+    error: "BOUNDARY_UPLOAD_REQUIRED",
     required: true,
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "4",
          key: "7",
          name: "HCM_CAMPAIGN_UPLOAD_BOUNDARY_DATA",
          body: [
            {
              isMandatory: false,
              key: "uploadBoundary",
              type: "component",
              component: "UploadData",
              withoutLabel: true,
              withoutLabelFieldPair: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                type: "boundary",
              },
              populators: {
                name: "uploadBoundary",
                error: "BOUNDARY_UPLOAD_REQUIRED",
                required: true,
              },
            },
          ],
        },

---

29-54: 🧹 Nitpick (assertive)

Standardize mandatory field configuration.

The campaign name configuration uses mandatoryOnAPI: true while other steps use required: true in populators. This inconsistency could lead to confusion.

Consider standardizing the mandatory field configuration:

 {
-  isMandatory: false,
+  isMandatory: true,
   key: "campaignName",
   type: "component",
   component: "CampaignName",
-  mandatoryOnAPI: true,
   withoutLabel: true,
   withoutLabelFieldPair: true,
   disable: false,
   customProps: {
     module: "HCM",
     sessionData: totalFormData,
     isSubmitting: isSubmitting,
   },
   populators: {
     name: "campaignName",
     required: true,
+    error: "CAMPAIGN_NAME_REQUIRED"
   },
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "1",
          key: "2",
          name: "HCM_CAMPAIGN_NAME",
          body: [
            {
              isMandatory: true,
              key: "campaignName",
              type: "component",
              component: "CampaignName",
              withoutLabel: true,
              withoutLabelFieldPair: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                isSubmitting: isSubmitting,
              },
              populators: {
                name: "campaignName",
                required: true,
                error: "CAMPAIGN_NAME_REQUIRED"
              },
            },
          ],
        },

---

82-107: 🛠️ Refactor suggestion

Add error message for required campaign dates.

The campaign dates configuration marks the field as required but lacks an error message configuration.

   populators: {
     name: "campaignDates",
-    // optionsKey: "code",
-    // error: "ES__REQUIRED",
+    error: "CAMPAIGN_DATES_REQUIRED",
     required: true,
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "3",
          key: "4",
          name: "HCM_CAMPAIGN_DATE",
          body: [
            {
              isMandatory: false,
              key: "campaignDates",
              type: "component",
              component: "CampaignDates",
              withoutLabel: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                isSubmitting: isSubmitting,
              },
              populators: {
                name: "campaignDates",
                error: "CAMPAIGN_DATES_REQUIRED",
                required: true,
              },
            },
          ],
        },

---

212-236: 🛠️ Refactor suggestion

Add error message for required user data upload.

The user data upload configuration marks the field as required but lacks an error message configuration.

   populators: {
     name: "uploadUser",
     required: true,
+    error: "USER_UPLOAD_REQUIRED"
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "6",
          key: "9",
          name: "HCM_CAMPAIGN_UPLOAD_USER_DATA",
          body: [
            {
              isMandatory: false,
              key: "uploadUser",
              type: "component",
              component: "UploadData",
              withoutLabel: true,
              withoutLabelFieldPair: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                type: "userWithBoundary",
              },
              populators: {
                name: "uploadUser",
                required: true,
                error: "USER_UPLOAD_REQUIRED"
              },
            },
          ],
        },

---

237-267: 🧹 Nitpick (assertive)

Remove commented code from summary configuration.

The summary configuration contains unnecessary commented code.

   populators: {
     name: "summary",
-    // optionsKey: "code",
-    // error: "ES__REQUIRED",
     required: true,
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "7",
          key: "10",
          isLast: true,
          body: [
            {
              isMandatory: false,
              key: "summary",
              type: "component",
              component: "CampaignSummary",
              withoutLabel: true,
              withoutLabelFieldPair: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                summaryErrors: summaryErrors
              },
              populators: {
                name: "summary",
                required: true,
              },
            },
          ],
        },
      ],
    },
  ];
};

---

187-211: 🛠️ Refactor suggestion

Add error message for required facility data upload.

The facility data upload configuration marks the field as required but lacks an error message configuration.

   populators: {
     name: "uploadFacility",
     required: true,
+    error: "FACILITY_UPLOAD_REQUIRED"
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "5",
          key: "8",
          name: "HCM_CAMPAIGN_UPLOAD_FACILITY_DATA",
          body: [
            {
              isMandatory: false,
              key: "uploadFacility",
              type: "component",
              component: "UploadData",
              withoutLabel: true,
              withoutLabelFieldPair: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                type: "facilityWithBoundary",
              },
              populators: {
                name: "uploadFacility",
                required: true,
                error: "FACILITY_UPLOAD_REQUIRED"
              },
            },
          ],
        },

---

55-81: 🧹 Nitpick (assertive)

Remove commented code from boundary selection configuration.

The configuration contains commented out code that should be removed to maintain cleaner code.

   populators: {
     name: "boundaryType",
-    // optionsKey: "code",
     error: "ES__REQUIRED",
     required: true,
   },

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

        {
          stepCount: "2",
          key: "3",
          name: "HCM_CAMPAIGN_SELECTING_BOUNDARY_DATA",
          body: [
            {
              isMandatory: false,
              key: "boundaryType",
              type: "component",
              component: "SelectingBoundaries",
              withoutLabelFieldPair: true,
              withoutLabel: true,
              disable: false,
              customProps: {
                module: "HCM",
                sessionData: totalFormData,
                dataParams: dataParams,
              },
              populators: {
                name: "boundaryType",
                error: "ES__REQUIRED",
                required: true,
              },
            },
          ],
        },

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss (2)

198-202: 🧹 Nitpick (assertive)

Remove unnecessary !important declaration.

The .uploaded-file class uses an unnecessary !important declaration for display flex.

 .uploaded-file {
   border: 1px solid rgba(214, 213, 212, 1);
   min-height: 4.75rem;
   background-color: rgb(256, 252, 252);
-  display: flex !important;
+  display: flex;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    .uploaded-file {
        border: 1px solid rgba(214, 213, 212, 1);
        min-height: 4.75rem;
        background-color: rgb(256, 252, 252);
        display: flex;

---

262-270: 🧹 Nitpick (assertive)

Remove duplicate display:flex declaration.

The .loader-container class has duplicate display: flex declarations.

 .loader-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
-  display: flex;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.7);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    .loader-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.7);

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (1)

179-181: 🧹 Nitpick (assertive)

Standardize unit usage.

The .cycle-paragraph class mixes units using both px and rem. Consider standardizing to rem for consistency.

 .cycle-paragraph {
   font-weight: 700;
-  font-size: 24px;
+  font-size: 1.5rem;
   color: #505a5f;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  font-weight: 700;
  font-size: 1.5rem;
  color: #505a5f;

health/micro-ui/web/micro-ui-internals/packages/css/src/typography.scss (1)

1-512: 🧹 Nitpick (assertive)

Consider refactoring to reduce code duplication

The current implementation has significant duplication in media query breakpoints and font declarations. Consider:

1. Creating mixins for common font properties
2. Extracting media query breakpoints into variables
3. Creating a typography mixin for responsive font sizes

Example refactor:

// Font mixins
@mixin heading-base {
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.bold);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.lineHeight.normal);
}

// Breakpoint variables
$mobile: theme(digitv2.screens.mobile);
$tablet: theme(digitv2.screens.tablet);
$desktop: theme(digitv2.screens.desktop);

// Responsive typography mixin
@mixin responsive-font($type) {
  @media (max-width: 30rem) {
    font-size: theme(digitv2.fontSize.#{$type}.mobile);
  }
  
  @media (min-width: 30.063rem) and (max-width: 47.938rem) {
    font-size: theme(digitv2.fontSize.#{$type}.tablet);
  }
  
  @media (min-width: 48rem) {
    font-size: theme(digitv2.fontSize.#{$type}.desktop);
  }
}

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DocumentIcon.js (3)

2-2: 🧹 Nitpick (assertive)

Add JSDoc documentation for component props

Document the component's props for better maintainability and developer experience.

Add this documentation above the component:

/**
 * Document icon component
 * @param {Object} props - Component props
 * @param {Object} [props.styles={}] - Custom styles to apply to the SVG
 * @param {string} [props.className] - Additional CSS class names
 * @param {string} [props.fill="#D4351C"] - Fill color for the SVG
 * @returns {JSX.Element} Document icon SVG
 */

---

20-24: 🧹 Nitpick (assertive)

Consider optimizing the SVG data

The base64 encoded image data significantly increases the bundle size. Consider:

1. Using an external image file
2. Optimizing the SVG path data
3. Using a sprite sheet for multiple icons

---

1-29: ⚠️ Potential issue

Add accessibility attributes to SVG

The SVG lacks accessibility attributes which is crucial for screen readers. Add appropriate ARIA labels and role.

Apply this diff:

-  <svg xmlns="http://www.w3.org/2000/svg" width="84" height="79" fill="none" viewBox="0 0 84 79">
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width="84" 
+    height="79" 
+    fill="none" 
+    viewBox="0 0 84 79"
+    role="img"
+    aria-label="Document icon"
+  >
+    <title>Document icon</title>

🧰 Tools

🪛 Biome (1.9.4)

[error] 3-3: Alternative text title element cannot be empty

For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.

(lint/a11y/noSvgWithoutTitle)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CycleDetaisPreview.js (1)

61-68: 🧹 Nitpick (assertive)

Remove commented code

Remove the commented-out LabelFieldPair blocks as they are no longer needed and add noise to the codebase.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/README.md (1)

1-159: 🧹 Nitpick (assertive)

Improve README formatting and accessibility

Several formatting issues need to be addressed:

1. Fix grammar: "this versions" should be "these versions"
2. Add missing articles: "the" before "core module" and "search screen"
3. Fix multiple consecutive blank lines
4. Properly format URLs with markdown syntax

Example fixes:

-List of Screens available in this versions
+List of Screens available in these versions

-View master data from search screen
+View the master data from the search screen

-Bare URL used
+[Documentation Site](https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui)

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 LanguageTool

[grammar] ~54-~54: The singular determiner ‘this’ may not agree with the plural noun ‘versions’. Did you mean “these”?
Context: ...L227)_ ## List of Screens available in this versions were as follows 1 . Search Ma...

(THIS_NNS)

---

[uncategorized] ~66-~66: You might be missing the article “the” here.
Context: ... data. > -View the master data from search screen > -Disable/Enable the master...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

---

[uncategorized] ~84-~84: You might be missing the article “the” here.
Context: ...s to use Workbench module 1 . Assuming core module is already updated with 1.5.38+ ...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

---

[uncategorized] ~87-~87: A punctuation mark might be missing here.
Context: .../src/hooks/useCustomAPIMutationHook.js reference:: https://github.com/egovernments/DIGIT...

(AI_EN_LECTOR_MISSING_PUNCTUATION)

---

[grammar] ~154-~154: This phrase is duplicated. You should probably use “DIGIT Frontend” only once.
Context: ...m/jagankumar-egov) ### Published from DIGIT Frontend DIGIT Frontend Repo (https://github.com/egovernments/D...

(PHRASE_REPETITION)

🪛 Markdownlint (0.35.0)

63-63: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

74-74: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

88-88: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

101-101: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

136-136: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

154-154: Expected: 0 or 2; Actual: 1
Trailing spaces

(MD009, no-trailing-spaces)

---

60-60: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

70-70: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

71-71: Expected: 1; Actual: 3
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

108-108: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

109-109: Expected: 1; Actual: 3
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

139-139: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

153-153: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

157-157: Expected: 1; Actual: 2
Multiple consecutive blank lines

(MD012, no-multiple-blanks)

---

154-154: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines

(MD022, blanks-around-headings)

---

92-92: null
Fenced code blocks should be surrounded by blank lines

(MD031, blanks-around-fences)

---

102-102: null
Fenced code blocks should be surrounded by blank lines

(MD031, blanks-around-fences)

---

104-104: null
Fenced code blocks should be surrounded by blank lines

(MD031, blanks-around-fences)

---

89-89: null
Bare URL used

(MD034, no-bare-urls)

---

106-106: null
Bare URL used

(MD034, no-bare-urls)

---

146-146: null
Bare URL used

(MD034, no-bare-urls)

---

147-147: null
Bare URL used

(MD034, no-bare-urls)

---

155-155: null
Bare URL used

(MD034, no-bare-urls)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AddProductField.js (4)

96-96: 🧹 Nitpick (assertive)

Remove commented out styles

Remove commented out style properties to keep the code clean.

Also applies to: 124-124

---

17-17: 🧹 Nitpick (assertive)

Consider using a more descriptive initial state

The initial state uses null values which could lead to controlled/uncontrolled component warnings. Consider using empty strings for text inputs.

-const [productFieldData, setProductFieldData] = useState([{ key: 1, name: null, type: null, variant: null }]);
+const [productFieldData, setProductFieldData] = useState([{ key: 1, name: '', type: '', variant: '' }]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const [productFieldData, setProductFieldData] = useState([{ key: 1, name: '', type: '', variant: '' }]);

---

67-67: ⚠️ Potential issue

Add key prop to mapped Card components

React requires a unique key prop for elements in an array to optimize rendering and maintain component state correctly.

-<Card className="add-new-product-container">
+<Card key={field.key} className="add-new-product-container">

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools

🪛 Biome (1.9.4)

[error] 67-67: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

71-88: ⚠️ Potential issue

Improve accessibility for delete button

Add keyboard event handlers for better accessibility. Also, consider using a button element instead of a div for semantic HTML.

-<div
+<button
   onClick={() => deleteProductField(field.key)}
+  onKeyDown={(e) => e.key === 'Enter' && deleteProductField(field.key)}
+  role="button"
+  tabIndex={0}
   className="delete-button"
>
   <DustbinIcon />
   {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
-</div>
+</button>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                <button
                  onClick={() => deleteProductField(field.key)}
                  onKeyDown={(e) => e.key === 'Enter' && deleteProductField(field.key)}
                  role="button"
                  tabIndex={0}
                  className="delete-button"
                  style={{
                    cursor: "pointer",
                    fontWeight: "600",
                    marginLeft: "1rem",
                    fontSize: "1rem",
                    color: PRIMARY_COLOR,
                    display: "flex",
                    gap: "0.5rem",
                    alignItems: "center",
                    marginTop: "1rem",
                  }}
                >
                  <DustbinIcon />
                  {t(`CAMPAIGN_DELETE_ROW_TEXT`)}
                </button>
              )}

🧰 Tools

🪛 Biome (1.9.4)

[error] 71-84: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.

Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

(lint/a11y/useKeyWithClickEvents)