From 4c83d75071a603b9d92d5ad0072ab9f00230b7a4 Mon Sep 17 00:00:00 2001
From: henrikmv <henrik@devOtta.no>
Date: Sun, 18 Aug 2024 21:12:10 +0200
Subject: [PATCH 1/6] feat: remove Grid

---
 .../components/InfoIconText/InfoIconText.js   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js b/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
index 49b416c249..87be34ef5b 100644
--- a/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
+++ b/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
@@ -2,8 +2,6 @@
 import React, { type ComponentType, type Node } from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { IconInfo16, colors } from '@dhis2/ui';
-import Grid from '@material-ui/core/Grid';
-
 
 type OwnProps = {| children: string | Node |}
 
@@ -15,6 +13,8 @@ const styles = () => ({
     container: {
         marginTop: 12,
         marginBottom: 12,
+        display: 'flex',
+        alignItems: 'center',
     },
     text: {
         fontSize: 14,
@@ -24,18 +24,15 @@ const styles = () => ({
     },
 });
 
-
 const InfoIconTextPlain = ({ classes, children }) => (
-    <Grid container direction="row" alignItems="center" className={classes.container}>
-        <Grid item>
-            <span className={classes.icon}>
-                <IconInfo16 color={colors.grey800} />
-            </span>
-        </Grid>
-        <Grid item className={classes.text}>
+    <div className={classes.container}>
+        <span className={classes.icon}>
+            <IconInfo16 color={colors.grey800} />
+        </span>
+        <span className={classes.text}>
             {children}
-        </Grid>
-    </Grid>
+        </span>
+    </div>
 );
 
 export const InfoIconText: ComponentType<OwnProps> = withStyles(styles)(InfoIconTextPlain);

From 2e691bd42006928cc42f23c81c2e3a9674465abd Mon Sep 17 00:00:00 2001
From: henrikmv <henrik@devOtta.no>
Date: Sun, 18 Aug 2024 21:42:10 +0200
Subject: [PATCH 2/6] feat: remove grid from cardlistitem

---
 .../CardList/CardListItem.component.js        | 152 +++++++++---------
 1 file changed, 74 insertions(+), 78 deletions(-)

diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js
index a1fe4bc5d1..e231870145 100644
--- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js
+++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js
@@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n';
 import React from 'react';
 import moment from 'moment';
 import type { ComponentType } from 'react';
-import { Grid, withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core';
 import { colors, Tag, IconCheckmark16, Tooltip } from '@dhis2/ui';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { CardImage } from '../../../capture-ui/CardImage/CardImage.component';
@@ -18,21 +18,20 @@ import { dataElementTypes, getTrackerProgramThrowIfNotFound } from '../../metaDa
 import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
 import type { ListItem, RenderCustomCardActions } from './CardList.types';
 
-
 type OwnProps = $ReadOnly<{|
     item: ListItem,
-    currentSearchScopeName?: string,
-    currentProgramId?: string,
-    currentSearchScopeType?: string,
-    renderCustomCardActions?: RenderCustomCardActions,
-    profileImageDataElement: ?CardProfileImageElementInformation,
-    dataElements: CardDataElementsInformation,
+        currentSearchScopeName ?: string,
+        currentProgramId ?: string,
+        currentSearchScopeType ?: string,
+        renderCustomCardActions ?: RenderCustomCardActions,
+        profileImageDataElement: ?CardProfileImageElementInformation,
+            dataElements: CardDataElementsInformation,
 |}>;
 
 type Props = $ReadOnly<{|
     ...OwnProps,
     ...CssClasses
-|}>;
+    |}>;
 
 const getStyles = (theme: Theme) => ({
     itemContainer: {
@@ -44,6 +43,7 @@ const getStyles = (theme: Theme) => ({
         borderRadius: theme.typography.pxToRem(5),
         border: `1px solid ${colors.grey400}`,
         backgroundColor: colors.grey050,
+        position: 'relative',
     },
     itemDataContainer: {
         display: 'flex',
@@ -52,6 +52,9 @@ const getStyles = (theme: Theme) => ({
         fontSize: theme.typography.pxToRem(12),
         color: colors.grey700,
         paddingBottom: theme.typography.pxToRem(8),
+        position: 'absolute',
+        top: theme.typography.pxToRem(8),
+        right: theme.typography.pxToRem(8),
     },
     enrolled: {
         display: 'flex',
@@ -78,28 +81,28 @@ const getStyles = (theme: Theme) => ({
 });
 
 const deriveEnrollmentType =
-  (enrollments, currentProgramId): $Keys<typeof enrollmentTypes> => {
-      if (!currentProgramId) {
-          return enrollmentTypes.DONT_SHOW_TAG;
-      }
+    (enrollments, currentProgramId): $Keys<typeof enrollmentTypes> => {
+        if (!currentProgramId) {
+            return enrollmentTypes.DONT_SHOW_TAG;
+        }
 
-      const enrollmentsInCurrentProgram = enrollments
-          .filter(({ program }) => program === currentProgramId)
-          .map(({ status, lastUpdated }) => ({ status, lastUpdated }));
+        const enrollmentsInCurrentProgram = enrollments
+            .filter(({ program }) => program === currentProgramId)
+            .map(({ status, lastUpdated }) => ({ status, lastUpdated }));
 
 
-      const { ACTIVE, CANCELLED, COMPLETED } = enrollmentTypes;
-      if (enrollmentsInCurrentProgram.find(({ status }) => status === ACTIVE)) {
-          return ACTIVE;
-      } else if (enrollmentsInCurrentProgram.find(({ status }) => status === COMPLETED)) {
-          return COMPLETED;
-      } else if (enrollmentsInCurrentProgram.find(({ status }) => status === CANCELLED)) {
-          return CANCELLED;
-      }
-      return enrollmentTypes.DONT_SHOW_TAG;
-  };
+        const { ACTIVE, CANCELLED, COMPLETED } = enrollmentTypes;
+        if (enrollmentsInCurrentProgram.find(({ status }) => status === ACTIVE)) {
+            return ACTIVE;
+        } else if (enrollmentsInCurrentProgram.find(({ status }) => status === COMPLETED)) {
+            return COMPLETED;
+        } else if (enrollmentsInCurrentProgram.find(({ status }) => status === CANCELLED)) {
+            return CANCELLED;
+        }
+        return enrollmentTypes.DONT_SHOW_TAG;
+    };
 
-const deriveEnrollmentOrgUnitIdAndDate = (enrollments, enrollmentType, currentProgramId): {orgUnitId?: string, enrolledAt?: string} => {
+const deriveEnrollmentOrgUnitIdAndDate = (enrollments, enrollmentType, currentProgramId): { orgUnitId?: string, enrolledAt?: string } => {
     if (!enrollments?.length) { return {}; }
     if (!currentProgramId && enrollments.length) {
         const { orgUnit: orgUnitId, enrolledAt } = enrollments[0];
@@ -198,64 +201,57 @@ const CardListItemIndex = ({
         if (currentSearchScopeType === searchScopes.ALL_PROGRAMS) {
             return null;
         }
-        return (<>
-            <ListEntry
-                name={i18n.t('Organisation unit')}
-                value={orgUnitName}
-            />  <ListEntry
-                name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of enrollment')}
-                value={enrolledAt}
-                type={dataElementTypes.DATE}
-            />
-        </>);
+        return (
+            <>
+                <ListEntry
+                    name={i18n.t('Organisation unit')}
+                    value={orgUnitName}
+                />
+                <ListEntry
+                    name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of enrollment')}
+                    value={enrolledAt}
+                    type={dataElementTypes.DATE}
+                />
+            </>
+        );
     };
 
     return (
         <div data-test="card-list-item" className={classes.itemContainer}>
             <div className={classes.itemDataContainer}>
-
                 <div className={classes.itemValuesContainer}>
-                    <Grid container >
-                        <Grid item>
-                            {renderImageDataElement(profileImageDataElement)}
-                        </Grid>
-                        <Grid item sm container>
-                            <Grid item xs container direction="column" >
-                                {dataElements
-                                    .map(({ id, name, type }) => (
-                                        <ListEntry
-                                            key={id}
-                                            name={name}
-                                            value={item.values[id]}
-                                            type={type}
-                                        />))
-                                }
-
-                                {renderEnrollmentDetails()}
-                            </Grid>
-                            <Grid item>
-                                {
-                                    item.tei && item.tei.updatedAt &&
-                                    <div className={classes.smallerLetters}>
-                                        { i18n.t('Last updated') } {' '}
-                                        { item.tei && <Tooltip content={fromServerDate(item.tei.updatedAt).toLocaleString()}>
-                                            { moment(fromServerDate(item.tei.updatedAt)).fromNow() }
-                                        </Tooltip>}
-                                    </div>
-                                }
-
-                                <div className={classes.enrolled}>
-                                    {renderTag()}
-                                </div>
-                            </Grid>
-                        </Grid>
-                    </Grid>
+                    {renderImageDataElement(profileImageDataElement)}
+                    <div>
+                        {dataElements
+                            .map(({ id, name, type }) => (
+                                <ListEntry
+                                    key={id}
+                                    name={name}
+                                    value={item.values[id]}
+                                    type={type}
+                                />
+                            ))
+                        }
+                        {renderEnrollmentDetails()}
+                    </div>
+                    <div>
+                        <div className={classes.enrolled}>
+                            {renderTag()}
+                        </div>
+                    </div>
                 </div>
             </div>
-
-            {
-                renderCustomCardActions
-                &&
+            {item.tei && item.tei.updatedAt && (
+                <div className={classes.smallerLetters}>
+                    {i18n.t('Last updated')}{' '}
+                    {item.tei && (
+                        <Tooltip content={fromServerDate(item.tei.updatedAt).toLocaleString()}>
+                            {moment(fromServerDate(item.tei.updatedAt)).fromNow()}
+                        </Tooltip>
+                    )}
+                </div>
+            )}
+            {renderCustomCardActions && (
                 <div className={classes.buttonMargin}>
                     {
                         renderCustomCardActions({
@@ -270,7 +266,7 @@ const CardListItemIndex = ({
                         })
                     }
                 </div>
-            }
+            )}
         </div>
     );
 };

From 8bf9a07c722f46391885bf2ee241fe588b9ddf46 Mon Sep 17 00:00:00 2001
From: henrikmv <henrik@devOtta.no>
Date: Sun, 18 Aug 2024 21:48:13 +0200
Subject: [PATCH 3/6] feat: remove grid from incompleteselectionsmessage

---
 .../IncompleteSelectionsMessage/index.js      | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
index aac6f17f94..6c206f72b6 100644
--- a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
+++ b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Paper from '@material-ui/core/Paper/Paper';
-import Grid from '@material-ui/core/Grid/Grid';
 import { withStyles } from '@material-ui/core';
 import { colors } from '@dhis2/ui';
 
@@ -15,15 +14,16 @@ const StyledPaper = withStyles({
     },
 })(Paper);
 
-export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
-    <Grid container justify="center">
-        <Grid item>
-            <StyledPaper
-                data-test={dataTest}
-                elevation={0}
-            >
-                {children}
-            </StyledPaper>
-        </Grid>
-    </Grid>);
+const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+};
 
+export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
+    <div style={containerStyle}>
+        <StyledPaper data-test={dataTest} elevation={0}>
+            {children}
+        </StyledPaper>
+    </div>
+);

From a42d5198fc1631f019209b03bef594b2ea5a8434 Mon Sep 17 00:00:00 2001
From: henrikmv <henrik@devOtta.no>
Date: Mon, 19 Aug 2024 13:03:41 +0200
Subject: [PATCH 4/6] feat: remove grid registration data entry form

---
 .../RegistrationDataEntry.component.js        | 142 +++++++++---------
 1 file changed, 75 insertions(+), 67 deletions(-)

diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
index 511c2da3b7..f17f2512ab 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
 import i18n from '@dhis2/d2-i18n';
 import { Button, colors, spacers } from '@dhis2/ui';
-import { Grid, withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core';
 import type { Props } from './RegistrationDataEntry.types';
 import { TeiRegistrationEntry, SingleEventRegistrationEntry } from '../../../DataEntries';
 import { scopeTypes } from '../../../../metaData';
@@ -42,6 +42,25 @@ const getStyles = ({ typography }) => ({
     marginBottom: {
         marginBottom: spacers.dp16,
     },
+    flexContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        flexWrap: 'wrap',
+    },
+    flexItem: {
+        flex: 1,
+        minWidth: '300px',
+    },
+    dataEntryReadyItem: {
+        minWidth: '300px',
+    },
+    '@media (max-width: 960px)': {
+        flexContainer: {
+            flexDirection: 'column',
+        },
+    },
 });
 
 const DialogButtons = ({ onCancel, onSave }) => (
@@ -167,8 +186,7 @@ const RegistrationDataEntryPlain = ({
                 </div>
             }
 
-            {
-                scopeType === scopeTypes.TRACKER_PROGRAM &&
+            {scopeType === scopeTypes.TRACKER_PROGRAM && (
                 <div className={classes.container}>
                     <div className={classes.title} >
                         {
@@ -183,45 +201,40 @@ const RegistrationDataEntryPlain = ({
                         }
                     </div>
 
-                    <div className={classes.registrationContainer}>
-                        <Grid container justify="space-between">
-                            <Grid item md sm={9} xs={9} >
-                                <EnrollmentRegistrationEntryWrapper
-                                    id={dataEntryId}
-                                    orgUnitId={currentOrgUnitId}
-                                    teiId={teiId}
-                                    selectedScopeId={selectedScopeId}
-                                    onSave={onSaveWithEnrollment}
-                                    onCancel={onCancel}
-                                    saveButtonText={(trackedEntityTypeNameLC: string) => i18n.t('Save {{trackedEntityTypeName}}', {
+                    <div className={classes.flexContainer}>
+                        <div className={classes.flexItem}>
+                            <EnrollmentRegistrationEntryWrapper
+                                id={dataEntryId}
+                                orgUnitId={currentOrgUnitId}
+                                teiId={teiId}
+                                selectedScopeId={selectedScopeId}
+                                onSave={onSaveWithEnrollment}
+                                onCancel={onCancel}
+                                saveButtonText={(trackedEntityTypeNameLC: string) =>
+                                    i18n.t('Save {{trackedEntityTypeName}}', {
                                         trackedEntityTypeName: trackedEntityTypeNameLC,
                                         interpolation: { escapeValue: false },
-                                    })}
-                                    duplicatesReviewPageSize={resultsPageSize}
-                                    renderDuplicatesDialogActions={renderDuplicatesDialogActions}
-                                    renderDuplicatesCardActions={renderDuplicatesCardActions}
-                                    ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
-                                    trackedEntityInstanceAttributes={trackedEntityInstanceAttributes}
+                                    })
+                                }
+                                duplicatesReviewPageSize={resultsPageSize}
+                                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                                trackedEntityInstanceAttributes={trackedEntityInstanceAttributes}
+                            />
+                        </div>
+                        {dataEntryIsReady && (
+                            <div className={classes.dataEntryReadyItem}>
+                                <DataEntryWidgetOutput
+                                    selectedScopeId={selectedScopeId}
+                                    dataEntryId={dataEntryId}
                                 />
-                            </Grid>
-                            {
-                                dataEntryIsReady &&
-                                <Grid item>
-                                    <div className={classes.marginTop}>
-                                        <DataEntryWidgetOutput
-                                            selectedScopeId={selectedScopeId}
-                                            dataEntryId={dataEntryId}
-                                        />
-                                    </div>
-                                </Grid>
-                            }
-                        </Grid>
+                            </div>
+                        )}
                     </div>
                 </div>
-            }
-
-            {
-                scopeType === scopeTypes.TRACKED_ENTITY_TYPE &&
+            )}
+            {scopeType === scopeTypes.TRACKED_ENTITY_TYPE && (
                 <div className={classes.container}>
                     <div className={classes.title} >
                         {i18n.t('New {{titleText}}', {
@@ -238,40 +251,35 @@ const RegistrationDataEntryPlain = ({
                             accessNeeded="write"
                         />
                     </div>
-                    <div className={classes.registrationContainer}>
-                        <Grid container justify="space-between">
-                            <Grid item md sm={9} xs={9} >
-                                <TeiRegistrationEntry
-                                    id={dataEntryId}
+                    <div className={classes.flexContainer}>
+                        <div className={classes.flexItem}>
+                            <TeiRegistrationEntry
+                                id={dataEntryId}
+                                selectedScopeId={selectedScopeId}
+                                orgUnitId={currentOrgUnitId}
+                                onCancel={onCancel}
+                                saveButtonText={i18n.t('Save {{trackedEntityName}}', {
+                                    trackedEntityName,
+                                    interpolation: { escapeValue: false },
+                                })}
+                                onSave={onSaveWithoutEnrollment}
+                                duplicatesReviewPageSize={resultsPageSize}
+                                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                            />
+                        </div>
+                        {dataEntryIsReady && (
+                            <div className={classes.dataEntryReadyItem}>
+                                <DataEntryWidgetOutput
                                     selectedScopeId={selectedScopeId}
-                                    orgUnitId={currentOrgUnitId}
-                                    onCancel={onCancel}
-                                    saveButtonText={i18n.t('Save {{trackedEntityName}}', {
-                                        trackedEntityName,
-                                        interpolation: { escapeValue: false },
-                                    })}
-                                    onSave={onSaveWithoutEnrollment}
-                                    duplicatesReviewPageSize={resultsPageSize}
-                                    renderDuplicatesDialogActions={renderDuplicatesDialogActions}
-                                    renderDuplicatesCardActions={renderDuplicatesCardActions}
-                                    ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                                    dataEntryId={dataEntryId}
                                 />
-                            </Grid>
-                            {
-                                dataEntryIsReady &&
-                                <Grid item>
-                                    <div className={classes.marginBottom}>
-                                        <DataEntryWidgetOutput
-                                            selectedScopeId={selectedScopeId}
-                                            dataEntryId={dataEntryId}
-                                        />
-                                    </div>
-                                </Grid>
-                            }
-                        </Grid>
+                            </div>
+                        )}
                     </div>
                 </div>
-            }
+            )}
 
             {
                 scopeType === scopeTypes.EVENT_PROGRAM && (

From c6324ce2e23820ca1bb3856ee9353ce1811e0e5c Mon Sep 17 00:00:00 2001
From: henrikmv <henrik@devOtta.no>
Date: Mon, 19 Aug 2024 13:13:11 +0200
Subject: [PATCH 5/6] fix: remove use of media for responsiveness

---
 .../RegistrationDataEntry.component.js                     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
index f17f2512ab..d2e49fd3b5 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
@@ -51,16 +51,11 @@ const getStyles = ({ typography }) => ({
     },
     flexItem: {
         flex: 1,
-        minWidth: '300px',
+        minWidth: '500px',
     },
     dataEntryReadyItem: {
         minWidth: '300px',
     },
-    '@media (max-width: 960px)': {
-        flexContainer: {
-            flexDirection: 'column',
-        },
-    },
 });
 
 const DialogButtons = ({ onCancel, onSave }) => (

From 04a0a33dbf55183c5d7884a3cfe36233dc1957a0 Mon Sep 17 00:00:00 2001
From: henrikmv <henrik@devOtta.no>
Date: Mon, 19 Aug 2024 14:29:17 +0200
Subject: [PATCH 6/6] fix: revert code clean up

---
 .../CardList/CardListItem.component.js        | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js
index e231870145..d411d1a933 100644
--- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js
+++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js
@@ -81,28 +81,28 @@ const getStyles = (theme: Theme) => ({
 });
 
 const deriveEnrollmentType =
-    (enrollments, currentProgramId): $Keys<typeof enrollmentTypes> => {
-        if (!currentProgramId) {
-            return enrollmentTypes.DONT_SHOW_TAG;
-        }
+  (enrollments, currentProgramId): $Keys<typeof enrollmentTypes> => {
+      if (!currentProgramId) {
+          return enrollmentTypes.DONT_SHOW_TAG;
+      }
 
-        const enrollmentsInCurrentProgram = enrollments
-            .filter(({ program }) => program === currentProgramId)
-            .map(({ status, lastUpdated }) => ({ status, lastUpdated }));
+      const enrollmentsInCurrentProgram = enrollments
+          .filter(({ program }) => program === currentProgramId)
+          .map(({ status, lastUpdated }) => ({ status, lastUpdated }));
 
 
-        const { ACTIVE, CANCELLED, COMPLETED } = enrollmentTypes;
-        if (enrollmentsInCurrentProgram.find(({ status }) => status === ACTIVE)) {
-            return ACTIVE;
-        } else if (enrollmentsInCurrentProgram.find(({ status }) => status === COMPLETED)) {
-            return COMPLETED;
-        } else if (enrollmentsInCurrentProgram.find(({ status }) => status === CANCELLED)) {
-            return CANCELLED;
-        }
-        return enrollmentTypes.DONT_SHOW_TAG;
-    };
+      const { ACTIVE, CANCELLED, COMPLETED } = enrollmentTypes;
+      if (enrollmentsInCurrentProgram.find(({ status }) => status === ACTIVE)) {
+          return ACTIVE;
+      } else if (enrollmentsInCurrentProgram.find(({ status }) => status === COMPLETED)) {
+          return COMPLETED;
+      } else if (enrollmentsInCurrentProgram.find(({ status }) => status === CANCELLED)) {
+          return CANCELLED;
+      }
+      return enrollmentTypes.DONT_SHOW_TAG;
+  };
 
-const deriveEnrollmentOrgUnitIdAndDate = (enrollments, enrollmentType, currentProgramId): { orgUnitId?: string, enrolledAt?: string } => {
+const deriveEnrollmentOrgUnitIdAndDate = (enrollments, enrollmentType, currentProgramId): {orgUnitId?: string, enrolledAt?: string} => {
     if (!enrollments?.length) { return {}; }
     if (!currentProgramId && enrollments.length) {
         const { orgUnit: orgUnitId, enrolledAt } = enrollments[0];
@@ -201,19 +201,16 @@ const CardListItemIndex = ({
         if (currentSearchScopeType === searchScopes.ALL_PROGRAMS) {
             return null;
         }
-        return (
-            <>
-                <ListEntry
-                    name={i18n.t('Organisation unit')}
-                    value={orgUnitName}
-                />
-                <ListEntry
-                    name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of enrollment')}
-                    value={enrolledAt}
-                    type={dataElementTypes.DATE}
-                />
-            </>
-        );
+        return (<>
+            <ListEntry
+                name={i18n.t('Organisation unit')}
+                value={orgUnitName}
+            />  <ListEntry
+                name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of enrollment')}
+                value={enrolledAt}
+                type={dataElementTypes.DATE}
+            />
+        </>);
     };
 
     return (