feat: [DHIS2-21655] Uncomplete events from view mode

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-08-04T13:01:31.955Z\n"
-"PO-Revision-Date: 2026-08-04T13:01:31.956Z\n"
+"POT-Creation-Date: 2026-08-04T14:35:11.571Z\n"
+"PO-Revision-Date: 2026-08-04T14:35:11.571Z\n"
 
 msgid "The application could not be loaded."
 msgstr "The application could not be loaded."
@@ -437,6 +437,42 @@ msgstr ""
 "This event has unsaved changes. Leaving this page without saving will lose "
 "these changes. Are you sure you want to discard unsaved changes?"
 
+msgid "An error occurred when updating event status"
+msgstr "An error occurred when updating event status"
+
+msgid "Mark incomplete"
+msgstr "Mark incomplete"
+
+msgid "Mark complete"
+msgstr "Mark complete"
+
+msgid "An error occurred while deleting the event"
+msgstr "An error occurred while deleting the event"
+
+msgid "Delete event"
+msgstr "Delete event"
+
+msgid "Deleting an event is permanent and cannot be undone."
+msgstr "Deleting an event is permanent and cannot be undone."
+
+msgid "Are you sure you want to delete this event?"
+msgstr "Are you sure you want to delete this event?"
+
+msgid "Yes, delete event"
+msgstr "Yes, delete event"
+
+msgid "{{occurredAt}} belongs to an expired period. Event cannot be deleted"
+msgstr "{{occurredAt}} belongs to an expired period. Event cannot be deleted"
+
+msgid "This event has been completed"
+msgstr "This event has been completed"
+
+msgid "This event is outside the edit period"
+msgstr "This event is outside the edit period"
+
+msgid "Delete"
+msgstr "Delete"
+
 msgid "No events to display"
 msgstr "No events to display"
 
@@ -572,9 +608,6 @@ msgstr "Uploading file"
 msgid "selected"
 msgstr "selected"
 
-msgid "Delete"
-msgstr "Delete"
-
 msgid "Select file"
 msgstr "Select file"
 
@@ -1095,9 +1128,6 @@ msgstr "You only have view access to this program stage"
 msgid "This event is outside the editing period"
 msgstr "This event is outside the editing period"
 
-msgid "This event has been completed"
-msgstr "This event has been completed"
-
 msgid "This {{trackedEntityName}} is deactivated"
 msgstr "This {{trackedEntityName}} is deactivated"
 
@@ -1356,9 +1386,6 @@ msgstr "Reactivate"
 msgid "Mark as cancelled"
 msgstr "Mark as cancelled"
 
-msgid "Mark incomplete"
-msgstr "Mark incomplete"
-
 msgid "You do not have access to delete this enrollment"
 msgstr "You do not have access to delete this enrollment"
 
@@ -1500,18 +1527,9 @@ msgstr "Warning"
 msgid "stage not found in rules execution"
 msgstr "stage not found in rules execution"
 
-msgid "Delete event"
-msgstr "Delete event"
-
-msgid "Deleting an event is permanent and cannot be undone."
-msgstr "Deleting an event is permanent and cannot be undone."
-
 msgid "Are you sure you want to delete this event? "
 msgstr "Are you sure you want to delete this event? "
 
-msgid "Yes, delete event"
-msgstr "Yes, delete event"
-
 msgid "Go to “Schedule” tab to reschedule this event"
 msgstr "Go to “Schedule” tab to reschedule this event"
 
@@ -1760,30 +1778,12 @@ msgstr "This stage can only have one event"
 msgid "New {{ eventName }} event"
 msgstr "New {{ eventName }} event"
 
-msgid "{{occurredAt}} belongs to an expired period. Event cannot be deleted"
-msgstr "{{occurredAt}} belongs to an expired period. Event cannot be deleted"
-
-msgid "This event is outside the edit period"
-msgstr "This event is outside the edit period"
-
-msgid "An error occurred while deleting the event"
-msgstr "An error occurred while deleting the event"
-
-msgid "Are you sure you want to delete this event?"
-msgstr "Are you sure you want to delete this event?"
-
-msgid "An error occurred when updating event status"
-msgstr "An error occurred when updating event status"
-
 msgid "Unskip"
 msgstr "Unskip"
 
 msgid "Skip"
 msgstr "Skip"
 
