Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUGFIX/HCMPRE- :made ui/ux changes for campaign name #2066

Closed
wants to merge 3 commits into from

Conversation

Bhavya-egov
Copy link
Contributor

@Bhavya-egov Bhavya-egov commented Dec 20, 2024

Summary by CodeRabbit

  • New Features

    • Updated stylesheet link for the health UI component to the latest version.
    • Introduced a new TagComponent for improved rendering of campaign names across multiple components.
  • Bug Fixes

    • Improved error handling and validation logic for campaign dates and checklist submissions.
  • Chores

    • Cleaned up unused styles and adjusted spacing for better layout consistency across components.

@Bhavya-egov Bhavya-egov requested a review from a team as a code owner December 20, 2024 10:56
Copy link
Contributor

coderabbitai bot commented Dec 20, 2024

📝 Walkthrough
📝 Walkthrough

Walkthrough

This pull request encompasses multiple changes across the health micro UI project, primarily focusing on updating stylesheet links, refining CSS styles, and making minor modifications to various React components. The changes span multiple files within the campaign manager module, involving updates to HTML files, SCSS stylesheets, and React components. The modifications are predominantly cosmetic and structural, with a consistent theme of enhancing visual representation and streamlining component logic.

Changes

File Path Change Summary
health/micro-ui/web/micro-ui-internals/example/public/index.html Updated CSS stylesheet link from version 0.2.3 to 0.2.4
health/micro-ui/web/public/index.html Updated CSS stylesheet link from version 0.2.2 to 0.2.4
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss Reduced .stepper-card height, removed border and height specifications for .campaign-tag
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss Added new .summary-parent-group class, adjusted margins and paddings
Multiple components in campaign-manager module Updated Tag component with type="monochrome" and stroke={true} properties

Possibly related PRs

Suggested reviewers

  • jagankumar-egov

Poem

🐰 A Rabbit's Stylesheet Sonnet 🎨

With monochrome tags and strokes so bright,
Our UI dances in stylish delight.
CSS tweaks, a version's gentle rise,
From .2.3 to .2.4 - what surprise!
Hop, hop, hurray for design's sweet flight! 🌈

Tip

CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command @coderabbitai generate docstrings to have CodeRabbit automatically generate docstrings for your pull request. We would love to hear your feedback on Discord.


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
🪧 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 generate docstrings to generate docstrings for this PR. (Beta)
  • @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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 11

🔭 Outside diff range comments (27)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)

Line range hint 7-377: Consider architectural improvements for better maintainability

The component could benefit from the following improvements:

  1. Move the complex data transformation functions (mergeObjects, loopAndReturn, reverseDeliveryRemap) to a separate utility file to improve maintainability and testability
  2. Consider splitting the component into smaller, more focused components to follow the Single Responsibility Principle
  3. Implement a more robust error boundary for better error handling

Would you like me to help create a detailed refactoring plan that includes:

  • A new utility file structure for the data transformation functions
  • A component breakdown strategy
  • Implementation of an error boundary?
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (3)

Line range hint 169-182: Fix PopUp component children prop usage

The PopUp component has an empty children array but renders MobileChecklist outside of it. This is inconsistent and could lead to confusion.

Apply this fix:

 <PopUp
     className={"custom-pop-up"}
     type={"default"}
     heading={t("CHECKLIST_PREVIEW")}
-    children={[
-
-    ]}
     onOverlayClick={() => {
         setShowPopUp(false);
     }}
     onClose={() => {
         setShowPopUp(false);
     }}

Line range hint 35-54: Add cleanup functions to useEffect hooks

The useEffect hooks should include cleanup functions to prevent memory leaks, especially for data fetching operations.

Consider updating the useEffect:

 useEffect(() => {
+    let isSubscribed = true;
     if (data) {
         data.forEach((question) => {
             if (question.type.code === "String") {
                 question.type.code = "Short Answer";
             }
         });
-        setViewData(data);
+        if (isSubscribed) {
+            setViewData(data);
+        }
     }
+    return () => {
+        isSubscribed = false;
+    };
 }, [data])

Line range hint 1-230: Consider breaking down the component for better maintainability

The ViewChecklist component is handling multiple responsibilities including:

  • Data fetching and transformation
  • Question organization
  • Preview functionality
  • Form rendering

Consider extracting these into separate components or custom hooks for better maintainability and reusability.

Suggested structure:

  1. Create a custom hook for data fetching and transformation
  2. Extract QuestionOrganizer into a separate utility
  3. Move PreviewPopup into its own component
  4. Create a separate FormSection component

Would you like me to help generate the refactored component structure?

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

Line range hint 30-154: Consider refactoring hooks for better maintainability

The component logic could benefit from some refactoring:

  1. Consider consolidating the URL parameter management into a custom hook (e.g., useUrlParams)
  2. Toast management logic could be extracted into a reusable hook (e.g., useToast)
  3. The multiple useEffect hooks could potentially be consolidated

Example implementation of useToast:

const useToast = (duration = 5000) => {
  const [toast, setToast] = useState(null);
  
  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), duration);
      return () => clearTimeout(timer);
    }
  }, [toast, duration]);
  
  return [toast, setToast];
};

Line range hint 156-176: Consider improving component structure and CSS organization

The component structure could benefit from some improvements:

  1. The nested div structure with multiple className assignments suggests potential CSS maintainability issues
  2. Loading state handling could be consolidated into a single pattern
  3. Consider using CSS modules or styled-components for better CSS organization

Consider extracting the card container structure into a separate component:

const SummaryCardContainer = ({ children, className }) => (
  <div className={`card-container ${className || ''}`}>
    {children}
  </div>
);
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1)

Line range hint 1-190: Consider architectural improvements for better maintainability

The component handles multiple responsibilities that could be better organized:

  1. URL parameter management could be extracted into a custom hook:
const useUrlParams = () => {
  const history = useHistory();
  const updateParams = (params) => {
    const url = new URL(window.location.href);
    Object.entries(params).forEach(([key, value]) => {
      url.searchParams.set(key, value);
    });
    window.history.replaceState({}, "", url);
  };
  return { updateParams };
};
  1. Toast management could be extracted into a reusable hook:
const useToast = (duration = 5000) => {
  const [toast, setToast] = useState(null);
  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), duration);
      return () => clearTimeout(timer);
    }
  }, [toast, duration]);
  return [toast, setToast];
};
  1. Step management could be simplified by using an enum or constants for step values.

These changes would improve code organization and reusability across the application.

Would you like me to provide more detailed implementations for any of these suggestions?

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

Line range hint 76-80: Critical: Fix infinite loop in useEffect

This useEffect hook has no dependency array and runs on every render, potentially causing an infinite loop and performance issues. Additionally, it's limited to 5 executions which is a code smell.

Suggested fix:

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

Line range hint 41-47: Refactor: Optimize state updates from props

The useEffect hook directly sets state based on props without proper dependency array, which could cause unnecessary re-renders.

Suggested improvement:

 useEffect(() => {
   setDates({
     startDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate,
     endDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate,
   });
   setStartDate(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate);
   setEndDate(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate);
-}, [props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates]);
+}, [props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate, 
+    props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate]);

Line range hint 49-59: Refactor: Consolidate date validation logic

The component has multiple useEffect hooks handling validation with overlapping responsibilities. This could lead to confusing behavior and makes the code harder to maintain.

Consider consolidating the validation logic into a single useEffect:

+ const validateDates = () => {
+   if (props?.props?.isSubmitting) {
+     if (!startDate && !endDate) {
+       return { startDate: "CAMPAIGN_FIELD_MANDATORY", endDate: "CAMPAIGN_FIELD_MANDATORY" };
+     }
+     if (!startDate) {
+       return { startDate: "CAMPAIGN_FIELD_MANDATORY" };
+     }
+     if (!endDate) {
+       return { endDate: "CAMPAIGN_FIELD_MANDATORY" };
+     }
+   }
+   
+   if (startValidation) {
+     if (!startDate) {
+       return { startDate: "CAMPAIGN_START_DATE_ERROR" };
+     }
+     if (!endDate) {
+       return { endDate: "CAMPAIGN_END_DATE_ERROR" };
+     }
+     if (new Date(endDate).getTime() < new Date(startDate).getTime()) {
+       return { endDate: "CAMPAIGN_END_DATE_BEFORE_ERROR" };
+     }
+     if (new Date(endDate).getTime() === new Date(startDate).getTime()) {
+       return { endDate: "CAMPAIGN_END_DATE_SAME_ERROR" };
+     }
+   }
+   
+   return null;
+ };
+
+ useEffect(() => {
+   const validationError = validateDates();
+   setError(validationError);
+   
+   if (!validationError && (startDate || endDate)) {
+     onSelect("campaignDates", { startDate, endDate });
+   }
+ }, [startDate, endDate, props?.props?.isSubmitting, startValidation]);

