From bad53124de25367fd633c0cfdd50efacb6eb022a Mon Sep 17 00:00:00 2001
From: Eirik Haugstulen <eirik.haugstulen@gmail.com>
Date: Wed, 14 Aug 2024 11:32:38 +0200
Subject: [PATCH] feat: [DHIS2-17655] Two event workspace (#3726)

---
 i18n/en.pot                                   |  18 +-
 .../Buttons/OverflowButton.component.js       |   2 +
 .../PageLayout/DefaultPageLayout.constants.js |   6 +
 .../DefaultEnrollmentLayout.types.js          |   1 +
 .../EnrollmentPageLayout.js                   |   3 +-
 .../LayoutComponentConfig.js                  |  12 ++
 .../WidgetEventEditWrapper.js                 |  17 +-
 .../FlatListOrgUnitField.js                   |  19 +++
 .../FlatListOrgUnitField/index.js             |   3 +
 .../WidgetTwoEventWorkspace.component.js      |  59 +++++++
 .../WidgetTwoEventWorkspace.container.js      | 157 ++++++++++++++++++
 .../WidgetTwoEventWorkspace.types.js          |  24 +++
 .../hooks/useClientDataValues.js              |  97 +++++++++++
 .../hooks/useLinkedEventByOriginId.js         | 110 ++++++++++++
 .../WidgetTwoEventWorkspace/index.js          |   3 +
 .../utils/getDataEntryDetails.js              |  74 +++++++++
 .../utils/getSubValueForDataValue.js          |  60 +++++++
 17 files changed, 659 insertions(+), 6 deletions(-)
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/FlatListOrgUnitField.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/index.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.component.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useClientDataValues.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useLinkedEventByOriginId.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/index.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getDataEntryDetails.js
 create mode 100644 src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getSubValueForDataValue.js

diff --git a/i18n/en.pot b/i18n/en.pot
index cc88503ce6..a24932402c 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -35,6 +35,9 @@ msgstr ""
 "(in the same domain). Please refresh this page if you would like to use "
 "this version again, but be aware that this will close other versions."
 
+msgid "More"
+msgstr "More"
+
 msgid "View {{programName}} dashboard"
 msgstr "View {{programName}} dashboard"
 
@@ -995,6 +998,9 @@ msgstr "The enrollment event data could not be found"
 msgid "Loading"
 msgstr "Loading"
 
+msgid "An error occurred while loading the form"
+msgstr "An error occurred while loading the form"
+
 msgid "Possible duplicates found"
 msgstr "Possible duplicates found"
 
@@ -1537,6 +1543,15 @@ msgstr "{{ scheduledEvents }} scheduled"
 msgid "Stages and Events"
 msgstr "Stages and Events"
 
+msgid "An error occurred while loading the widget."
+msgstr "An error occurred while loading the widget."
+
+msgid "View linked event"
+msgstr "View linked event"
+
+msgid "Scheduled"
+msgstr "Scheduled"
+
 msgid "Changelog"
 msgstr "Changelog"
 
@@ -1703,9 +1718,6 @@ msgstr "An error has occured. See log for details"
 msgid "Scheduled{{ escape }} due {{ time }}"
 msgstr "Scheduled{{ escape }} due {{ time }}"
 
-msgid "Scheduled"
-msgstr "Scheduled"
-
 msgid "Overdue{{ escape }} due {{ time }}"
 msgstr "Overdue{{ escape }} due {{ time }}"
 
diff --git a/src/core_modules/capture-core/components/Buttons/OverflowButton.component.js b/src/core_modules/capture-core/components/Buttons/OverflowButton.component.js
index 476e950611..5f20a47c92 100644
--- a/src/core_modules/capture-core/components/Buttons/OverflowButton.component.js
+++ b/src/core_modules/capture-core/components/Buttons/OverflowButton.component.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import i18n from '@dhis2/d2-i18n';
 import { useRef, useState } from 'react';
 import { Button, Layer, Popper } from '@dhis2/ui';
 
@@ -42,6 +43,7 @@ export const OverflowButton = ({
     return (
         <div ref={anchorRef}>
             <Button
+                aria-label={label ?? i18n.t('More')}
                 primary={primary}
                 secondary={secondary}
                 dataTest={dataTest}
diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js
index 09aaf1f2b9..e4c0feb93d 100644
--- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js
+++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js
@@ -9,10 +9,12 @@ import {
     EventNote,
     AssigneeWidget,
     WidgetTypes,
+    TwoEventWorkspace,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
 
 export const WidgetsForEnrollmentEventEdit: $ReadOnly<{ [key: string]: WidgetConfig }> = Object.freeze({
     EditEventWorkspace,
+    TwoEventWorkspace,
     EventNote,
     AssigneeWidget,
     ...DefaultWidgetsForEnrollmentOverview,
@@ -20,6 +22,10 @@ export const WidgetsForEnrollmentEventEdit: $ReadOnly<{ [key: string]: WidgetCon
 
 export const DefaultPageLayout: PageLayoutConfig = {
     leftColumn: [
+        {
+            type: WidgetTypes.COMPONENT,
+            name: 'TwoEventWorkspace',
+        },
         {
             type: WidgetTypes.COMPONENT,
             name: 'EditEventWorkspace',
diff --git a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js
index a123497504..218d77fa41 100644
--- a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js
+++ b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js
@@ -8,6 +8,7 @@ type DefaultComponents = 'QuickActions'
     | 'AssigneeWidget'
     | 'NewEventWorkspace'
     | 'EditEventWorkspace'
+    | 'TwoEventWorkspace'
     | 'EnrollmentNote'
     | 'EventNote'
     | 'TrackedEntityRelationship'
diff --git a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js
index 2b47e27789..d3f18557ff 100644
--- a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js
+++ b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js
@@ -69,9 +69,10 @@ const EnrollmentPageLayoutPlain = ({
 
     const allProps = useMemo(() => ({
         ...passOnProps,
+        currentPage,
         toggleVisibility,
         addRelationShipContainerElement,
-    }), [addRelationShipContainerElement, passOnProps, toggleVisibility]);
+    }), [addRelationShipContainerElement, currentPage, passOnProps, toggleVisibility]);
 
     const {
         leftColumnWidgets,
diff --git a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js
index 4be7f82fd6..238e74fead 100644
--- a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js
+++ b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js
@@ -28,6 +28,7 @@ import type {
     InputFeedbackProps,
     InputIndicatorProps,
 } from '../../../../../WidgetFeedback/WidgetFeedback.types';
+import { WidgetTwoEventWorkspace } from '../../../../../WidgetTwoEventWorkspace';
 
 export const QuickActions: WidgetConfig = {
     Component: EnrollmentQuickActions,
@@ -242,6 +243,17 @@ export const EditEventWorkspace: WidgetConfig = {
     }),
 };
 
+export const TwoEventWorkspace: WidgetConfig = {
+    Component: WidgetTwoEventWorkspace,
+    getProps: ({ currentPage, eventId, program, stageId, orgUnitId }) => ({
+        currentPage,
+        eventId,
+        programId: program.id,
+        orgUnitId,
+        stageId,
+    }),
+};
+
 export const AssigneeWidget: WidgetConfig = {
     Component: WidgetAssignee,
     getProps: ({
diff --git a/src/core_modules/capture-core/components/Pages/common/WidgetEventEditWrapper/WidgetEventEditWrapper.js b/src/core_modules/capture-core/components/Pages/common/WidgetEventEditWrapper/WidgetEventEditWrapper.js
index 815957bf98..2968d8b1ef 100644
--- a/src/core_modules/capture-core/components/Pages/common/WidgetEventEditWrapper/WidgetEventEditWrapper.js
+++ b/src/core_modules/capture-core/components/Pages/common/WidgetEventEditWrapper/WidgetEventEditWrapper.js
@@ -12,7 +12,12 @@ type WidgetProps = {|
     ...Props,
 |}
 
-export const WidgetEventEditWrapper = ({ pageStatus, programId, stageId, ...passOnProps }: WidgetProps) => {
+export const WidgetEventEditWrapper = ({ pageStatus, ...passOnProps }: WidgetProps) => {
+    const {
+        programId,
+        stageId,
+    } = passOnProps;
+
     const {
         formFoundation,
         stage,
@@ -34,7 +39,7 @@ export const WidgetEventEditWrapper = ({ pageStatus, programId, stageId, ...pass
         );
     }
 
-    if (isLoading || !formFoundation || !stage || isError) {
+    if (isLoading) {
         return (
             <div>
                 {i18n.t('Loading')}
@@ -42,6 +47,14 @@ export const WidgetEventEditWrapper = ({ pageStatus, programId, stageId, ...pass
         );
     }
 
+    if (!formFoundation || !stage || isError) {
+        return (
+            <div>
+                {i18n.t('An error occurred while loading the form')}
+            </div>
+        );
+    }
+
     return (
         <WidgetEventEdit
             {...passOnProps}
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/FlatListOrgUnitField.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/FlatListOrgUnitField.js
new file mode 100644
index 0000000000..c8a1652a76
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/FlatListOrgUnitField.js
@@ -0,0 +1,19 @@
+// @flow
+import React from 'react';
+import { useOrgUnitName } from '../../../metadataRetrieval/orgUnitName';
+
+type Props = {
+    orgUnitId: string,
+}
+
+export const FlatListOrgUnitField = ({
+    orgUnitId,
+}: Props) => {
+    const { displayName } = useOrgUnitName(orgUnitId);
+
+    return (
+        <span>
+            {displayName}
+        </span>
+    );
+};
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/index.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/index.js
new file mode 100644
index 0000000000..cf8e8c20b7
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export { FlatListOrgUnitField } from './FlatListOrgUnitField';
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.component.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.component.js
new file mode 100644
index 0000000000..91a394d420
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.component.js
@@ -0,0 +1,59 @@
+// @flow
+import React, { useMemo } from 'react';
+import { spacers } from '@dhis2/ui';
+import { FlatList } from 'capture-ui';
+import withStyles from '@material-ui/core/styles/withStyles';
+import type { RenderFoundation } from '../../metaData';
+import { getDataEntryDetails, Placements } from './utils/getDataEntryDetails';
+
+type Props = {
+    linkedEvent: any,
+    dataValues: any,
+    formFoundation: RenderFoundation,
+    classes: {
+        container: string,
+    },
+}
+
+const styles = {
+    container: {
+        padding: `${spacers.dp8} ${spacers.dp16}`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacers.dp8,
+    },
+};
+
+const WidgetTwoEventWorkspacePlain = ({ linkedEvent, dataValues, formFoundation, classes }: Props) => {
+    const dataEntryValues = useMemo(() => getDataEntryDetails(
+        linkedEvent,
+        formFoundation,
+    ), [linkedEvent, formFoundation]);
+
+    const listValues = useMemo(() => {
+        const elements = formFoundation.getElements();
+
+        return elements.map((dataElement) => {
+            const value = dataValues[dataElement.id];
+            return {
+                key: dataElement.formName,
+                value: value ?? '',
+                reactKey: dataElement.id,
+            };
+        }).filter(Boolean);
+    }, [dataValues, formFoundation]);
+
+    return (
+        <div className={classes.container}>
+            <FlatList
+                list={[
+                    ...dataEntryValues[Placements.TOP],
+                    ...listValues,
+                    ...dataEntryValues[Placements.BOTTOM],
+                ]}
+            />
+        </div>
+    );
+};
+
+export const WidgetTwoEventWorkspaceComponent = withStyles(styles)(WidgetTwoEventWorkspacePlain);
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js
new file mode 100644
index 0000000000..a889aace6b
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js
@@ -0,0 +1,157 @@
+// @flow
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { colors, FlyoutMenu, IconMore16, MenuItem, spacersNum } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/';
+import type { Props } from './WidgetTwoEventWorkspace.types';
+import { useMetadataForProgramStage } from '../DataEntries/common/ProgramStage/useMetadataForProgramStage';
+import { Widget } from '../Widget';
+import { useLinkedEventByOriginId } from './hooks/useLinkedEventByOriginId';
+import { WidgetTwoEventWorkspaceComponent } from './WidgetTwoEventWorkspace.component';
+import { OverflowButton } from '../Buttons';
+import { buildUrlQueryString } from '../../utils/routing';
+import {
+    EnrollmentPageKeys,
+} from '../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+import { NonBundledDhis2Icon } from '../NonBundledDhis2Icon';
+import { useClientDataValues } from './hooks/useClientDataValues';
+
+const styles = {
+    menu: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: spacersNum.dp8,
+        justifyContent: 'end',
+        background: colors.white,
+        borderTopLeftRadius: 3,
+        borderTopRightRadius: 3,
+        borderStyle: 'solid',
+        borderColor: colors.grey400,
+        borderWidth: 1,
+        borderBottomWidth: 0,
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: spacersNum.dp8,
+    },
+    icon: {
+        marginRight: spacersNum.dp8,
+    },
+};
+
+const WidgetTwoEventWorkspacePlain = ({
+    eventId,
+    programId,
+    orgUnitId,
+    currentPage,
+    classes,
+}: Props) => {
+    const [actionsIsOpen, setActionsIsOpen] = useState(false);
+    const { push } = useHistory();
+    const {
+        linkedEvent,
+        dataValues,
+        isError: isLinkedEventError,
+        isLoading: isLinkedEventLoading,
+    } = useLinkedEventByOriginId({ originEventId: eventId });
+
+    const {
+        formFoundation,
+        stage,
+        isLoading: isLoadingMetadata,
+        isError: isMetadataError,
+    } = useMetadataForProgramStage({
+        programId,
+        stageId: linkedEvent?.programStage,
+    });
+
+    const {
+        clientValuesWithSubValues,
+        isLoading: isLoadingClientValues,
+        isError: isClientValuesError,
+    } = useClientDataValues({
+        linkedEventId: linkedEvent?.event,
+        dataValues,
+        formFoundation,
+    });
+
+    if (isLinkedEventLoading || isLoadingMetadata || isLoadingClientValues) {
+        return null;
+    }
+
+    if (isLinkedEventError || isMetadataError || isClientValuesError) {
+        return (
+            <div>
+                {i18n.t('An error occurred while loading the widget.')}
+            </div>
+        );
+    }
+
+    if (!linkedEvent || !formFoundation || !stage) {
+        return null;
+    }
+
+    return (
+        <div>
+            {currentPage === EnrollmentPageKeys.VIEW_EVENT && (
+                <div className={classes.menu}>
+                    <OverflowButton
+                        open={actionsIsOpen}
+                        onClick={() => setActionsIsOpen(prev => !prev)}
+                        icon={<IconMore16 />}
+                        small
+                        secondary
+                        dataTest={'widget-event-navigate-to-linked-event'}
+                        component={(
+                            <FlyoutMenu dense maxWidth="250px">
+                                <MenuItem
+                                    label={i18n.t('View linked event')}
+                                    dataTest={'event-overflow-view-linked-event'}
+                                    onClick={() => {
+                                        push(`/enrollmentEventEdit?${buildUrlQueryString({
+                                            eventId: linkedEvent.event,
+                                            orgUnitId,
+                                        })}`);
+                                        setActionsIsOpen(false);
+                                    }}
+                                />
+                            </FlyoutMenu>
+                        )}
+                    />
+                </div>
+            )}
+
+            <Widget
+                header={
+                    <div className={classes.header}>
+                        {stage.icon && (
+                            <div className={classes.icon}>
+                                <NonBundledDhis2Icon
+                                    name={stage.icon?.name}
+                                    color={stage.icon?.color}
+                                    width={30}
+                                    height={30}
+                                    cornerRadius={2}
+                                />
+                            </div>
+                        )}
+                        <span> {stage.name} </span>
+                    </div>
+                }
+                noncollapsible
+            >
+                <WidgetTwoEventWorkspaceComponent
+                    linkedEvent={linkedEvent}
+                    formFoundation={formFoundation}
+                    dataValues={clientValuesWithSubValues}
+                />
+            </Widget>
+        </div>
+    );
+};
+
+export const WidgetTwoEventWorkspace = withStyles(
+    styles,
+)(WidgetTwoEventWorkspacePlain);
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js
new file mode 100644
index 0000000000..52aff39ded
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js
@@ -0,0 +1,24 @@
+// @flow
+import {
+    EnrollmentPageKeys,
+} from '../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+
+type PlainProps = {|
+    programId: string,
+    eventId: string,
+    orgUnitId: string,
+    stageId: string,
+    currentPage: $Values<typeof EnrollmentPageKeys>,
+|}
+
+export type LinkedEvent = {|
+    event: string,
+    dataValues: { [string]: any },
+    occurredAt: string,
+    orgUnit: string,
+|}
+
+export type Props = {|
+    ...PlainProps,
+    ...CssClasses,
+|}
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useClientDataValues.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useClientDataValues.js
new file mode 100644
index 0000000000..7e85ede527
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useClientDataValues.js
@@ -0,0 +1,97 @@
+// @flow
+import { useConfig, useDataEngine } from '@dhis2/app-runtime';
+import { useQuery } from 'react-query';
+import type { RenderFoundation } from '../../../metaData';
+import { convertClientToView, convertServerToClient } from '../../../converters';
+import { buildUrl, pipe } from '../../../../capture-core-utils';
+import { subValueGetterByElementType } from '../utils/getSubValueForDataValue';
+import { makeQuerySingleResource } from '../../../utils/api';
+
+type Props = {|
+    linkedEventId: ?string,
+    dataValues: Array<{| dataElement: string, value: any |}>,
+    formFoundation: ?RenderFoundation,
+|}
+
+const convertFn = pipe(convertServerToClient, convertClientToView);
+
+const formatDataValues = async (
+    dataValues: Array<{| dataElement: string, value: any |}>,
+    formFoundation: RenderFoundation,
+    querySingleResource,
+    linkedEventId,
+    absoluteApiPath,
+) => {
+    const elements = formFoundation.getElements();
+
+    const formattedDataValues = dataValues.map(async (dataValue) => {
+        const element = elements.find(({ id }) => id === dataValue.dataElement);
+        if (!element) {
+            return null;
+        }
+
+        let value = dataValue.value;
+        // $FlowFixMe - subValueGetterByElementType is only a subset of the full dataElementTypes
+        if (subValueGetterByElementType[element.type]) {
+            // $FlowFixMe
+            value = await subValueGetterByElementType[element.type]({
+                dataElement: {
+                    id: element.id,
+                    value: dataValue.value,
+                },
+                querySingleResource,
+                eventId: linkedEventId,
+                absoluteApiPath,
+            });
+        }
+
+        return {
+            id: element.id,
+            value: convertFn(value, element.type, element),
+        };
+    });
+
+    const resolvedDataValues = await Promise.all(formattedDataValues);
+    return resolvedDataValues.reduce((acc, dataValue) => {
+        if (dataValue) {
+            acc[dataValue.id] = dataValue.value;
+        }
+        return acc;
+    }, {});
+};
+
+export const useClientDataValues = ({
+    linkedEventId,
+    dataValues,
+    formFoundation,
+}: Props) => {
+    const dataEngine = useDataEngine();
+    const { baseUrl, apiVersion } = useConfig();
+    const querySingleResource = makeQuerySingleResource(dataEngine.query.bind(dataEngine));
+    const { data: clientValuesWithSubValues, isError, isLoading } = useQuery(
+        ['formattedDataValues', linkedEventId, dataValues],
+        () => formatDataValues(
+            dataValues,
+            // $FlowFixMe
+            formFoundation,
+            querySingleResource,
+            // $FlowFixMe
+            linkedEventId,
+            buildUrl(baseUrl, `api/${apiVersion}`),
+        ),
+        {
+            enabled: !!dataValues &&
+                !!formFoundation &&
+                !!linkedEventId &&
+                !!baseUrl &&
+                !!apiVersion &&
+                !!querySingleResource,
+        },
+    );
+
+    return {
+        clientValuesWithSubValues,
+        isError,
+        isLoading,
+    };
+};
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useLinkedEventByOriginId.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useLinkedEventByOriginId.js
new file mode 100644
index 0000000000..fa876139d7
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/hooks/useLinkedEventByOriginId.js
@@ -0,0 +1,110 @@
+// @flow
+import { useMemo } from 'react';
+import { useApiDataQuery } from '../../../utils/reactQueryHelpers';
+
+type Props = {|
+    originEventId: string,
+|}
+
+const calculateRelatedStageRelationships = (event) => {
+    if (!event || !event.relationships || event.relationships.length === 0) {
+        return null;
+    }
+
+    const stageToStageRelationships = event.relationships.filter(({ to, from }) => {
+        if (!to.event || !from.event) {
+            return null;
+        }
+        return to.event.program === from.event.program;
+    });
+
+    if (stageToStageRelationships.length !== 1) {
+        return null;
+    }
+
+    const stageToStageRelationship = stageToStageRelationships[0];
+    const eventIsOrigin = stageToStageRelationship.from.event.event === event.event;
+
+    if (eventIsOrigin && !stageToStageRelationship.bidirectional) {
+        return null;
+    }
+
+    const linkedEvent = eventIsOrigin ? stageToStageRelationship.to.event : stageToStageRelationship.from.event;
+
+    return {
+        relationshipType: stageToStageRelationship.relationshipType,
+        linkedEvent,
+    };
+};
+
+export const useLinkedEventByOriginId = ({ originEventId }: Props) => {
+    const eventByIdQuery = useMemo(() => ({
+        resource: 'tracker/events',
+        id: originEventId,
+        params: {
+            fields: 'event,relationships[relationshipType,relationshipName,bidirectional,' +
+                        'from[event[event,dataValues,occurredAt,scheduledAt,status,orgUnit,programStage,program]],' +
+                        'to[event[event,dataValues,*,occurredAt,scheduledAt,status,orgUnit,programStage,program]]' +
+                    ']',
+        },
+    }), [originEventId]);
+
+    const { data, isLoading, isError, error } = useApiDataQuery(
+        ['linkedEventByOriginEvent', originEventId],
+        eventByIdQuery,
+        {
+            enabled: !!originEventId,
+            cacheTime: 0,
+            staleTime: 4000,
+        },
+    );
+
+    const {
+        linkedEvent,
+        relationshipType,
+        dataValues,
+    } = useMemo(() => {
+        if (!data) {
+            return {};
+        }
+
+        const relatedStageRelationship = calculateRelatedStageRelationships(data);
+        if (!relatedStageRelationship) {
+            return {};
+        }
+
+        return {
+            linkedEvent: relatedStageRelationship.linkedEvent,
+            relationshipType: relatedStageRelationship.relationshipType,
+            dataValues: relatedStageRelationship.linkedEvent.dataValues,
+        };
+    }, [data]);
+
+    // Add fallback query if relationship is missing eventData
+    const {
+        data: fallbackDataValues,
+        isLoading: isLoadingFallback,
+        isError: isErrorFallback,
+    } = useApiDataQuery(
+        ['linkedEventDataValuesFallback', linkedEvent?.event],
+        {
+            resource: 'tracker/events',
+            id: linkedEvent?.event,
+            params: {
+                fields: 'event,dataValues,occurredAt,scheduledAt,status,orgUnit,programStage,program',
+            },
+        },
+        {
+            enabled: !!linkedEvent?.event && !dataValues,
+        },
+    );
+
+    return {
+        linkedEvent: dataValues ? linkedEvent : fallbackDataValues,
+        relationshipType,
+        dataValues: dataValues || fallbackDataValues?.dataValues,
+        isLoading: isLoading || isLoadingFallback,
+        isError: isError || isErrorFallback,
+        error,
+    };
+};
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/index.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/index.js
new file mode 100644
index 0000000000..27320f9e8c
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export { WidgetTwoEventWorkspace } from './WidgetTwoEventWorkspace.container';
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getDataEntryDetails.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getDataEntryDetails.js
new file mode 100644
index 0000000000..3e42d171de
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getDataEntryDetails.js
@@ -0,0 +1,74 @@
+// @flow
+import React from 'react';
+import { pipe } from 'capture-core-utils';
+import i18n from '@dhis2/d2-i18n';
+import { dataElementTypes, type RenderFoundation } from '../../../metaData';
+import { convertClientToView, convertServerToClient } from '../../../converters';
+import type { LinkedEvent } from '../WidgetTwoEventWorkspace.types';
+import { FlatListOrgUnitField } from '../FlatListOrgUnitField';
+
+const convertFn = pipe(convertServerToClient, convertClientToView);
+
+export const Placements = {
+    TOP: 'TOP',
+    BOTTOM: 'BOTTOM',
+};
+
+const StatusLabels = {
+    ACTIVE: i18n.t('Active'),
+    COMPLETED: i18n.t('Completed'),
+    CANCELLED: i18n.t('Cancelled'),
+    SCHEDULE: i18n.t('Scheduled'),
+};
+
+const DataEntryFieldsToInclude = {
+    occurredAt: {
+        apiKey: 'occurredAt',
+        type: dataElementTypes.DATE,
+        placement: Placements.TOP,
+    },
+    scheduledAt: {
+        apiKey: 'scheduledAt',
+        type: dataElementTypes.DATE,
+        placement: Placements.TOP,
+    },
+    orgUnit: {
+        apiKey: 'orgUnit',
+        type: dataElementTypes.ORGANISATION_UNIT,
+        placement: Placements.TOP,
+        label: i18n.t('Organisation unit'),
+        convertFn: orgUnitId => <FlatListOrgUnitField orgUnitId={orgUnitId} />,
+    },
+    status: {
+        apiKey: 'status',
+        type: dataElementTypes.TEXT,
+        placement: Placements.BOTTOM,
+        label: i18n.t('Status'),
+        convertFn: value => StatusLabels[value],
+    },
+};
+
+export const getDataEntryDetails = (linkedEvent: LinkedEvent, formFoundation: RenderFoundation) => {
+    const dataEntryValues = Object.values(DataEntryFieldsToInclude).map((entry: any) => {
+        const value = linkedEvent[entry.apiKey];
+        if (!value) return null;
+
+        const convertedValue = entry.convertFn ? entry.convertFn(value) : convertFn(value, entry.type);
+
+        return {
+            key: entry.label ?? formFoundation.getLabel(entry.apiKey),
+            value: convertedValue,
+            reactKey: entry.apiKey,
+            placement: entry.placement,
+        };
+    });
+
+    return dataEntryValues.reduce((acc, entry) => {
+        if (!entry) return acc;
+        acc[entry.placement].push(entry);
+        return acc;
+    }, {
+        [Placements.TOP]: [],
+        [Placements.BOTTOM]: [],
+    });
+};
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getSubValueForDataValue.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getSubValueForDataValue.js
new file mode 100644
index 0000000000..8936d423b5
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/utils/getSubValueForDataValue.js
@@ -0,0 +1,60 @@
+// @flow
+import { dataElementTypes } from '../../../metaData';
+import type { QuerySingleResource } from '../../../utils/api';
+import { featureAvailable, FEATURES } from '../../../../capture-core-utils';
+
+type SubValueFunctionProps = {
+    dataElement: Object,
+    querySingleResource: QuerySingleResource,
+    eventId: string,
+    absoluteApiPath: string,
+}
+
+const getFileResourceSubvalue = async ({ dataElement, querySingleResource, eventId, absoluteApiPath }: SubValueFunctionProps) => {
+    const { value } = dataElement;
+    if (!value) return null;
+
+    const { id, displayName: name } = await querySingleResource({ resource: `fileResources/${value}` });
+    return {
+        id,
+        name,
+        url: `${absoluteApiPath}/events/files?dataElementUid=${dataElement.id}&eventUid=${eventId}`,
+    };
+};
+
+const getImageSubvalue = async ({ dataElement, querySingleResource, eventId, absoluteApiPath }: SubValueFunctionProps) => {
+    const { id: dataElementId, value } = dataElement;
+    if (!value) return null;
+
+    const { id, displayName: name } = await querySingleResource({ resource: `fileResources/${value}` });
+    return {
+        id,
+        name,
+        ...(featureAvailable(FEATURES.trackerImageEndpoint) ?
+            {
+                url: `${absoluteApiPath}/tracker/events/${eventId}/dataValues/${dataElementId}/image`,
+                previewUrl: `${absoluteApiPath}/tracker/events/${eventId}/dataValues/${dataElementId}/image?dimension=small`,
+            } : {
+                url: `${absoluteApiPath}/events/files?dataElementUid=${dataElementId}&eventUid=${eventId}`,
+                previewUrl: `${absoluteApiPath}/events/files?dataElementUid=${dataElementId}&eventUid=${eventId}`,
+            }
+        ),
+    };
+};
+
+const getOrganisationUnitSubvalue = async ({ dataElement, querySingleResource }: SubValueFunctionProps) => {
+    const organisationUnit = await querySingleResource({
+        resource: 'organisationUnits',
+        id: dataElement.value,
+        params: {
+            fields: 'id,name',
+        },
+    });
+    return { ...organisationUnit };
+};
+
+export const subValueGetterByElementType = {
+    [dataElementTypes.FILE_RESOURCE]: getFileResourceSubvalue,
+    [dataElementTypes.IMAGE]: getImageSubvalue,
+    [dataElementTypes.ORGANISATION_UNIT]: getOrganisationUnitSubvalue,
+};