-msgid "To open this event, please wait until saving is complete"
-msgstr "To open this event, please wait until saving is complete"
-
 msgid "Show {{ rest }} more"
 msgstr "Show {{ rest }} more"
 

src/core_modules/capture-core-utils/types/api-types.ts

@@ -23,6 +23,7 @@ export type ApiEnrollmentEvent = {
     occurredAt: string;
     scheduledAt: string;
     completedAt?: string;
+    completedBy?: string;
     updatedAt: string;
     dataValues: Array<ApiDataValue>;
     notes?: Array<any>;

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState, ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles, WithStyles } from 'capture-core-utils/styles';
 import { colors } from '@dhis2/ui';
+import { statusTypes, type StatusType } from '../../../events/statusTypes';
 import { DirectionalChevron } from '../../../utils/rtl';
 import { useWorkingListLabel } from './hooks/useWorkingListLabel';
 import { BreadcrumbItem } from '../common/BreadcrumbItem';
@@ -13,24 +14,14 @@ import {
 
 type EnrollmentPageKeyTypes = typeof EnrollmentPageKeys[keyof typeof EnrollmentPageKeys];
 
-export const EventStatuses = {
-    ACTIVE: 'ACTIVE',
-    COMPLETED: 'COMPLETED',
-    SKIPPED: 'SKIPPED',
-    SCHEDULE: 'SCHEDULE',
-    OVERDUE: 'OVERDUE',
-} as const;
-
-type EventStatus = typeof EventStatuses[keyof typeof EventStatuses];
-
 type OwnProps = {
     onBackToMainPage: () => void;
     onBackToDashboard?: () => void;
     onBackToViewEvent?: () => void;
     displayFrontPageList: boolean;
     programId: string;
     userInteractionInProgress?: boolean;
-    eventStatus?: EventStatus;
+    eventStatus?: StatusType;
     page: 'mainPage' | EnrollmentPageKeyTypes;
 };
 type WarningKey = typeof pageKeys[keyof typeof pageKeys];
@@ -50,9 +41,9 @@ const pageKeys = {
     ...EnrollmentPageKeys,
 } as const;
 
-const eventIsScheduled = (eventStatus?: EventStatus): boolean =>
+const eventIsScheduled = (eventStatus?: StatusType): boolean =>
     !!eventStatus &&
-    ([EventStatuses.SCHEDULE, EventStatuses.OVERDUE, EventStatuses.SKIPPED] as EventStatus[])
+    ([statusTypes.SCHEDULE, statusTypes.OVERDUE, statusTypes.SKIPPED] as StatusType[])
         .includes(eventStatus);
 
 

src/core_modules/capture-core/components/EventOverflowMenu/MenuItems/CompletionMenuItem.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import log from 'loglevel';
+import { MenuItem, IconCheckmark16, IconUndo16 } from '@dhis2/ui';
+import { useMutation } from '@tanstack/react-query';
+import { useAlert, useDataEngine } from '@dhis2/app-runtime';
+import { errorCreator } from 'capture-core-utils';
+import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
+
+type Props = {
+    eventId: string;
+    eventStatus?: string;
+    onMutate?: (newStatus: string) => void;
+    onSuccess?: (newStatus: string) => void;
+    onError?: () => void;
+    onClose: () => void;
+};
+
+export const CompletionMenuItem = ({
+    eventId,
+    eventStatus,
+    onMutate,
+    onSuccess,
+    onError,
+    onClose,
+}: Props) => {
+    const dataEngine = useDataEngine();
+    const { show: showError } = useAlert(
+        ({ message }) => message,
+        { critical: true },
+    );
+
+    const isCompleted = eventStatus === eventStatuses.COMPLETED;
+    const newStatus = isCompleted ? eventStatuses.ACTIVE : eventStatuses.COMPLETED;
+
+    const { mutate: updateCompletionStatus } = useMutation(
+        async () => {
+            const { event: apiEvent } = await dataEngine.query({
+                event: {
+                    resource: 'tracker/events',
+                    id: eventId,
+                    params: {
+                        fields: '*,!completedAt,!completedBy,!dataValues,!relationships',
+                    },
+                },
+            }) as any;
+            return dataEngine.mutate({
+                resource: 'tracker?async=false&importStrategy=UPDATE',
+                type: 'create',
+                data: {
+                    events: [{
+                        ...apiEvent,
+                        status: newStatus,
+                    }],
+                },
+            });
+        },
+        {
+            onMutate: () => {
+                onMutate?.(newStatus);
+            },
+            onError: (error: unknown) => {
+                showError({ message: i18n.t('An error occurred when updating event status') });
+                log.error(errorCreator('An error occurred when updating event status')({ error, eventId, newStatus }));
+                onError?.();
+            },
+            onSuccess: () => {
+                onSuccess?.(newStatus);
+            },
+        },
+    );
+
+    return (
+        <MenuItem
+            dense
+            dataTest={isCompleted ? 'uncomplete-event-menu-item' : 'complete-event-menu-item'}
+            icon={isCompleted ? <IconUndo16 /> : <IconCheckmark16 />}
+            label={isCompleted ? i18n.t('Mark incomplete') : i18n.t('Mark complete')}
+            suffix=""
+            onClick={() => {
+                onClose();
+                updateCompletionStatus();
+            }}
+        />
+    );
+};

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/EventRow/DeleteActionModal/DeleteActionModal.tsx → src/core_modules/capture-core/components/EventOverflowMenu/MenuItems/DeleteEventModal.tsx

@@ -46,8 +46,6 @@ export const DeleteActionModal = ({
         }),
         {
             onMutate: () => {
-                // Capture the event before the optimistic removal so it can be restored
-                // from the same source of truth (the rendered redux event) if the delete fails.
                 const eventToRollbackOnFail = eventDetails;
 
                 onDeleteEvent(eventId);

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/EventRow/DeleteActionButton/DeleteActionButton.tsx → src/core_modules/capture-core/components/EventOverflowMenu/MenuItems/DeleteMenuItem.tsx

@@ -5,10 +5,10 @@ import {
     IconDelete16,
     MenuItem,
 } from '@dhis2/ui';
-import { ConditionalTooltip } from '../../../../../../Tooltips/ConditionalTooltip';
-import { convertClientToView, convertServerToClient } from '../../../../../../../converters';
-import { dataElementTypes, type ProgramStage } from '../../../../../../../metaData';
-import { useEventEditPermissions } from '../../../../../../../hooks';
+import { ConditionalTooltip } from '../../Tooltips/ConditionalTooltip';
+import { convertClientToView, convertServerToClient } from '../../../converters';
+import { dataElementTypes, type ProgramStage } from '../../../metaData';
+import { useEventEditPermissions } from '../../../hooks';
 
 type Props = {
     setActionsOpen: (open: boolean) => void;

src/core_modules/capture-core/components/EventOverflowMenu/MenuItems/index.ts

@@ -0,0 +1,3 @@
+export { DeleteActionButton } from './DeleteMenuItem';
+export { DeleteActionModal } from './DeleteEventModal';
+export { CompletionMenuItem } from './CompletionMenuItem';

src/core_modules/capture-core/components/EventOverflowMenu/index.ts

@@ -0,0 +1 @@
+export { DeleteActionButton, DeleteActionModal, CompletionMenuItem } from './MenuItems';

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.ts

@@ -10,10 +10,9 @@ import type {
 import {
     EnrollmentPageKeys,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
-import { EventStatuses } from '../../../Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb';
+import type { StatusType } from '../../../../events/statusTypes';
 
 type EnrollmentPageKeyTypes = typeof EnrollmentPageKeys[keyof typeof EnrollmentPageKeys];
-type EventStatus = typeof EventStatuses[keyof typeof EventStatuses];
 
 export type Props = {
     currentPage: EnrollmentPageKeyTypes;
@@ -29,7 +28,7 @@ export type Props = {
     onBackToDashboard?: () => void;
     onBackToViewEvent?: () => void;
     userInteractionInProgress?: boolean;
-    eventStatus?: EventStatus;
+    eventStatus?: StatusType;
     onDelete: () => void;
     onAddNew: () => void;
     onViewAll: (stageId: string) => void;

src/core_modules/capture-core/components/WidgetEnrollment/Actions/Complete/Complete.component.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { IconCheckmark16, MenuItem } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
+import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
 import type { Props } from './complete.types';
-import { plainStatus, eventStatuses } from '../../constants/status.const';
+import { plainStatus } from '../../constants/status.const';
 
 export const Complete = ({ enrollment, events, onUpdate, setOpenCompleteModal }: Props) => {
     const hasActiveEvents = events?.some(event => event.status === eventStatuses.ACTIVE);

src/core_modules/capture-core/components/WidgetEnrollment/Actions/Complete/CompleteModal/CompleteModal.container.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { formatMomentEn } from 'capture-core-utils/date';
+import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
 import { CompleteModalComponent } from './CompleteModal.component';
-import { eventStatuses, plainStatus } from '../../../constants/status.const';
+import { plainStatus } from '../../../constants/status.const';
 import type { Props } from './completeModal.types';
 
 export const CompleteModal = ({ enrollment, events, programStages, setOpenCompleteModal, onUpdateStatus }: Props) => {

src/core_modules/capture-core/components/WidgetEnrollment/constants/status.const.ts

@@ -11,12 +11,3 @@ export const translatedStatus = Object.freeze({
     [plainStatus.COMPLETED]: i18n.t('Completed'),
     [plainStatus.CANCELLED]: i18n.t('Cancelled'),
 });
-
-export const eventStatuses = Object.freeze({
-    ACTIVE: 'ACTIVE',
-    COMPLETED: 'COMPLETED',
-    VISITED: 'VISITED',
-    SCHEDULE: 'SCHEDULE',
-    OVERDUE: 'OVERDUE',
-    SKIPPED: 'SKIPPED',
-});

src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.component.tsx

@@ -36,7 +36,6 @@ import {
     withConditionalTooltip,
 } from '../../FormFields/New';
 import { statusTypes, translatedStatusTypes } from '../../../events/statusTypes';
-import { eventStatuses } from '../constants/status.const';
 import labelTypeClasses from '../DataEntry/dataEntryFieldLabels.module.css';
 import { withDeleteButton } from '../DataEntry/withDeleteButton';
 import { withAskToCreateNew } from '../../DataEntry/withAskToCreateNew';
@@ -324,7 +323,7 @@ const buildCompleteFieldSettingsFn = () => {
                         withDisplayMessages()(
                             withInternalChangeHandler()(
                                 withConditionalTooltip((props: any) => {
-                                    const isEventCompleted = props.eventStatus === eventStatuses.COMPLETED;
+                                    const isEventCompleted = props.eventStatus === statusTypes.COMPLETED;
                                     const canUncompleteEvent = props.canUncompleteEvent;
                                     const shouldDisable = isEventCompleted && !canUncompleteEvent;
                                     return shouldDisable
@@ -341,7 +340,7 @@ const buildCompleteFieldSettingsFn = () => {
     const completeSettings = {
         getComponent: () => completeComponent,
         getComponentProps: (props: any) => {
-            const isEventCompleted = props.eventStatus === eventStatuses.COMPLETED;
+            const isEventCompleted = props.eventStatus === statusTypes.COMPLETED;
             const canUncompleteEvent = props.canUncompleteEvent;
             const shouldDisable = isEventCompleted && !canUncompleteEvent;
 
@@ -585,7 +584,8 @@ class EditEventDataEntryPlain extends Component<Props & WithStyles<typeof getSty
 
     render() {
         const { eventStatus } = this.props;
-        const isScheduleOrOverdue = eventStatus && [statusTypes.SCHEDULE, statusTypes.OVERDUE].includes(eventStatus);
+        const isScheduleOrOverdue =
+            eventStatus === statusTypes.SCHEDULE || eventStatus === statusTypes.OVERDUE;
 
         return isScheduleOrOverdue ? this.renderScheduleView() : this.renderDataEntry();
     }