Also applies to: 60-73

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (1)

Line range hint 200-200: Consider enhancing campaign tag styles for better accessibility

The simplified .campaign-tag styling might benefit from additional improvements:

Consider adding these properties for better visual hierarchy and accessibility:

 .campaign-tag {
   margin-bottom: 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2rem;
 }
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (3)

Line range hint 48-82: Add type checking and defensive programming to boundaryDataGrp function

The function has been enhanced to support hierarchy-based ordering, but could benefit from additional safeguards:

 function boundaryDataGrp(boundaryData, hierarchyDefinition) {
-  if (!hierarchyDefinition) return []; 
+  if (!boundaryData?.length) return [];
+  if (!hierarchyDefinition?.BoundaryHierarchy?.[0]?.boundaryHierarchy?.length) {
+    // Fallback to original grouping if hierarchy is not properly defined
+    return Object.entries(
+      boundaryData.reduce((acc, item) => {
+        acc[item.type] = [...(acc[item.type] || []), item];
+        return acc;
+      }, {})
+    ).map(([type, boundaries]) => ({ type, boundaries }));
+  }

   const groupedData = {};

Line range hint 363-371: Remove duplicate resources prop

The CampaignResourceDocuments component has duplicate resources props:

   props: {
     isUserGenerate: true,
-    resources: processid,
     resources: resourceIdArr,
   },

Line range hint 419-424: Fix potential memory leak in useEffect

The setTimeout cleanup should be handled properly:

   useEffect(() => {
     if (showToast) {
-      setTimeout(closeToast, 5000);
+      const timer = setTimeout(closeToast, 5000);
+      return () => clearTimeout(timer);
     }
   }, [showToast]);
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (3)

Line range hint 25-27: Fix infinite loop in useEffect hook.

The current useEffect implementation creates an infinite loop because:

  1. It updates campaignName state when campaignName changes
  2. This state update triggers a re-render
  3. The re-render causes the effect to run again, creating an infinite cycle
-useEffect(() => {
-  setCampaignName(campaignName);
-}, campaignName);

If you need to sync the URL param with state, consider:

useEffect(() => {
  const name = searchParams.get("name");
  if (name !== campaignName) {
    setCampaignName(name);
  }
}, [searchParams]); // Only react to URL changes

Line range hint 91-95: Document the reason for disabling step navigation.

The function now prevents navigation and shows an error, but:

  1. The commented-out navigation code should be removed for maintainability
  2. Consider adding a comment explaining why campaign steps can't be clicked
-const onStepClick = (step) => {
-    setShowToast({ key: "error", label: "CAMPAIGN_CANNOT_CLICK" });
-    return;
-  // history.push(`/${window.contextPath}/employee/campaign/setup-campaign?id=${id}&preview=true&action=false&actionBar=true&key=13&summary=true`);
-};
+// Steps are disabled in search view to prevent navigation during checklist configuration
+const onStepClick = () => {
+  setShowToast({ key: "error", label: "CAMPAIGN_CANNOT_CLICK" });
+};

Line range hint 1-248: Consider component refactoring for maintainability.

The component would benefit from the following architectural improvements:

  1. Extract the popup form into a separate component
  2. Remove large blocks of commented code (e.g., Stepper, Card sections)
  3. Consider splitting the search functionality into a separate container component

This would:

  • Improve code maintainability
  • Make the component's responsibilities clearer
  • Make testing easier
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (3)

Line range hint 391-424: Consider enhancing error handling in onSubmit function

The current error handling only shows a generic toast message. Consider:

  1. Adding specific error messages based on the error type
  2. Logging detailed errors for debugging
  3. Implementing retry logic for network failures
 try {
     const data = await mutateAsync(payload);
     // ... existing success handling
 } catch (error) {
-    setShowToast({ label: "CHECKLIST_UPDATE_FAILED", isError: "true" });
+    const errorMessage = error.response?.data?.message || "CHECKLIST_UPDATE_FAILED";
+    console.error("Checklist update failed:", error);
+    setShowToast({ 
+        label: errorMessage, 
+        isError: "true" 
+    });
 }

Line range hint 1-586: Consider refactoring for better maintainability

The component is quite large and handles multiple responsibilities. Consider:

  1. Extract question transformation logic into a separate utility file
  2. Create custom hooks for data fetching and state management
  3. Split the preview functionality into a separate component

Example structure:

// hooks/useChecklistData.js
export const useChecklistData = (tenantId, serviceCode) => {
  // Move data fetching logic here
};

// utils/questionTransformer.js
export const transformQuestions = (questions, tenantId, idCodeMap) => {
  // Move question transformation logic here
};

// components/ChecklistPreview.js
export const ChecklistPreview = ({ previewData, onClose }) => {
  // Move preview popup logic here
};

Consider using uuid package instead of crypto.randomUUID()

The codebase already has the uuid package as a dependency (version ^9.0.1). Instead of using crypto.randomUUID() which has limited browser support, use uuid.v4() from the uuid package which is more widely supported and serves the same purpose.

Locations that need to be updated:

  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateQuestion.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateQuestionContext.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
🔗 Analysis chain

Line range hint 108-108: Ensure browser compatibility for crypto.randomUUID()

The usage of crypto.randomUUID() might not be supported in older browsers. Consider adding a fallback mechanism.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for crypto.randomUUID() usage across the codebase
rg -l "crypto\.randomUUID\(\)"

# Check for existing polyfills
rg -l "polyfill.*crypto"

Length of output: 500


Script:

#!/bin/bash
# Check for any crypto polyfill or UUID generation utility implementations
rg -l "uuid|UUID|generateUUID|getUUID"

# Check the content of package.json for UUID-related dependencies
fd "package.json" --exec cat {} \; | grep -i "uuid"

# Look at the actual usage context of crypto.randomUUID
rg "crypto\.randomUUID" -A 2 -B 2

Length of output: 18783

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

Line range hint 183-306: Consider refactoring for better maintainability.

The reverseDeliveryRemap function has become quite complex. Consider:

  1. Breaking down the condition parsing logic into separate functions
  2. Adding error handling for malformed conditions
  3. Adding JSDoc documentation for the complex logic

Example refactor:

+ /**
+  * Parses a preview condition string into attribute objects
+  * @param {string} condition - The condition string to parse
+  * @returns {Array<Object>} Array of parsed attributes
+  */
+ function parsePreviewCondition(condition) {
+   const attributes = [];
+   const inBetweenMatch = condition.match(/(\d+)(<=|<|>=|>)(\w+)and(\w+)(<=|<|>=|>)(\d+)/);
+   if (inBetweenMatch) {
+     return parseInBetweenCondition(inBetweenMatch);
+   }
+   return parseRegularCondition(condition);
+ }

function reverseDeliveryRemap(data, t) {
  if (!data) return null;
  // ... existing setup code ...

  const parseConditionAndCreateRules = (condition, ruleKey, products) => {
    let attributes = [];
    if (isPreview) {
-     // Handle preview condition...
-     const inBetweenMatch = condition.match...
+     attributes = parsePreviewCondition(condition);
    } else {
      // ... rest of the code
    }
    return [{
      ruleKey: ruleKey + 1,
      delivery: {},
      products,
      attributes,
    }];
  };
  // ... rest of the code
}

Line range hint 799-806: Avoid direct object mutation in React.

Direct mutation of the updatedObject inside useEffect could lead to unexpected behavior. Consider using proper state management.

Consider this approach:

-const updatedObject = { ...data };
+const [updatedData, setUpdatedData] = useState(data);

useEffect(() => {
-  updatedObject.data.startDate = startDate;
-  updatedObject.data.endDate = endDate;
-  updatedObject.cards[0].sections[0].values[2].value = Digit.Utils.date.convertEpochToDate(startDate);
-  updatedObject.cards[0].sections[0].values[3].value = Digit.Utils.date.convertEpochToDate(endDate);
+  setUpdatedData(prevData => ({
+    ...prevData,
+    data: {
+      ...prevData.data,
+      startDate,
+      endDate
+    },
+    cards: prevData.cards.map((card, index) => 
+      index === 0 ? {
+        ...card,
+        sections: card.sections.map(section => ({
+          ...section,
+          values: section.values.map((value, i) => ({
+            ...value,
+            value: i === 2 ? Digit.Utils.date.convertEpochToDate(startDate) :
+                   i === 3 ? Digit.Utils.date.convertEpochToDate(endDate) :
+                   value.value
+          }))
+        }))
+      } : card
+    )
+  }));
}, [startDate, endDate]);
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js (1)

Line range hint 53-54: Improve style organization in JSX

The inline styles could be moved to the corresponding SCSS file for better maintainability.

Consider moving the inline styles to SCSS:

-<div className="digit-tag-container" style={{ display: "flex", maxWidth: "100%" , margin: "0rem" }}>
+<div className="digit-tag-container">

And add to your SCSS file:

.digit-tag-container {
  display: flex;
  max-width: 100%;
  margin: 0;
}
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2)

