Repository: ohcnetwork/care_fe
Pull request #11313: fix(medication): add indication for inactive medication requests
Author: login: siva222003
Labels: name: Tested
Created: 2025-03-15T17:20:20Z | Merged: 2025-03-28T01:09:00Z

## Proposed Changes

- Fixes #11304 
- Added a clear indication for inactive medication requests.
- Replaced direct status checks with a reusable isInactive variable for better consistency.

[Screencast from 2025-03-15 22-48-38.webm](https://github.com/user-attachments/assets/e758b77d-f58e-4d56-8c65-0a8c0da85cd2)

@ohcnetwork/care-fe-code-reviewers

## Merge Checklist

- [ ] Add specs that demonstrate bug / test a new feature.
- [ ] Update [product documentation](https://docs.ohc.network).
- [ ] Ensure that UI text is kept in I18n files.
- [ ] Prep screenshot or demo video for changelog entry, and attach it to issue.
- [ ] Request for Peer Reviews
- [ ] Completion of QA in Mobile Devices
- [ ] Completion of QA in Desktop Devices


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **Style**
	- Inactive medications now feature reduced opacity, strike-through text, and updated background colors for clear visual distinction.
- **New Features**
	- Actions such as removal are now disabled for inactive medications, ensuring a consistent and intuitive user experience.
	- Introduced a new constant to determine inactive medication statuses, enhancing visual representation and interaction logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Linked issue #11304: No Clear Indication for Removed Medication In Edit form
**Describe the bug**
Even though the medication has been removed, it still appears as if it hasn’t been removed.

**To Reproduce**
Steps to reproduce the behavior:

1. Go to 'Medication Request' 
2. Click add a Medication and edit. 
3. See issue

**Expected behavior**
The removed medication should either be displayed with a strikethrough or in a different color to indicate its removal. Additionally, the Edit and Remove buttons should be hidden.

**Screenshots**
https://github.com/user-attachments/assets/a9227679-0f14-42aa-b1ef-f3fdb9ca15fa

**Smartphone (please complete the following information):**

- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]

---

### 🚨 DO NOT EDIT BELOW THIS LINE 🚨

### Instructions for Requesting Assignment:

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

**Describe your solution clearly:**
Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

**Expected Timeline:**
- End date: [Expected submission date of a completed Pull Request]

**Additional Context:**
Include any other relevant context, links, screenshots, or resources that support your proposed solution.

> 🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.
Linked issue comments: user: login: hrit2773
created_at: 2025-03-15T04:39:10Z
body: @abhimanyurajeesh if you are not taking up then can I take it up ETA: 2 days @Jacobjeevan @rithviknishad 
author_association: CONTRIBUTOR
user: login: siva222003
created_at: 2025-03-15T11:29:32Z
body: **Hey @abhimanyurajeesh,**  
If you’re not working on this, can I take it up?  

**Approach:**  
- We can add a `line-through` class to the display name when the medication status is not active.  
- The edit button is currently only visible on small screens. Since both the edit and delete buttons are already disabled, we can either leave them as is or remove them if necessary.  

**ETA:** EOD  

Please assign me this @rithviknishad @Jacobjeevan and let me know if there’s anything else to consider.  

author_association: CONTRIBUTOR
user: login: abhimanyurajeesh
created_at: 2025-03-15T11:31:13Z
body: Yes you may.
author_association: CONTRIBUTOR

Diff:
diff --git a/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
index b71a75815cb..bd0e0596bca 100644
--- a/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
+++ b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
@@ -6,6 +6,8 @@ import { t } from "i18next";
 import { Link } from "raviger";
 import React, { useCallback, useMemo, useState } from "react";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
@@ -220,9 +222,17 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
   return (
     <React.Fragment>
       <div
-        className={`p-4 border-t border-gray-200 ${isInactive ? "bg-gray-100" : ""}`}
+        className={cn(
+          "p-4 border-t border-gray-200",
+          isInactive && "bg-gray-200 opacity-40",
+        )}
       >
-        <div className="font-semibold truncate">
+        <div
+          className={cn(
+            "font-semibold truncate",
+            isInactive && medication.status === "ended" && "line-through",
+          )}
+        >
           {medication.medication?.display}
         </div>
         <MedicationBadges medication={medication} />
@@ -255,7 +265,10 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
         return (
           <div
             key={`${format(slot.date, "yyyy-MM-dd")}-${slot.start}`}
-            className={`p-4 border-t border-gray-200 relative text-sm ${isInactive ? "bg-gray-100" : ""}`}
+            className={cn(
+              "p-4 border-t relative text-sm",
+              isInactive && "bg-gray-200 opacity-40",
+            )}
           >
             {administrationRecords?.map((admin) => {
               const colorClass =
@@ -330,7 +343,10 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
       })}
 
       <div
-        className={`p-4 border-t border-gray-200 flex justify-center ${isInactive ? "bg-gray-100" : ""}`}
+        className={cn(
+          "p-4 border-t border-gray-200 flex justify-center",
+          isInactive && "bg-gray-200 opacity-40",
+        )}
       >
         {ACTIVE_MEDICATION_STATUSES.includes(
           medication.status as (typeof ACTIVE_MEDICATION_STATUSES)[number],
diff --git a/src/components/Medicine/MedicationsTable.tsx b/src/components/Medicine/MedicationsTable.tsx
index c3452b64ceb..10da9519160 100644
--- a/src/components/Medicine/MedicationsTable.tsx
+++ b/src/components/Medicine/MedicationsTable.tsx
@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { CardContent } from "@/components/ui/card";
 import {
   Table,
@@ -80,7 +82,11 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => {
             return (
               <TableRow
                 key={medication.id}
-                className={`divide-x font-medium ${isInactive ? "bg-gray-100" : ""}`}
+                className={cn(
+                  "divide-x font-medium",
+                  isInactive && "opacity-40",
+                  isInactive && medication.status !== "ended" && "line-through",
+                )}
               >
                 <TableCell className="py-2 px-3">
                   {medication.medication?.display}
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index 38820e14aa8..e10354164ef 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -50,6 +50,7 @@ import useBreakpoints from "@/hooks/useBreakpoints";
 import query from "@/Utils/request/query";
 import {
   DoseRange,
+  INACTIVE_MEDICATION_STATUSES,
   MEDICATION_REQUEST_INTENT,
   MEDICATION_REQUEST_TIMING_OPTIONS,
   MedicationRequest,
@@ -359,104 +360,115 @@ export function MedicationRequestQuestion({
                   "bg-transparent": !desktopLayout,
                 })}
               >
-                {medications.map((medication, index) => (
-                  <React.Fragment key={index}>
-                    {!desktopLayout ? (
-                      <Collapsible
-                        open={expandedMedicationIndex === index}
-                        onOpenChange={() => {
-                          setExpandedMedicationIndex(
-                            expandedMedicationIndex === index ? null : index,
-                          );
-                        }}
-                        className="border-b last:border-b-0"
-                      >
-                        <div
-                          className={cn(
-                            "flex items-center gap-2 px-2 py-0.5 rounded-md shadow-xs text-sm",
-                            expandedMedicationIndex === index
-                              ? "bg-gray-50"
-                              : "bg-gray-100",
-                          )}
+                {medications.map((medication, index) => {
+                  const isInactive = INACTIVE_MEDICATION_STATUSES.includes(
+                    medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number],
+                  );
+
+                  return (
+                    <React.Fragment key={medication.id}>
+                      {!desktopLayout ? (
+                        <Collapsible
+                          open={expandedMedicationIndex === index}
+                          onOpenChange={() => {
+                            setExpandedMedicationIndex(
+                              expandedMedicationIndex === index ? null : index,
+                            );
+                          }}
+                          className="border-b last:border-b-0"
                         >
-                          <CollapsibleTrigger className="flex-1 text-left">
-                            <div className="font-medium text-gray-900">
-                              {medication.medication?.display}
-                            </div>
-                          </CollapsibleTrigger>
-                          <div className="flex items-center gap-1">
-                            {expandedMedicationIndex !== index && (
-                              <Button
-                                aria-label="Expand Medication Request"
-                                variant="ghost"
-                                size="icon"
-                                className="size-8 text-gray-500 hover:text-gray-900"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setExpandedMedicationIndex(index);
-                                }}
-                                disabled={disabled}
-                              >
-                                <Pencil2Icon className="size-4" />
-                              </Button>
+                          <div
+                            className={cn(
+                              "flex items-center gap-2 px-2 py-0.5 rounded-md shadow-sm text-sm",
+                              isInactive ? "opacity-40" : "hover:bg-gray-50/50",
+                              expandedMedicationIndex === index
+                                ? "bg-gray-50"
+                                : "bg-gray-100",
                             )}
-                            <TooltipComponent
-                              content={
-                                medication.status === "entered_in_error"
-                                  ? t("medication_already_marked_as_error")
-                                  : t("remove_medication")
-                              }
-                            >
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleRemoveMedication(index);
-                                }}
-                                disabled={
-                                  disabled ||
+                          >
+                            <CollapsibleTrigger className="flex-1 text-left">
+                              <div
+                                className={cn(
+                                  "font-medium text-gray-900",
+                                  isInactive &&
+                                    medication.status !== "ended" &&
+                                    "line-through",
+                                )}
+                              >
+                                {medication.medication?.display}
+                              </div>
+                            </CollapsibleTrigger>
+                            <div className="flex items-center gap-1">
+                              {expandedMedicationIndex !== index && (
+                                <Button
+                                  aria-label="Expand Medication Request"
+                                  variant="ghost"
+                                  size="icon"
+                                  className="size-8 text-gray-500 hover:text-gray-900"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    setExpandedMedicationIndex(index);
+                                  }}
+                                  disabled={disabled}
+                                >
+                                  <Pencil2Icon className="size-4" />
+                                </Button>
+                              )}
+                              <TooltipComponent
+                                content={
                                   medication.status === "entered_in_error"
+                                    ? t("medication_already_marked_as_error")
+                                    : t("remove_medication")
                                 }
-                                className="size-8"
-                                data-cy="remove-medication"
                               >
-                                <MinusCircledIcon className="size-4" />
-                              </Button>
-                            </TooltipComponent>
-                          </div>
-                        </div>
-                        <CollapsibleContent>
-                          <div className="py-4 space-y-4 bg-white mx-2 mb-1">
-                            <MedicationRequestGridRow
-                              medication={medication}
-                              disabled={disabled}
-                              onUpdate={(updates) =>
-                                handleUpdateMedication(index, updates)
-                              }
-                              onRemove={() => handleRemoveMedication(index)}
-                              index={index}
-                              questionId={questionnaireResponse.question_id}
-                              errors={errors}
-                            />
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleRemoveMedication(index);
+                                  }}
+                                  disabled={isInactive || disabled}
+                                  className="size-8"
+                                  data-cy="remove-medication"
+                                >
+                                  <MinusCircledIcon className="size-4" />
+                                </Button>
+                              </TooltipComponent>
+                            </div>
                           </div>
-                        </CollapsibleContent>
-                      </Collapsible>
-                    ) : (
-                      <MedicationRequestGridRow
-                        medication={medication}
-                        disabled={disabled}
-                        onUpdate={(updates) =>
-                          handleUpdateMedication(index, updates)
-                        }
-                        onRemove={() => handleRemoveMedication(index)}
-                        index={index}
-                        questionId={questionnaireResponse.question_id}
-                        errors={errors}
-                      />
-                    )}
-                  </React.Fragment>
-                ))}
+                          <CollapsibleContent>
+                            <div className="py-4 space-y-4 bg-white mx-2 mb-1">
+                              <MedicationRequestGridRow
+                                medication={medication}
+                                disabled={disabled}
+                                onUpdate={(updates) =>
+                                  handleUpdateMedication(index, updates)
+                                }
+                                onRemove={() => handleRemoveMedication(index)}
+                                index={index}
+                                questionId={questionnaireResponse.question_id}
+                                errors={errors}
+                              />
+                            </div>
+                          </CollapsibleContent>
+                        </Collapsible>
+                      ) : (
+                        <MedicationRequestGridRow
+                          medication={medication}
+                          disabled={disabled || isInactive}
+                          onUpdate={(updates) =>
+                            handleUpdateMedication(index, updates)
+                          }
+                          onRemove={() => handleRemoveMedication(index)}
+                          index={index}
+                          questionId={questionnaireResponse.question_id}
+                          errors={errors}
+                        />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
               </div>
             </div>
           </div>
@@ -617,14 +629,20 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
       className={cn(
         "grid grid-cols-1 lg:grid-cols-[280px_180px_170px_160px_300px_180px_250px_180px_160px_200px_180px_48px] border-b border-gray-200 hover:bg-gray-50/50",
         {
-          "opacity-40 pointer-events-none":
-            medication.status === "entered_in_error",
+          "opacity-40 pointer-events-none": disabled,
         },
       )}
     >
       {/* Medicine Name */}
       <div className="lg:p-4 lg:px-2 lg:py-1 flex items-center justify-between lg:justify-start lg:col-span-1 lg:border-r border-gray-200 font-medium overflow-hidden text-sm">
-        <span className="break-words line-clamp-2 hidden lg:block">
+        <span
+          className={cn(
+            "break-words line-clamp-2 hidden lg:block",
+            disabled &&
+              medication.status !== "entered_in_error" &&
+              "line-through",
+          )}
+        >
           {medication.medication?.display}
         </span>
       </div>


Reviews:
user: login: abhimanyurajeesh
body: Do we really need these many changes !? Please look into it.

Also please follow the merge check list. 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-16T07:25:35Z
user: login: abhimanyurajeesh
body: - [ ] Can we sort by INACTIVE_MEDICATION_STATUSES?

<img width="250" src="https://github.com/user-attachments/assets/3d32a206-a256-4a6f-8d3a-52c7560b3846">

- [ ] And is hover required for removed medication !?

state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-16T08:20:57Z
user: login: siva222003
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-16T08:25:07Z
user: login: siva222003
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-16T08:38:16Z
user: login: Jacobjeevan
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T07:15:08Z
user: login: khavinshankar
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-24T09:00:33Z
user: login: khavinshankar
body: minor change
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-24T09:01:39Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx (1)</summary><blockquote>

`387-391`: **Consider extracting the line-through condition to a helper variable.**

The same condition `isInactive && medication?.status !== "ended"` is duplicated in multiple places. For better maintainability, consider extracting this to a separate variable.

```diff
  const isInactive = INACTIVE_MEDICATION_STATUSES.includes(
    medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number],
  );
+ const shouldApplyStrikethrough = isInactive && medication?.status !== "ended";
```

Then use this variable in place of the repeated condition:
```diff
- className={cn("font-medium text-gray-900", {
-   "line-through":
-     isInactive &&
-     medication?.status !== "ended",
- })}
+ className={cn("font-medium text-gray-900", {
+   "line-through": shouldApplyStrikethrough,
+ })}
```


Also applies to: 633-635

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between c8edfae6b23cb31b02d86bcf79f5715e53c2232a and e46dbf65e5c8ef9e5e08645a78f39a76a1b68b9f.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/components/Medicine/MedicationAdministration/AdministrationTab.tsx` (4 hunks)
* `src/components/Medicine/MedicationsTable.tsx` (2 hunks)
* `src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx` (3 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* src/components/Medicine/MedicationsTable.tsx
* src/components/Medicine/MedicationAdministration/AdministrationTab.tsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: cypress-run (1)

</details>

<details>
<summary>🔇 Additional comments (7)</summary><blockquote>

<details>
<summary>src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx (7)</summary>

`53-53`: **Good addition of the INACTIVE_MEDICATION_STATUSES constant import.**

This import helps centralize the definition of what constitutes an inactive medication, promoting consistency across the codebase.

---

`359-365`: **Well-structured implementation of inactive medication status checking.**

The creation of an `isInactive` variable to determine medication status is a clean approach that enhances code readability and maintainability. This aligns well with the PR objective of replacing direct status checks with a reusable variable.

---

`365-465`: **Good implementation of visual indicators for inactive medications.**

The UI enhancements for inactive medications (reduced opacity, line-through text, disabled actions) clearly communicate the medication status to users, which fulfills the PR objective of adding clear indications for inactive medications.

---

`426-426`: **Properly disabled the remove button for inactive medications.**

This is a good UX decision - preventing users from attempting to remove medications that are already marked as inactive.

---

`453-453`: **Properly propagated disabled state to nested components.**

Good job passing both the component's disabled state and the medication's inactive state to child components, ensuring consistent behavior throughout the UI.

---

`626-626`: **Consider whether the disabled state should completely prevent interactions.**

The use of `pointer-events-none` completely prevents user interaction with disabled elements. This is generally good, but consider whether some elements should remain accessible for viewing details even if they're inactive.

Confirm that users should not be able to interact with any part of an inactive medication request, including viewing additional details.

---

`359-465`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify if sorting by inactive status is needed per previous discussions.**

In the past review comments, you mentioned potentially sorting medications by inactive status. This implementation doesn't appear to include any sorting logic. Consider whether this should be added based on the feedback received.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if any sorting by inactive status exists in related medication files

# Look for sort functions in related medication files
rg -A 5 'sort.*inactive|inactive.*sort' --type ts
```

Length of output: 51

---



</details>

**Clarification Required: Inactive Medications Sorting**

We didn’t find any sorting logic based on the inactive status in the file (or elsewhere, based on our grep for sorting functions). Please confirm whether the medications list should be explicitly sorted to group or order inactive items, as discussed previously. If sorting is required, consider processing the medications array (e.g., using Array.sort) before mapping over it; otherwise, please document that the current ordering is intentional.

- **Location:** `src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx` (lines 359–465)

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T09:25:24Z
user: login: khavinshankar
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-24T09:38:17Z
user: login: khavinshankar
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-03-27T08:35:46Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx (1)</summary><blockquote>

`638-647`: **Good visual treatment for medication names.**

The line-through styling for disabled medications (except those with "entered_in_error" status) provides consistent visual feedback.

Consider adding a specific CSS class for inactive medications in your global styles, so that this styling pattern can be easily reused across different components. This would improve consistency across the application.

```diff
-        <span
-          className={cn(
-            "break-words line-clamp-2 hidden lg:block",
-            disabled &&
-              medication.status !== "entered_in_error" &&
-              "line-through",
-          )}
-        >
+        <span
+          className={cn(
+            "break-words line-clamp-2 hidden lg:block",
+            isInactive && medication.status !== "ended" && "line-through"
+          )}
+        >
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 28d2bb8b2c9e929c9fc7c72572d7f3c733b39d02 and 69af9e9e84273bda45606f45e5c9f85d132a7bcf.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/components/Medicine/MedicationAdministration/AdministrationTab.tsx` (4 hunks)
* `src/components/Medicine/MedicationsTable.tsx` (2 hunks)
* `src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx` (3 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
* src/components/Medicine/MedicationsTable.tsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: cypress-run (1)

</details>

<details>
<summary>🔇 Additional comments (7)</summary><blockquote>

<details>
<summary>src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx (7)</summary>

`52-54`: **Good addition of INACTIVE_MEDICATION_STATUSES constant.**

Using a centralized constant for inactive medication statuses improves code maintainability and reduces the risk of inconsistencies across the application.

---

`363-371`: **Excellent implementation of the isInactive flag.**

Creating a reusable variable to check for inactive statuses improves readability and ensures consistent behavior throughout the component. This approach is more maintainable than repeating the status check in multiple places.

---

`380-388`: **Well implemented visual treatment for inactive medications.**

The conditional styling using `cn` utility properly differentiates inactive medications with reduced opacity and disables hover effects. This helps users easily distinguish between active and inactive medications.

---

`389-400`: **Good visual distinction for inactive medications.**

The line-through styling for inactive medications (except those with "ended" status) provides clear visual feedback to users.

Based on the PR comments, it seems there was a discussion about limiting the strikethrough to only removed medications rather than all inactive ones. Can you confirm if the current implementation aligns with the final decision from that discussion?

---

`417-438`: **Good UI behavior for remove button.**

Disabling the remove button for inactive medications prevents users from attempting to remove medications that should no longer be modified.

---

`457-467`: **Consistent passing of disabled state.**

Using `disabled || isInactive` ensures the MedicationRequestGridRow correctly reflects the medication's state, maintaining a consistent UI experience.

---

`632-633`: **The disabled styling implementation is consistent.**

The use of the `opacity-40 pointer-events-none` classes when the component is disabled aligns with the visual treatment of inactive items and prevents user interaction.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T08:54:02Z
user: login: rithviknishad
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-27T12:17:15Z
user: login: rithviknishad
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-28T01:06:36Z

Review comments:
diff_hunk: @@ -77,9 +77,11 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => {
             return (
               <TableRow
                 key={medication.id}
-                className={`divide-x font-medium ${isInactive ? "bg-gray-100" : ""}`}
+                className={`divide-x font-medium ${isInactive ? "bg-gray-200 opacity-40" : ""}`}
path: src/components/Medicine/MedicationsTable.tsx
user: login: abhimanyurajeesh
body: ```suggestion
                className={`divide-x font-medium ${isInactive ? "bg-gray-200 opacity-40 line-through" : ""}`}
```
created_at: 2025-03-16T08:05:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -612,14 +620,15 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
       className={cn(
         "grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,180px,48px] border-b hover:bg-gray-50/50",
         {
-          "opacity-40 pointer-events-none":
-            medication.status === "entered_in_error",
+          "opacity-40 pointer-events-none": disabled,
path: src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
user: login: abhimanyurajeesh
body: any reason for removing this !?
created_at: 2025-03-16T08:07:38Z
author_association: CONTRIBUTOR
diff_hunk: @@ -612,14 +620,15 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
       className={cn(
         "grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,180px,48px] border-b hover:bg-gray-50/50",
         {
-          "opacity-40 pointer-events-none":
-            medication.status === "entered_in_error",
+          "opacity-40 pointer-events-none": disabled,
path: src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
user: login: abhimanyurajeesh
body: correct me if I'm wrong, shouldn't this be inactive?? 

cc: @rithviknishad 
created_at: 2025-03-16T08:17:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -612,14 +620,15 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
       className={cn(
         "grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,180px,48px] border-b hover:bg-gray-50/50",
         {
-          "opacity-40 pointer-events-none":
-            medication.status === "entered_in_error",
+          "opacity-40 pointer-events-none": disabled,
path: src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
user: login: siva222003
body: disabled has that inactice status included with it, I haven't removed anything.
created_at: 2025-03-16T08:25:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -612,14 +620,15 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
       className={cn(
         "grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,180px,48px] border-b hover:bg-gray-50/50",
         {
-          "opacity-40 pointer-events-none":
-            medication.status === "entered_in_error",
+          "opacity-40 pointer-events-none": disabled,
path: src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
user: login: siva222003
body: I haven't added hover effects to the removed requests.
I've also suggested sorting by inactive statuses. Should I add that, @abhimanyurajeesh, or wait for confirmation?
created_at: 2025-03-16T08:38:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -215,8 +215,12 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
 
   return (
     <React.Fragment>
-      <div className={`p-4 border-t ${isInactive ? "bg-gray-100" : ""}`}>
-        <div className="font-semibold truncate">
+      <div
+        className={`p-4 border-t ${isInactive ? "bg-gray-100 opacity-80" : ""}`}
path: src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
user: login: khavinshankar
body: use cn util instead of string interpolation, the cn util makes it easy to read
created_at: 2025-03-24T08:57:48Z
author_association: MEMBER
diff_hunk: @@ -215,8 +215,12 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
 
   return (
     <React.Fragment>
-      <div className={`p-4 border-t ${isInactive ? "bg-gray-100" : ""}`}>
-        <div className="font-semibold truncate">
+      <div
+        className={`p-4 border-t ${isInactive ? "bg-gray-100 opacity-80" : ""}`}
+      >
+        <div
+          className={`font-semibold truncate ${isInactive ? "line-through" : ""}`}
path: src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
user: login: khavinshankar
body: use cn util
created_at: 2025-03-24T08:57:58Z
author_association: MEMBER
diff_hunk: @@ -355,103 +356,113 @@ export function MedicationRequestQuestion({
                   "bg-transparent": !desktopLayout,
                 })}
               >
-                {medications.map((medication, index) => (
-                  <React.Fragment key={index}>
-                    {!desktopLayout ? (
-                      <Collapsible
-                        open={expandedMedicationIndex === index}
-                        onOpenChange={() => {
-                          setExpandedMedicationIndex(
-                            expandedMedicationIndex === index ? null : index,
-                          );
-                        }}
-                        className="border-b last:border-b-0"
-                      >
-                        <div
-                          className={cn(
-                            "flex items-center gap-2 px-2 py-0.5 rounded-md shadow-sm text-sm",
-                            expandedMedicationIndex === index
-                              ? "bg-gray-50"
-                              : "bg-gray-100",
-                          )}
+                {medications.map((medication, index) => {
+                  const isInactive = INACTIVE_MEDICATION_STATUSES.includes(
+                    medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number],
+                  );
+
+                  return (
+                    <React.Fragment key={index}>
path: src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
user: login: khavinshankar
body: prefer using ids for keys over indexes, indexes tends to change when the array changes, here, use medication.id as key
created_at: 2025-03-24T09:00:07Z
author_association: MEMBER
diff_hunk: @@ -218,11 +220,17 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
   );
 
   return (
-    <React.Fragment>
+    <React.Fragment key={medication.id}>
       <div
-        className={`p-4 border-t border-gray-200 ${isInactive ? "bg-gray-100" : ""}`}
+        className={cn("p-4 border-t border-gray-200", {
+          "opacity-40 bg-gray-200": isInactive,
path: src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
user: login: khavinshankar
body: ```suggestion
          isInactive && "opacity-40 bg-gray-200",
```

This technically works, but rewrite it so it is more readable
created_at: 2025-03-27T08:35:34Z
author_association: MEMBER
diff_hunk: @@ -218,11 +220,19 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
   );
 
   return (
-    <React.Fragment>
+    <React.Fragment key={medication.id}>
path: src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
user: login: rithviknishad
body: does this solve anything? 🤔 

```suggestion
    <React.Fragment>
```
created_at: 2025-03-27T12:15:37Z
author_association: MEMBER

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-15T17:20:28Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
This pull request updates several UI components to better indicate inactive medications. The changes modify CSS class names to alter opacity, background colors, and text decorations when a medication is inactive. Additionally, a new constant is introduced to centralize the inactive status determination logic used across components.

## Changes

| Files                                                                                                                        | Change Summary                                                                                                                                                                                               |
|------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `src/components/Medicine/MedicationAdministration/AdministrationTab.tsx` <br> `src/components/Medicine/MedicationsTable.tsx` | Updated CSS classes for inactive medication rows: added `opacity-40` and `line-through` text decoration, and changed background styles (from `bg-gray-100` to `bg-gray-200`).                             |
| `src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx` <br> `src/types/emr/medicationRequest.ts`         | Introduced the `INACTIVE_MEDICATION_STATUSES` constant and updated medication mapping logic to mark medications as inactive. Also, conditionally disabled removal buttons and adjusted CSS styling.  |

## Assessment against linked issues

| Objective                                                                                          | Addressed | Explanation                     |
|----------------------------------------------------------------------------------------------------|-----------|---------------------------------|
| Indicate removed medications with visual distinction (e.g., strikethrough or different color) (#11304) | ✅         |                                 |
| Hide Edit and Remove buttons for inactive medications (#11304)                                    | ✅         |                                 |

## Possibly related PRs
- **ohcnetwork/care_fe#10488**: The changes in the main PR are related to those in the retrieved PR as both involve modifications to the handling and styling of inactive medications, specifically utilizing the `INACTIVE_MEDICATION_STATUSES` constant for conditional rendering.
- **ohcnetwork/care_fe#11168**: The changes in the main PR and the retrieved PR are related as both involve modifications to the handling and styling of medication statuses, specifically using a utility function for conditional class application based on the `isInactive` status.
- **ohcnetwork/care_fe#10613**: The changes in the main PR are related to those in the retrieved PR as both involve modifications to the `MedicationsTable` component, specifically in how inactive medications are styled and displayed.

## Suggested labels
`needs review`

## Suggested reviewers
- rithviknishad
- Jacobjeevan
- nihal467

## Poem
> I’m a little rabbit, hopping through code,  
> With stripes of logic in every mode.  
> Inactive meds now softly gleam,  
> Opacity and line-through like a dream.  
> Happy hops in UI’s new scene! 🐇✨

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 69af9e9e84273bda45606f45e5c9f85d132a7bcf and ac137eaf81fe161dbef1099c5ab9330e03d7fc22.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/Medicine/MedicationAdministration/AdministrationTab.tsx` (4 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/components/Medicine/MedicationAdministration/AdministrationTab.tsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: cypress-run (1)

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ohcnetwork/care_fe&utm_content=11313):

- 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](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai plan` to trigger planning for file edits and PR creation.
- `@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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: netlify[bot]
created_at: 2025-03-15T17:21:10Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *care-ohc* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | ac137eaf81fe161dbef1099c5ab9330e03d7fc22 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/care-ohc/deploys/67e55a4bfb05ac00081eeb75 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-11313.preview.ohc.network](https://deploy-preview-11313.preview.ohc.network) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTExMzEzLnByZXZpZXcub2hjLm5ldHdvcmsifQ.PF_BQiGBOmPy0U33PJZmLFOQ3CrGAHxKVw2359WPdYA)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [care-ohc Preview](https://deploy-preview-11313.preview.ohc.network) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/care-ohc/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: siva222003
created_at: 2025-03-15T17:35:50Z
body: Hey @rithviknishad @Jacobjeevan, 

Please review this and let me know if any changes are required.  

- In the `EncounterQuestionnaire` page, should we display the active medications at the top and then show the inactive ones like we are showing in the other pages, or should we leave it as it is?  
- When I try to navigate to the `EncounterQuestionnaire` page from the organization view, it's showing a 404 not found error since this page is currently set up only for the Facility View, similar to the Treatment Summary Page. Should I add this page to the Organization View, or should we hardcode the facility view URL like the Treatment Summary Page?  

Please let me know your thoughts on the above two questions.  

author_association: CONTRIBUTOR
user: login: siva222003
created_at: 2025-03-16T07:56:35Z
body: Hey @abhimanyurajeesh, I just added 4-5 lines in `MedicationRequestQuestion.tsx` page, but I think the changes are due to some formatting.
author_association: CONTRIBUTOR
user: login: abhimanyurajeesh
created_at: 2025-03-17T10:30:12Z
body: Code changes looks fine,but can you please follow the merge checklist.
![image](https://github.com/user-attachments/assets/27ebedb2-efb3-4024-8507-f005e4b038ef)

Also cant see the deploy preview to test the changes.

author_association: CONTRIBUTOR
user: login: nihal467
created_at: 2025-03-21T04:42:29Z
body: ![image](https://github.com/user-attachments/assets/c080c569-9c2f-44d8-8cab-26517acfc509)

- Show a strikethrough only for medicines marked as "Removed" on the Edit Medication page, but do not apply a strikethrough for medicines marked as "Discontinued" in the Medication Administration section.
author_association: MEMBER
user: login: siva222003
created_at: 2025-03-22T09:09:13Z
body: > ![image](https://private-user-images.githubusercontent.com/57055998/425299443-c080c569-9c2f-44d8-8cab-26517acfc509.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI2MzQ0MTMsIm5iZiI6MTc0MjYzNDExMywicGF0aCI6Ii81NzA1NTk5OC80MjUyOTk0NDMtYzA4MGM1NjktOWMyZi00NGQ4LThjYWItMjY1MTdhY2ZjNTA5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIyVDA5MDE1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZiYzRkNjU1NzcyZmExZTYzNzliNjI0OTE0MGY0NmFiN2YzZWZiNjdiYzA1ZDEwNDc0MjJhMjFiNzA0MTNlMzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.f7xZbQ24iACawXDyGAhAcNAwRCSHbh-aJY922sR-i6E)
> 
> * Show a strikethrough only for medicines marked as "Removed" on the Edit Medication page, but do not apply a strikethrough for medicines marked as "Discontinued" in the Medication Administration section.


Hey @nihal467, on the Edit Medication page, I'm showing a strike-through for all inactive medications, including those that are ended, completed, canceled, and removed. Do you want me to apply the strike-through only to removed medications and only in the Edit Medication list? 

Currently, I'm also showing a strike-through in the Medicines tab and the Medicine Administration tab for all inactive medicines.
 
author_association: CONTRIBUTOR
user: login: nihal467
created_at: 2025-03-24T07:40:19Z
body: you can show strike-through for all statuses except ended medicine
author_association: MEMBER
user: login: siva222003
created_at: 2025-03-24T08:56:03Z
body: @nihal467 I have made the chages, please review it.

[Screencast from 2025-03-24 14-24-06.webm](https://github.com/user-attachments/assets/36888eab-7a0c-45bf-aa9a-8a88ce324955)
 
author_association: CONTRIBUTOR
user: login: siva222003
created_at: 2025-03-24T09:04:24Z
body: hey @khavinshankar , I have used cn everywhere please check the latest code.
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-24T12:27:17Z
body: Conflicts have been detected against the base branch. Please merge the base branch into your branch.
cc: @siva222003
> _See: https://docs.ohc.network/docs/contributing#how-to-resolve-merge-conflicts_
author_association: NONE
user: login: siva222003
created_at: 2025-03-25T05:11:08Z
body: @nihal467 Could you test this PR, and let me know if any changes are required.
author_association: CONTRIBUTOR
user: login: nihal467
created_at: 2025-03-26T07:26:44Z
body: LGTM
author_association: MEMBER
user: login: github-actions[bot]
created_at: 2025-03-27T05:51:21Z
body: Conflicts have been detected against the base branch. Please merge the base branch into your branch.
cc: @siva222003
> _See: https://docs.ohc.network/docs/contributing#how-to-resolve-merge-conflicts_
author_association: NONE
user: login: siva222003
created_at: 2025-03-27T08:54:25Z
body: @khavinshankar Could you please review the new changes?
author_association: CONTRIBUTOR
user: login: rithviknishad
created_at: 2025-03-27T12:13:04Z
body: @siva222003 refrain from force pushing after the PR has been reviewed or tested once. Hard to track what's changed.
author_association: MEMBER
user: login: siva222003
created_at: 2025-03-27T14:04:13Z
body: @rithviknishad I missed the key attribute earlier, but I've removed it now! Please review.
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-28T01:09:12Z
body: @siva222003 Your efforts have helped advance digital healthcare and TeleICU systems. :rocket: Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! :raised_hands:
author_association: NONE