Line range hint 39-56: Refactor validation logic for better maintainability.

The validation logic has multiple nested conditions and repetitive checks. Consider extracting these into separate helper functions.

+ const isValidMRDNProject = (data, cycles) => {
+   return data?.startDate && 
+          data?.endDate && 
+          cycles?.every(cycle => cycle?.startDate && cycle?.endDate);
+ };
+
+ const isValidNonMRDNProject = (data) => {
+   return data?.startDate && data?.endDate;
+ };
+
 const checkValid = (data) => {
-  if (DateWithBoundary) {
-    const temp = data?.dateWithBoundary;
-    const allCycleDateValid = temp?.projectType === "MR-DN" 
-    ? temp.map((i) => i?.additionalDetails?.projectType?.cycles.every((j) => j?.startDate && j?.endDate)).every((k) => k === true) 
-    : true;
-    const allDateValid = temp.every((i) => i?.startDate && i?.endDate);
-
-    if (temp?.projectType === "MR-DN" && allCycleDateValid && allDateValid) {
-      return true;
-    }
-    else if (temp?.projectType !== "MR-DN" && allDateValid) {
-      return true;
-    }
-    return false;
-  } else if (!DateWithBoundary) {
-    const cycleDateValid = data?.dateAndCycle?.additionalDetails?.projectType?.cycles?.every((item) => item?.startDate && item?.endDate);
-    if (data?.dateAndCycle?.projectType === "MR-DN" && data?.dateAndCycle?.startDate && data?.dateAndCycle?.endDate && cycleDateValid) {
-      return true;
-    }
-    else if (data?.dateAndCycle?.projectType !== "MR-DN" && data?.dateAndCycle?.startDate && data?.dateAndCycle?.endDate) {
-      return true;
-    }
-    return false;
-  }
+  const PROJECT_TYPE = {
+    MR_DN: "MR-DN"
+  };
+
+  if (!data) return false;
+
+  const formData = DateWithBoundary ? data?.dateWithBoundary : data?.dateAndCycle;
+  const projectType = DateWithBoundary ? formData?.projectType : formData?.projectType;
+  const cycles = DateWithBoundary 
+    ? formData?.additionalDetails?.projectType?.cycles
+    : formData?.additionalDetails?.projectType?.cycles;
+
+  return projectType === PROJECT_TYPE.MR_DN
+    ? isValidMRDNProject(formData, cycles)
+    : isValidNonMRDNProject(formData);
 };

Line range hint 91-106: Remove or update commented code in onConfirm.

The commented code for endDate adjustment suggests incomplete changes. Either implement the functionality or remove the comments to maintain clean code.

- // updating the endDate by +1 sec and -1 sec so that backend logic for ancestor update work
- const payload = formData?.dateWithBoundary?.map((item) => {
-   let itemEndDate = item?.endDate;
-   let endDate = new Date(item?.endDate);
-   let endSecond = endDate?.getSeconds();
-   // if (endSecond < 59) {
-   //   return {
-   //     ...item,
-   //     endDate: itemEndDate + 1000,
-   //   };
-   // } else {
-   //   return {
-   //     ...item,
-   //     endDate: itemEndDate - 1000,
-   //   };
-   // }
- });
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (2)

Line range hint 7-157: Clean up commented code.

There are large blocks of commented-out functions (restructureData and bbb) that should be removed if they are no longer needed. If these functions might be needed in the future, consider moving them to a separate utility file.


Line range hint 282-299: Fix indentation for better readability.

The indentation in this section is inconsistent. Consider using a consistent indentation level (2 or 4 spaces) throughout the file.

Example fix for the Tag component section:

-        <Tag icon="" label={campaignName} labelStyle={{}} showIcon={false} className={"campaign-tag"} type={"monochrome"} stroke={true}/>
-      <Header>
-        {t(
-          `CAMPAIGN_PROJECT_${
-            tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code
-              ? tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code?.toUpperCase()
-              : tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.toUpperCase()
-          }`
-        )}
-      </Header>
+          <Tag 
+            icon="" 
+            label={campaignName} 
+            labelStyle={{}} 
+            showIcon={false} 
+            className={"campaign-tag"} 
+            type={"monochrome"} 
+            stroke={true}
+          />
+          <Header>
+            {t(
+              `CAMPAIGN_PROJECT_${
+                tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code
+                  ? tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code?.toUpperCase()
+                  : tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.toUpperCase()
+              }`
+            )}
+          </Header>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a34f1db and cabe010.

⛔ Files ignored due to path filters (1)
  • health/micro-ui/web/micro-ui-internals/packages/css/package.json is excluded by !**/*.json
📒 Files selected for processing (22)
  • health/micro-ui/web/micro-ui-internals/example/public/index.html (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1 hunks)
  • health/micro-ui/web/public/index.html (1 hunks)
🧰 Additional context used
📓 Path-based instructions (18)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1)

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

[error] 405-408: 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)

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

1135-1135: Use of the Tag component with new styling attributes looks consistent

The Tag component is appropriately updated with type={"monochrome"} and stroke={true}, aligning with the styling changes described in the summary. This ensures a uniform look-and-feel across the application’s tag-based UI elements.

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

355-355: LGTM! UI enhancement for campaign name tag

The addition of type="monochrome" and stroke={true} props to the Tag component aligns with the UI/UX improvements across the campaign manager module.

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

143-143: LGTM: Tag styling update aligns with module-wide changes

The Tag component update maintains functionality while improving visual consistency across the campaign manager module.

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

155-155: LGTM: Tag component update aligns with UI/UX improvements

The addition of type="monochrome" and stroke={true} to the Tag component is consistent with the UI/UX improvements being made across the campaign manager module.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (2)

516-516: LGTM! Robust implementation of form submission and data handling

The implementation shows good practices:

  • Proper error handling with user feedback
  • Loading states management
  • Comprehensive data transformation
  • Localization support

Also applies to: 517-517, 518-597


Line range hint 598-626: LGTM! Well-structured UI implementation

The UI implementation demonstrates good practices:

  • Clear user feedback mechanisms
  • Proper loading state handling
  • Preview functionality
  • Consistent styling
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1)

218-218: LGTM! UI enhancement for campaign name tag

The addition of type="monochrome" and stroke={true} props to the Tag component aligns with the PR objective of improving the campaign name's UI/UX.

Let's verify the Tag component accepts these props:

✅ Verification successful

LGTM! UI enhancement for campaign name tag is consistent across the codebase

The verification shows that the type="monochrome" and stroke={true} props are consistently used across multiple files in the campaign-manager module, specifically for styling campaign name tags. The same pattern appears in 16 different files, indicating this is an established UI pattern in the application.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify Tag component props in the codebase
# Search for Tag component definition and usage patterns

# Look for Tag component definition
ast-grep --pattern 'export $_ function Tag({ type, stroke, $$$}) {
  $$$
}'

# Look for other usages of Tag with monochrome type
rg 'Tag.*type="monochrome".*stroke={true}'

Length of output: 274


Script:

#!/bin/bash
# Search for Tag component definition with a more flexible pattern
ast-grep --pattern 'export $_ function Tag($_) {
  $$$
}'

# Look for Tag component props interface or type definition
ast-grep --pattern 'interface TagProps {
  $$$
}'

# Look for other usages of Tag with monochrome type (fixed regex)
rg 'Tag.*type="monochrome"'

# Look for Tag component imports to trace its source
rg '@egovernments.*Tag'

Length of output: 167


Script:

#!/bin/bash
# Look for Tag component in node_modules or any local components directory
fd -t f "Tag.js|Tag.jsx|Tag.tsx" 

# Look for any file importing Tag component
rg -l "import.*Tag"

# Look for any usage of Tag component with type prop
rg "<Tag.*type="

Length of output: 7563

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

134-134: LGTM! UI enhancement for campaign name tag

The addition of type="monochrome" and stroke={true} properties to the Tag component improves visual consistency across the campaign management interface.

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (1)

138-140: Verify the stepper card height reduction impact

The height reduction from 39rem to 37rem might affect content visibility. Please ensure that all content fits properly within the reduced height and there's no content overflow.

Run the following script to check for potential overflow issues:

✅ Verification successful

Height reduction appears safe for stepper card content

The height reduction from 39rem to 37rem appears to be safe because:

  1. The stepper card is used across multiple campaign management components (CampaignName, CampaignType, UploadData, etc.) with vertical steppers that typically show 2-4 steps
  2. No overflow or scroll styles are defined in the campaign.scss file, indicating the content is designed to fit within the container
  3. The padding-top: 0rem adjustment helps optimize the vertical space
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for stepper content that might be affected by height reduction

# Look for stepper content structure
ast-grep --pattern 'className="stepper-card"' 

# Search for potential scroll/overflow handling
rg -l 'overflow|scroll' --type js --type jsx

Length of output: 122


Script:

#!/bin/bash
# Search for stepper-card class usage in all files
rg -l "stepper-card" --type-add 'jsx:*.{jsx,js}' --type jsx

# Search for overflow/scroll styles in SCSS files
rg -l "overflow|scroll" --type css

# Look for the stepper component implementation
rg -A 5 "stepper-card" --type-add 'jsx:*.{jsx,js}' --type jsx

Length of output: 20107


Script:

#!/bin/bash
# Search for stepper-card class styles and its content
rg -A 10 "stepper-card" health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss

# Look for any overflow or scroll styles in the campaign.scss file
rg "overflow|scroll" health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss

Length of output: 437

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

Line range hint 143-175: Remove commented code and verify error handling

The commented out useEffect block contains error handling logic. If this functionality is no longer needed, the code should be removed rather than commented out. If it is still needed, we should understand why it was commented out and ensure error handling is properly implemented elsewhere.

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

465-465: LGTM: Tag component styling enhancement

The updated Tag properties improve visual consistency and align with the UI/UX objectives.

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

Line range hint 91-116: LGTM! Good improvement in API call handling.

The addition of the config object with conditional enabling based on projectId prevents unnecessary API calls.


376-390: LGTM! Clean up of commented code.

Good removal of commented-out code in favor of cleaner conditional rendering.

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

15-15: Verify version consistency across the application

The health CSS version has been updated to 0.2.4. Let's verify this version is used consistently.

✅ Verification successful

Version 0.2.4 is consistently used across the application

The health CSS version 0.2.4 is consistently used in all relevant files:

  • Both HTML files use version 0.2.4 in their CDN links
  • The package.json of the CSS package itself is at version 0.2.4
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any remaining references to older versions of digit-ui-health-css
rg -l "digit-ui-health-css@(0\.2\.[0-3]|0\.1\.|0\.0\.)" --type html

Length of output: 69


Script:

#!/bin/bash
# Let's search for all references to digit-ui-health-css to get a complete picture
rg -l "digit-ui-health-css@" --type html

# Also search for any package.json files that might reference this dependency
rg -l "digit-ui-health-css" --type json

Length of output: 248


Script:

#!/bin/bash
# Let's check the content of both HTML files and the package.json to verify versions
echo "=== Content of health/micro-ui/web/public/index.html ==="
cat health/micro-ui/web/public/index.html | grep "digit-ui-health-css"

echo -e "\n=== Content of health/micro-ui/web/micro-ui-internals/example/public/index.html ==="
cat health/micro-ui/web/micro-ui-internals/example/public/index.html | grep "digit-ui-health-css"

echo -e "\n=== Content of health/micro-ui/web/micro-ui-internals/packages/css/package.json ==="
cat health/micro-ui/web/micro-ui-internals/packages/css/package.json | grep -A 5 -B 5 "digit-ui-health-css"

Length of output: 1167

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

50-50: 🧹 Nitpick (assertive)

Consider consistent class naming between summary and popup views

The component uses different class names (summary-parent-group vs parent-group) for similar elements in different contexts. Consider using consistent class names or adding a clear comment explaining the intentional difference.

Also applies to: 103-103

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2)

Line range hint 21-31: LGTM! Well-implemented error handling and user feedback.

The error handling implementation is comprehensive with:

  • Proper use of try-catch blocks
  • Internationalized error messages
  • Auto-dismissing toast notifications
  • Graceful handling of backend errors

Also applies to: 224-234


149-149: LGTM! Verify CSS class existence.

The Tag component updates align with the UI/UX improvements objective.

✅ Verification successful

Tag component styling is properly implemented

The campaign-tag class is correctly defined in the SCSS file at health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss with appropriate margin styling, supporting the Tag component's visual presentation.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Verify the existence of campaign-tag class in SCSS files
rg -l "campaign-tag" --type scss

Length of output: 61


Script:

#!/bin/bash
# Let's try searching for the CSS class in all possible stylesheet formats
rg -l "campaign-tag" --type css
rg -l "campaign-tag" -g "*.scss"
rg -l "campaign-tag" -g "*.less"
rg -l "campaign-tag" -g "*.module.css"
rg -l "campaign-tag" -g "*.css"

# Also search in JS/JSX files as the styles might be defined inline or in a styled-component
rg -l "campaign-tag" -g "*.js"
rg -l "campaign-tag" -g "*.jsx"

Length of output: 2315


Script:

#!/bin/bash
# Let's check the actual implementation of the campaign-tag class in the SCSS file
rg "campaign-tag" health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss -C 2

Length of output: 164

health/micro-ui/web/public/index.html (1)

13-13: Verify the version update of digit-ui-health-css.

The CSS library version has been updated from 0.2.2 to 0.2.4.

✅ Verification successful

Version update from 0.2.2 to 0.2.4 is safe to proceed

The version update is verified through multiple sources:

  • The package's own package.json confirms 0.2.4 as the current version
  • The example application also uses version 0.2.4
  • The CHANGELOG.md shows active maintenance with recent updates
  • No breaking changes are indicated between these minor version updates
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for the latest version and any breaking changes

# Check package.json files for any other references to this package
rg -l "@egovernments/digit-ui-health-css"

# Check for version constraints in package.json files
rg "\"@egovernments/digit-ui-health-css\": \"[^\"]+" 

Length of output: 382


Script:

#!/bin/bash
# Let's check the content of these files to understand the version usage
cat health/micro-ui/web/micro-ui-internals/packages/css/package.json
cat health/micro-ui/web/micro-ui-internals/example/src/index.js
cat health/micro-ui/web/micro-ui-internals/example/public/index.html

# Also check git history for recent changes to these files
git log -n 5 --oneline -- health/micro-ui/web/public/index.html

# Check for any changelog or release notes
cat health/micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md 2>/dev/null || echo "No changelog found"

Length of output: 6722

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (3)

241-241: LGTM! Spacing adjustment for campaign product table.

The removal of margin-bottom improves the layout consistency.


794-795: LGTM! Padding adjustment for parent group.

The addition of padding-bottom: 0rem helps maintain consistent spacing.


797-806: LGTM! New summary parent group styles.

The new summary-parent-group class provides consistent styling for summary sections with appropriate spacing and borders.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)

282-282: LGTM! UI enhancement for campaign name tag.

The Tag component changes align with the PR objectives of improving UI/UX. The addition of type="monochrome" and stroke={true} provides a consistent visual style across the campaign manager module.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🔭 Outside diff range comments (29)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (2)

Line range hint 9-108: Consider breaking down the component for better maintainability.

The UpdateBoundaryWrapper component handles multiple responsibilities including data management, state updates, and API response handling. Consider breaking it down into smaller, more focused components:

  1. A container component for data fetching and state management
  2. A presentation component for rendering the boundary selection UI
  3. A separate hook for boundary data management

This would improve:

  • Code maintainability
  • Testing capabilities
  • Reusability

Line range hint 41-42: Add error handling for API calls.

The API calls using useCustomAPIHook and useBoundaryRelationshipSearch lack error handling. Consider:

  1. Adding error states
  2. Showing appropriate error messages to users
  3. Implementing retry mechanisms for failed requests
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)

Line range hint 48-82: Improved boundary data grouping with hierarchy support

The updated boundaryDataGrp function now properly handles hierarchy definition and ordering, making the boundary type organization more robust.

Consider adding JSDoc documentation to explain:

  • The expected structure of hierarchyDefinition
  • The ordering logic in getOrderedBoundaryTypes
  • The return value format
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (4)

Line range hint 69-77: Remove unconditional useEffect causing unnecessary rerenders

The useEffect without dependencies is causing up to 5 unnecessary rerenders. This affects performance and may lead to unexpected behavior.

Consider removing this effect and moving the state update logic to the appropriate event handlers or combine it with other effects:

- useEffect(() => {
-   if (executionCount < 5) {
-     const updatedState = {
-       ...state,
-       deliveryConfig: filteredDeliveryConfig,
-     };
-     onSelect("cycleConfigure", updatedState);
-     setExecutionCount((prevCount) => prevCount + 1);
-   }
- });

Line range hint 79-94: Enhance input validation and error handling

The cycle and delivery input validation could be improved to provide better user feedback and handle edge cases.

Consider implementing the following improvements:

 const updateCycle = (d) => {
-  if (d === 0 || d > 5) return;
-  if (Number(d?.target?.value) === 0 || Number(d?.target?.value) > 5) return;
+  const value = d?.target?.value;
+  if (value === '') {
+    dispatch({ type: "UPDATE_CYCLE", payload: value });
+    return;
+  }
+  const numValue = Number(value);
+  if (numValue <= 0 || numValue > 5) {
+    // Consider showing validation error to user
+    return;
+  }
+  dispatch({ type: "UPDATE_CYCLE", payload: numValue });
 };

Line range hint 41-57: Consider implementing error boundaries and loading states

The component lacks proper error handling for failed data fetching and loading states for async operations.

Consider adding error boundaries and improving loading states:

 function CycleConfiguration({ onSelect, formData, control, ...props }) {
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  if (error) {
+    return <ErrorComponent error={error} onRetry={() => setError(null)} />;
+  }
+
+  if (isLoading) {
+    return <Loader />;
+  }

Line range hint 1-400: Consider performance optimizations

Several performance optimizations could be implemented to improve the component's efficiency.

Consider the following optimizations:

  1. Memoize expensive calculations and callbacks using useMemo and useCallback
  2. Implement React.memo for child components if they don't need frequent updates
  3. Batch state updates where possible
  4. Consider using a form library like react-hook-form or formik for better form state management
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (3)

Line range hint 466-476: Consider moving inline styles to styled components or CSS modules

The current implementation uses inline styles for layout and typography, which makes maintenance difficult and violates separation of concerns. Consider:

  1. Moving styles to a separate CSS module or styled components
  2. Using design system tokens for typography and spacing
  3. Creating reusable layout components

Example refactor:

- <div style={{ display: "flex", justifyContent: "space-between", height: "5.8rem", marginTop:"-1.2rem" }}>
-   <div>
-     <h2 style={{ fontSize: "2.5rem", fontWeight: "700", fontFamily: "Roboto Condensed" }}>
+ <StyledHeader>
+   <HeaderTitle>
+     <Heading>
        {t("UPDATE_CHECKLIST")}
-     </h2>
-   </div>
+     </Heading>
+   </HeaderTitle>

Line range hint 150-270: Consider breaking down the complex generateCodes function

The generateCodes function has high cyclomatic complexity with deeply nested logic. Consider:

  1. Extracting the code generation logic into separate functions
  2. Using a more functional approach with map/reduce
  3. Implementing a proper strategy pattern for different question types

Example refactor approach:

const generateQuestionCode = (question, index, prefix = '') => {
  return prefix ? `${prefix}.SN${index + 1}` : `SN${index + 1}`;
};

const generateOptionCodes = (options, questionCode) => {
  return options.map(option => ({
    code: transformToCode(option.label),
    message: option.label
  }));
};

const generateCodes = (questions) => {
  const codes = {};
  const local = [];
  
  const processQuestion = (question, index, prefix = '') => {
    const code = generateQuestionCode(question, index, prefix);
    codes[question.id] = code;
    
    if (question.isActive) {
      local.push(generateLocalisation(question, code));
    }
    
    if (question.options) {
      local.push(...generateOptionCodes(question.options, code));
    }
    
    return { codes, local };
  };
  
  questions.forEach((question, index) => {
    processQuestion(question, index);
  });
  
  return { codes, local };
};

Line range hint 271-365: Improve error handling in onSubmit function

The current error handling uses generic error messages. Consider:

  1. Adding specific error handling for different failure scenarios
  2. Implementing proper error boundaries
  3. Providing more detailed feedback to users

Example improvement:

 try {
     const data = await mutateAsync(payload);
     if (data.success) {
         const localisationResult = await localisationMutateAsync(localisations);
         if (!localisationResult.success) {
-            setShowToast({ label: "CHECKLIST_UPDATE_LOCALISATION_ERROR", isError: "true" });
+            setShowToast({ 
+                label: `CHECKLIST_UPDATE_LOCALISATION_ERROR.${localisationResult.errorCode}`,
+                isError: true,
+                details: localisationResult.errorDetails 
+            });
             return;
         }
         // ... success handling
     }
 } catch (error) {
-    setShowToast({ label: "CHECKLIST_UPDATE_FAILED", isError: "true" });
+    const errorCode = error?.response?.data?.errorCode || 'UNKNOWN_ERROR';
+    setShowToast({ 
+        label: `CHECKLIST_UPDATE_FAILED.${errorCode}`,
+        isError: true,
+        details: error?.response?.data?.errorDetails || error.message
+    });
+    Digit.Utils.logError('UpdateChecklist', error);
 }
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (4)

Line range hint 279-391: Add error handling in generateCodes function

The generateCodes function handles complex nested data structures but lacks proper error handling. Consider adding try-catch blocks and input validation to make it more robust.

  const generateCodes = (questions) => {
+   if (!Array.isArray(questions)) {
+     throw new Error('Input must be an array of questions');
+   }
    const codes = {};
    const local = [];
    let activeCounters = { top: 0 };

    // Rest of the function...
    try {
      // Existing code...
    } catch (error) {
      console.error('Error generating codes:', error);
      throw error;
    }
  };

Line range hint 392-451: Avoid mutating input data in payloadData function

The payloadData function directly modifies the input data by changing question types. This could lead to unexpected side effects. Consider creating a deep copy of the data before modification.

  const payloadData = (data) => {
+   // Create a deep copy of the data
+   const processedQuestions = JSON.parse(JSON.stringify(data));
-   data.forEach((question) => {
+   processedQuestions.forEach((question) => {
      if (question.type.code === "Short Answer") {
        question.type.code = "String";
        delete question.options;
      }
    });

-   processedData = organizeQuestions(data);
+   processedData = organizeQuestions(processedQuestions);
    // Rest of the function...
  };

Line range hint 452-507: Enhance error handling in onSubmit function

The error handling in onSubmit function could be more specific and informative. Consider categorizing errors and providing more detailed feedback to users.

  try {
    const data = await mutateAsync(payload);
    // ... existing code ...
  } catch (error) {
-   setShowToast({ label: "CHECKLIST_CREATED_FAILED", isError: "true" });
+   const errorMessage = error.response?.data?.message || "CHECKLIST_CREATED_FAILED";
+   setShowToast({ 
+     label: errorMessage, 
+     isError: "true",
+     details: error.message // Additional details for logging
+   });
+   console.error("Checklist creation failed:", {
+     error: error.message,
+     payload,
+     context: "onSubmit"
+   });
  } finally {
    setSubmitting(false);
  }

Line range hint 41-107: Consider using custom hooks for better state management

The component has multiple useEffect hooks and state variables that could be organized better. Consider extracting related logic into custom hooks for better maintainability and reusability.

Example of how to extract the checklist data fetching logic:

// useChecklistData.js
const useChecklistData = (tenantId, role, checklistType) => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await callSearch(tenantId, role, checklistType);
        if (res?.mdms?.[0]?.data?.data) {
          setData(res.mdms[0].data.data);
        }
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [tenantId, role, checklistType]);

  return { loading, data, error };
};
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (4)

Line range hint 6-6: Consider restructuring props handling and URL management

The component could benefit from some structural improvements:

  1. Destructure nested props to improve readability
  2. Consider using React Context or a state management solution to avoid prop drilling
  3. Extract URL parameter management logic into a custom hook

Example refactor:

-const CampaignDates = ({ onSelect, formData, ...props }) => {
+const CampaignDates = ({ 
+  onSelect, 
+  formData, 
+  sessionData,
+  isSubmitting,
+  ...props 
+}) => {
// New custom hook for URL management
const useUrlParams = () => {
  const [params, setParams] = useState(new URLSearchParams(location.search));
  
  const updateParams = useCallback((newParams) => {
    const url = new URL(window.location.href);
    Object.entries(newParams).forEach(([key, value]) => {
      url.searchParams.set(key, value);
    });
    window.history.replaceState({}, "", url);
    setParams(new URLSearchParams(url.search));
  }, []);

  return [params, updateParams];
};

Also applies to: 134-134


Line range hint 41-54: Consolidate and simplify validation logic

The current validation logic is spread across multiple useEffect hooks, making it harder to maintain and understand the validation flow.

Consider consolidating the validation logic:

const validateDates = useCallback((startDate, endDate, isSubmitting) => {
  if (isSubmitting) {
    if (!startDate && !endDate) return { startDate: "CAMPAIGN_FIELD_MANDATORY", endDate: "CAMPAIGN_FIELD_MANDATORY" };
    if (!startDate) return { startDate: "CAMPAIGN_FIELD_MANDATORY" };
    if (!endDate) return { endDate: "CAMPAIGN_FIELD_MANDATORY" };
  }

  if (startDate && endDate) {
    const start = new Date(startDate).getTime();
    const end = new Date(endDate).getTime();
    if (end < start) return { endDate: "CAMPAIGN_END_DATE_BEFORE_ERROR" };
    if (end === start) return { endDate: "CAMPAIGN_END_DATE_SAME_ERROR" };
  }

  return null;
}, []);

useEffect(() => {
  const validationError = validateDates(startDate, endDate, props?.props?.isSubmitting);
  setError(validationError);
  if (!validationError && (startDate || endDate)) {
    onSelect("campaignDates", { startDate, endDate });
  }
}, [startDate, endDate, props?.props?.isSubmitting]);

Also applies to: 55-69


Line range hint 70-75: Fix potential infinite render loop

The useEffect hook without a dependency array will run after every render, potentially causing performance issues.

Fix the infinite loop by adding proper dependencies:

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

Line range hint 9-21: Simplify state management

The component maintains redundant state with both a dates object and individual date states.

Consider consolidating the state:

const [dates, setDates] = useState({
  startDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate || today,
  endDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate || today,
});

const updateDates = useCallback((field, value) => {
  setDates(prev => {
    const newDates = { ...prev, [field]: value };
    onSelect("campaignDates", newDates);
    return newDates;
  });
}, [onSelect]);
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (3)

Line range hint 180-190: Clean up commented code and improve translation handling.

A few suggestions for improvement:

  1. Remove the commented out PreviewComponent code.
  2. Remove the empty div from footerChildren.
  3. Consider using proper translation key composition instead of string concatenation.

Apply these changes:

- {/* <PreviewComponent
-   questionsArray={previewData}></PreviewComponent> */}
  <MobileChecklist 
    questions={previewData} 
    campaignName={campaignName} 
-   checklistRole={t(`${roleLocal}`)} 
-   typeOfChecklist={t(`${checklistTypeLocal}`)}
+   checklistRole={t(roleLocal)} 
+   typeOfChecklist={t(checklistTypeLocal)}
  />

And in the PopUp footerChildren:

  footerChildren={[
-   <div></div>,
    <Button
      type={"button"}
      size={"large"}
      variation={"primary"}
      label={t("CLOSE")}
      onClick={() => {
        setShowPopUp(false);
      }}
    />
  ]}

Line range hint 71-106: Consider optimizing the question organization logic.

The organizeQuestions function performs a deep clone using JSON.parse(JSON.stringify()) which can be performance-intensive for large datasets and doesn't handle circular references or special types (Date, undefined, etc.).

Consider using a more efficient approach:

function organizeQuestions(questions) {
-   const clonedQuestions = JSON.parse(JSON.stringify(questions));
+   // Create a new array with mapped questions to avoid mutating the original
+   const clonedQuestions = questions.map(q => ({...q}));

    const questionMap = new Map();
    const optionMap = new Map();
    const organizedQuestions = [];
    // ... rest of the function
}

Line range hint 38-63: Consider consolidating useEffect hooks.

The component has multiple useEffect hooks that could potentially be combined to reduce re-renders and improve code organization.

Consider consolidating the data transformation logic:

- useEffect(() => {
-   if (data) {
-     data.forEach((question) => {
-       if (question.type.code === "String") {
-         question.type.code = "Short Answer";
-       }
-     });
-     setViewData(data);
-   }
- }, [data])

- useEffect(() => {
-   const currentTime = new Date();
-   if (viewData !== null) {
-     setConfig(checklistCreateConfig(viewData, currentTime, "view"));
-   }
- }, [viewData])

+ useEffect(() => {
+   if (data) {
+     const transformedData = data.map(question => ({
+       ...question,
+       type: {
+         ...question.type,
+         code: question.type.code === "String" ? "Short Answer" : question.type.code
+       }
+     }));
+     setViewData(transformedData);
+     setConfig(checklistCreateConfig(transformedData, new Date(), "view"));
+   }
+ }, [data])

Also applies to: 108-115

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (5)

Line range hint 24-26: Remove redundant useEffect hook

The current useEffect implementation creates a potential infinite loop and doesn't serve any purpose as it's just setting the state to its own value.

Remove the redundant useEffect:

-useEffect(() => {
-  setCampaignName(campaignName);
-}, campaignName);

Line range hint 29-31: Implement the onClickRow handler

The click handler is marked with a TODO comment but left unimplemented, which could affect functionality.

Would you like me to help implement a proper row click handler based on your requirements?


Line range hint 42-136: Clean up commented code

The file contains significant amounts of commented-out code, including Stepper implementation and card components. This affects code readability and maintenance.

Remove all commented code sections if they're no longer needed, or implement them properly if they're planned features.

Also applies to: 195-211


Line range hint 42-83: Consolidate MDMS data fetching logic

The component has separate useEffect hooks and API calls for fetching MDMS data. This could be optimized.

Consider consolidating the MDMS data fetching:

const fetchMDMSData = async () => {
  const [rolesData, checklistData] = await Promise.all([
    Digit.Hooks.useCustomAPIHook(reqCriteria),
    Digit.Hooks.useCustomAPIHook(reqCriteria1)
  ]);
  
  if (rolesData?.mdms) {
    setCodesOpt(rolesData.mdms.map(item => ({
      code: `ACCESSCONTROL_ROLES_ROLES_${item?.data?.code}`
    })));
  }
  
  if (checklistData?.mdms) {
    setListsOpt(checklistData.mdms.map(item => ({
      list: `HCM_CHECKLIST_TYPE_${item?.data?.code}`
    })));
  }
};

useEffect(() => {
  fetchMDMSData();
}, []);

Line range hint 84-88: Improve error handling in onStepClick

The current implementation shows a toast message and returns early without proper error handling or user feedback.

Consider implementing a more robust error handling approach:

const onStepClick = (step) => {
  try {
    if (!isStepClickable(step)) {
      setShowToast({ 
        key: "error", 
        label: "CAMPAIGN_CANNOT_CLICK",
        transitionTime: 5000 
      });
      return;
    }
    // Handle valid step click
  } catch (error) {
    console.error('Step click error:', error);
    setShowToast({ 
      key: "error", 
      label: "CAMPAIGN_STEP_ERROR",
      transitionTime: 5000 
    });
  }
};
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (3)

Line range hint 42-57: Refactor validation logic for better maintainability.

The validation logic is complex and contains repeated project type checks. Consider extracting the validation logic into separate utility functions.

+const isValidCycleDates = (cycles) => cycles?.every((j) => j?.startDate && j?.endDate);
+const isValidBoundaryDates = (temp) => temp.every((i) => i?.startDate && i?.endDate);
+
+const isMRDNProjectType = (projectType) => projectType === "MR-DN";
+
 const checkValid = (data) => {
   if (DateWithBoundary) {
     const temp = data?.dateWithBoundary;
-    const allCycleDateValid = temp?.projectType === "MR-DN" 
-    ? temp.map((i) => i?.additionalDetails?.projectType?.cycles.every((j) => j?.startDate && j?.endDate)).every((k) => k === true) 
-    : true;
-    const allDateValid = temp.every((i) => i?.startDate && i?.endDate);
+    const allCycleDateValid = isMRDNProjectType(temp?.projectType)
+      ? temp.map((i) => isValidCycleDates(i?.additionalDetails?.projectType?.cycles)).every(Boolean)
+      : true;
+    const allDateValid = isValidBoundaryDates(temp);
 
-    if (temp?.projectType === "MR-DN" && allCycleDateValid && allDateValid) {
-      return true;
-    }
-    else if (temp?.projectType !== "MR-DN" && allDateValid) {
-      return true;
-    }
-    return false;
+    return isMRDNProjectType(temp?.projectType)
+      ? allCycleDateValid && allDateValid
+      : allDateValid;
   }
   // ... rest of the function
 };

Line range hint 91-117: Clean up commented code and improve error handling.

The onConfirm function contains commented out code and could benefit from more specific error handling.

  1. Remove commented out code if it's no longer needed
  2. Consider adding more specific error messages
  3. Extract success/error handling logic into separate functions
 const onConfirm = async (formData) => {
   setShowPopUp(null);
   try {
     if (DateWithBoundary) {
-      // updating the endDate by +1 sec and -1 sec so that backend logic for ancestor update work
       const payload = formData?.dateWithBoundary?.map((item) => {
         let itemEndDate = item?.endDate;
         let endDate = new Date(item?.endDate);
         let endSecond = endDate?.getSeconds();
-        // if (endSecond < 59) {
-        //   return {
-        //     ...item,
-        //     endDate: itemEndDate + 1000,
-        //   };
-        // } else {
-        //   return {
-        //     ...item,
-        //     endDate: itemEndDate - 1000,
-        //   };
-        // }
       });
+      
       const temp = await Digit.Hooks.campaign.useProjectUpdateWithBoundary({ formData: formData?.dateWithBoundary });
       history.push(`/${window.contextPath}/employee/campaign/response?isSuccess=${true}`, {
         message: t("ES_CAMPAIGN_DATE_CHANGE_WITH_BOUNDARY_SUCCESS"),
         actionLabel: t("HCM_DATE_CHANGE_SUCCESS_RESPONSE_ACTION"),
         actionLink: `/${window.contextPath}/employee/campaign/setup-campaign?id=${id}&preview=true&action=false&actionBar=true&key=14&summary=true`
       });
     }
     // ... rest of the function
   } catch (error) {
-    setShowToast({ isError: true, label: error?.response?.data?.Errors?.[0]?.message ? error?.response?.data?.Errors?.[0]?.message : error });
+    const errorMessage = error?.response?.data?.Errors?.[0]?.message || 'Failed to update campaign dates';
+    setShowToast({ isError: true, label: errorMessage });
   }
 };

Line range hint 21-31: Improve component structure and state management.

Consider the following improvements:

  1. Extract toast management into a custom hook
  2. Remove empty form value change handler if not needed
  3. Consider using a reducer for state management
+const useToast = (duration = 5000) => {
+  const [toast, setToast] = useState(null);
+
+  useEffect(() => {
+    if (toast) {
+      const timer = setTimeout(() => setToast(null), duration);
+      return () => clearTimeout(timer);
+    }
+  }, [toast, duration]);
+
+  return [toast, setToast];
+};

 function UpdateDatesWithBoundaries() {
-  const [showToast, setShowToast] = useState(null);
+  const [showToast, setShowToast] = useToast();
   // ... other state declarations

-  const closeToast = () => {
-    setShowToast(null);
-  };
-
-  useEffect(() => {
-    if (showToast) {
-      setTimeout(closeToast, 5000);
-    }
-  }, [showToast]);

-  const onFormValueChange = (setValue, formData, formState, reset, setError, clearErrors, trigger, getValues) => {
-    return;
-  };

Also applies to: 76-78

♻️ Duplicate comments (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (1)

137-137: 🧹 Nitpick (assertive)

Consider improving style maintainability.

  1. The style object could be more readable with proper formatting.
-style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}}
+style={{
+  margin: "0rem",
+  maxWidth: "100%",
+  marginTop: "1.5rem",
+  marginBottom: "2rem"
+}}
  1. Consider moving these styles to a CSS class for better maintainability.
+// In your CSS file
+.info-card {
+  margin: 0;
+  max-width: 100%;
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+}

-style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}}
+className="info-card"
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)

517-517: 🧹 Nitpick (assertive)

Consider improving Tag component placement

The Tag component's placement at the top of the page could be enhanced for better visual hierarchy. Consider adding margin-bottom to create better spacing between the tag and the heading.

-         <Tag label={campaignName} showIcon={false} type={"monochrome"} stroke={true} />
+         <Tag 
+           label={campaignName} 
+           showIcon={false} 
+           type={"monochrome"} 
+           stroke={true} 
+           style={{ marginBottom: "1rem" }}
+         />
📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cabe010 and 476a29a.

📒 Files selected for processing (16)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1 hunks)
👮 Files not reviewed due to content moderation or server errors (3)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
🧰 Additional context used
📓 Path-based instructions (16)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1)

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

1135-1135: LGTM! Tag component styling update is consistent.

The addition of type="monochrome" and stroke={true} props to the Tag component aligns with similar updates made across other components in the campaign manager module.

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

79-79: Consider moving styles to CSS for better maintainability.

The Tag component styling could be moved to a dedicated CSS file using className-based styling.


104-104: Consider using theme-based spacing variables.

Using inline styles with hard-coded values reduces maintainability. Consider using theme-based spacing variables for consistency.

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

115-115: Consider adding ARIA attributes for accessibility.

The Tag component styling changes align with the UI/UX improvements. However, since this displays the campaign name, consider enhancing accessibility.

-<Tag label={campaignName} showIcon={false} className={"campaign-tag"} type={"monochrome"} stroke={true}/>
+<Tag 
+  icon="" 
+  label={campaignName} 
+  labelStyle={{}} 
+  showIcon={false} 
+  className={"campaign-tag"} 
+  type={"monochrome"} 
+  stroke={true}
+  role="status"
+  aria-label={`Current campaign: ${campaignName}`}
+/>
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (1)

307-307: LGTM! Tag component updates improve visual consistency

The Tag component changes appropriately simplify the props while maintaining functionality.

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

355-355: LGTM! Tag component updates maintain consistency

The Tag component changes align with the UI/UX improvements across the application.

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

447-449: Move inline styles to CSS file

The inline styles should be moved to a CSS file for better maintainability.

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

218-218: LGTM: Tag component styling update

The Tag component styling update is consistent with the UI/UX improvements being made across the campaign manager module.

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

465-465: LGTM: Tag component styling enhancement

The Tag component update with type="monochrome" and stroke={true} improves visual consistency.

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

134-134: LGTM: Visual styling update for Tag component

The addition of type="monochrome" and stroke={true} props aligns with the UI/UX improvements mentioned in the PR objectives.

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

143-143: LGTM! Verify consistent Tag styling across the application.

The Tag component update aligns with the UI/UX improvements mentioned in the PR objectives.

Let's verify the consistent Tag styling across other files:

✅ Verification successful

Tag component styling is consistent across the campaign-manager module

The verification shows that all 16 instances of the Tag component in the campaign-manager module use consistent props:

  • type="monochrome"
  • stroke={true}
  • showIcon={false}
  • label={campaignName}
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for Tag component usage to ensure consistent styling
rg --type js 'Tag.*label.*showIcon.*type.*stroke' ./health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/

Length of output: 3717

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 8

🔭 Outside diff range comments (8)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)

Line range hint 10-31: Consider moving utility function to a separate file

The boundaryDataGrp function is a pure utility function that could be moved to a separate utils file for better code organization and reusability.

Consider moving this function to a new file like utils/boundaryUtils.js:

// utils/boundaryUtils.js
export function boundaryDataGrp(boundaryData) {
  const groupedData = {};
  
  boundaryData?.forEach((item) => {
    const { type } = item;
    if (!groupedData[type]) {
      groupedData[type] = [];
    }
    groupedData[type].push(item);
  });

  return Object.keys(groupedData).map((type) => ({
    type,
    boundaries: groupedData[type],
  }));
}
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2)

Line range hint 89-103: Clean up commented code in onConfirm function

The commented code related to endDate adjustment should either be removed or implemented if needed. Keeping commented code can lead to confusion.


Line range hint 42-57: Enhance form validation logic

The checkValid function could be simplified and made more maintainable. Consider extracting the validation logic for different project types into separate functions.

 const checkValid = (data) => {
   if (DateWithBoundary) {
     const temp = data?.dateWithBoundary;
-    const allCycleDateValid = temp?.projectType === "MR-DN" 
-      ? temp.map((i) => i?.additionalDetails?.projectType?.cycles.every((j) => j?.startDate && j?.endDate)).every((k) => k === true) 
-      : true;
-    const allDateValid = temp.every((i) => i?.startDate && i?.endDate);
+    const validateCycleDates = (data) => 
+      data?.projectType === "MR-DN" 
+        ? data.map(i => i?.additionalDetails?.projectType?.cycles
+            .every(j => j?.startDate && j?.endDate))
+            .every(k => k === true)
+        : true;
+    
+    const validateDates = data => 
+      data.every(i => i?.startDate && i?.endDate);
+    
+    const allCycleDateValid = validateCycleDates(temp);
+    const allDateValid = validateDates(temp);

     if (temp?.projectType === "MR-DN" && allCycleDateValid && allDateValid) {
       return true;
     }
     // ... rest of the function
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (2)

Line range hint 22-24: Fix useEffect dependency causing potential infinite loop

The useEffect dependency on campaignName while setting the same state could cause an infinite loop.

-useEffect(() => {
-  setCampaignName(campaignName);
-}, campaignName);
+useEffect(() => {
+  if (searchParams.get("name")) {
+    setCampaignName(searchParams.get("name"));
+  }
+}, [searchParams]);

Line range hint 138-230: Clean up commented code

There's a significant amount of commented code that should be removed if it's no longer needed. This includes the Stepper component and card container code. Keeping commented code makes the file harder to maintain.

🧰 Tools
🪛 Biome (1.9.4)

[error] 138-138: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)

Line range hint 33-57: Add error handling to boundaryDataGrp function

The boundary data grouping function should handle potential edge cases and invalid input.

 function boundaryDataGrp(boundaryData, hierarchyDefinition) {
+  if (!boundaryData || !Array.isArray(boundaryData)) {
+    console.warn('Invalid or missing boundary data');
+    return [];
+  }
+
   if (!hierarchyDefinition) return []; 

   const groupedData = {};

   function getOrderedBoundaryTypes(hierarchy) {
+    if (!hierarchy?.BoundaryHierarchy?.[0]?.boundaryHierarchy) {
+      console.warn('Invalid hierarchy definition structure');
+      return [];
+    }
+
     const result = [];
     let currentItem = hierarchy?.BoundaryHierarchy?.[0]?.boundaryHierarchy.find(item => item.parentBoundaryType === null);
     while (currentItem) {
         result.push(currentItem.boundaryType);
         currentItem = hierarchy?.BoundaryHierarchy?.[0]?.boundaryHierarchy.find(item => item.parentBoundaryType === currentItem.boundaryType);
     }
     return result;
   }

   const orderedBoundaryTypes = getOrderedBoundaryTypes(hierarchyDefinition);
+  if (!orderedBoundaryTypes.length) {
+    console.warn('No boundary types found in hierarchy');
+    return [];
+  }
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)

Line range hint 371-424: Enhance error handling in onSubmit function

The error handling could be improved by:

  1. Adding specific error types/codes handling
  2. Providing more detailed error messages to users
  3. Implementing retry logic for transient failures
 const onSubmit = async (formData, flag = 0, preview = null) => {
   let payload;
   if (flag === 1) {
     payload = payloadData(preview);
   } else {
     payload = payloadData(formData?.createQuestion?.questionData);
   }
   setSubmitting(true);
   try {
     const data = await mutateAsync(payload);
     if (data.success) {
       const localisations = uniqueLocal;
       const localisationResult = await localisationMutateAsync(localisations);
       if (!localisationResult.success) {
-        setShowToast({ label: "CHECKLIST_CREATED_LOCALISATION_ERROR", isError: "true" });
+        setShowToast({ 
+          label: "CHECKLIST_CREATED_LOCALISATION_ERROR", 
+          isError: "true",
+          details: localisationResult.error?.message || "Unknown error"
+        });
         return;
       }
       history.push(`/${window.contextPath}/employee/campaign/response?isSuccess=${true}`, {
         message: "ES_CHECKLIST_CREATE_SUCCESS_RESPONSE",
         preText: "ES_CHECKLIST_CREATE_SUCCESS_RESPONSE_PRE_TEXT",
         actionLabel: "HCM_CONFIGURE_APP_RESPONSE_ACTION",
         actionLink: `/${window.contextPath}/employee/campaign/checklist/search?name=${projectName}&campaignId=${campaignId}&projectType=${projectType}`,
         secondaryActionLabel: "MY_CAMPAIGN",
         secondaryActionLink: `/${window?.contextPath}/employee/campaign/my-campaign`,
       });
     } else {
-      setShowToast({ label: "CHECKLIST_CREATED_FAILED", isError: "true" });
+      setShowToast({ 
+        label: "CHECKLIST_CREATED_FAILED", 
+        isError: "true",
+        details: data.error?.message || "Unknown error"
+      });
     }
   } catch (error) {
-    setShowToast({ label: "CHECKLIST_CREATED_FAILED", isError: "true" });
+    setShowToast({ 
+      label: "CHECKLIST_CREATED_FAILED", 
+      isError: "true",
+      details: error?.response?.data?.error?.message || error.message || "Unknown error"
+    });
+    // Implement retry logic for network errors
+    if (error.isAxiosError && error.code === "ECONNABORTED") {
+      // Handle timeout
+      setShowToast({ 
+        label: "NETWORK_TIMEOUT_ERROR",
+        isError: "true",
+        details: "Please try again"
+      });
+    }
   } finally {
     setSubmitting(false);
   }
 };
🧰 Tools
🪛 Biome (1.9.4)

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

'temp_data' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)

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

Line range hint 392-614: Extract file validation logic into a separate utility

The file validation logic is complex and could be moved to a separate utility file for better maintainability and reusability.

Consider creating a new utility file fileValidationUtils.js to house these functions:

  • validateExcel
  • validateMultipleTargets
  • validateTarget
  • validateTargetData

This would:

  1. Improve code organization
  2. Make the component more focused
  3. Make the validation logic reusable
  4. Facilitate testing
♻️ Duplicate comments (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (1)

105-105: 🧹 Nitpick (assertive)

Consider using theme-based spacing

The InfoCard styling improvements enhance layout consistency. However, consider using theme-based spacing variables instead of hard-coded values for better maintainability.

-style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}}
+className="info-card info-card--campaign"
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)

466-466: 🛠️ Refactor suggestion

Use self-closing syntax for TagComponent

The TagComponent without children should use self-closing syntax.

-<TagComponent campaignName={campaignName}></TagComponent>
+<TagComponent campaignName={campaignName} />
🧰 Tools
🪛 Biome (1.9.4)

[error] 466-466: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)

1135-1135: 🛠️ Refactor suggestion

Use self-closing syntax for TagComponent

The TagComponent without children should use self-closing syntax.

-<TagComponent campaignName={campaignName}></TagComponent>
+<TagComponent campaignName={campaignName} />
🧰 Tools
🪛 Biome (1.9.4)

[error] 1135-1135: 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)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 476a29a and 220f637.

📒 Files selected for processing (18)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (3 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (3 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (2 hunks)
👮 Files not reviewed due to content moderation or server errors (6)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
🧰 Additional context used
📓 Path-based instructions (18)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js

[error] 155-155: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js

[error] 355-355: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js

[error] 116-116: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js

[error] 448-448: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js

[error] 283-283: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js

[error] 162-162: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js

[error] 518-518: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js

[error] 466-466: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js

[error] 144-144: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js

[error] 138-138: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js

[error] 80-80: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js

[error] 1135-1135: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js

[error] 308-308: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js

[error] 219-219: 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/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js

[error] 150-150: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js

[error] 135-135: 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)

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

165-166: LGTM! Component registration looks good

The TagComponent has been properly registered in the componentsToRegister object.

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

138-138: Use self-closing syntax for TagComponent

Follow JSX best practices by using self-closing syntax when the component has no children.

-<TagComponent campaignName={campaignName}></TagComponent>
+<TagComponent campaignName={campaignName} />
🧰 Tools
🪛 Biome (1.9.4)

[error] 138-138: 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/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)

356-356: Move inline styles to CSS file

The inline styles should be moved to a CSS file for better maintainability.

-<div style={{ display: "flex", justifyContent: "space-between" }}>
+<div className="campaign-summary-header">

Add to your CSS file:

.campaign-summary-header {
  display: flex;
  justify-content: space-between;
}
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)

449-449: Move inline styles to CSS file

The inline styles should be moved to a CSS file for better maintainability.

-<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "-1.5rem" }}>
+<div className="campaign-summary-header">

Add to your CSS file:

.campaign-summary-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: -1.5rem;
}
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)

Line range hint 316-378: Enhance error handling in onSubmit function

Similar error handling improvements as suggested for CreateChecklist.js should be applied here for consistency.

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

Line range hint 1017-1029: Well implemented template download tracking

The implementation of downloaded templates tracking is clean and effective. It:

  1. Properly manages state for different template types
  2. Correctly handles the popup visibility
  3. Persists download status across component lifecycle

@jagankumar-egov jagankumar-egov changed the title made ui/ux changes for campaign name BUGFIX/HCMPRE- :made ui/ux changes for campaign name Dec 23, 2024
@Bhavya-egov Bhavya-egov deleted the ui_changes branch December 23, 2024 07:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants