feat: [DHIS2-21875] Unify overflow menu between View Event page and Stages and Events widget

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-09-08T15:49:17.652Z\n"
-"PO-Revision-Date: 2026-09-08T15:49:17.653Z\n"
+"POT-Creation-Date: 2026-09-08T15:56:04.062Z\n"
+"PO-Revision-Date: 2026-09-08T15:56:04.062Z\n"
 
 msgid "The application could not be loaded."
 msgstr "The application could not be loaded."
@@ -437,6 +437,9 @@ 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 "View changelog"
+msgstr "View changelog"
+
 msgid "An error occurred when updating event status"
 msgstr "An error occurred when updating event status"
 
@@ -446,6 +449,9 @@ msgstr "Mark incomplete"
 msgid "Mark complete"
 msgstr "Mark complete"
 
+msgid "Delete"
+msgstr "Delete"
+
 msgid "An error occurred while deleting the event"
 msgstr "An error occurred while deleting the event"
 
@@ -461,8 +467,11 @@ msgstr "Are you sure you want to delete this event?"
 msgid "Yes, delete event"
 msgstr "Yes, delete event"
 
-msgid "Delete"
-msgstr "Delete"
+msgid "Unskip"
+msgstr "Unskip"
+
+msgid "Skip"
+msgstr "Skip"
 
 msgid "No events to display"
 msgstr "No events to display"
@@ -993,9 +1002,6 @@ msgstr "events"
 msgid "event"
 msgstr "event"
 
-msgid "View changelog"
-msgstr "View changelog"
-
 msgid "Event details"
 msgstr "Event details"
 
@@ -1098,6 +1104,12 @@ msgstr "Possible duplicates found"
 msgid "An error occurred loading possible duplicates"
 msgstr "An error occurred loading possible duplicates"
 
+msgid "View only - {{message}}"
+msgstr "View only - {{message}}"
+
+msgid "View only"
+msgstr "View only"
+
 msgid "You only have view access to this enrollment"
 msgstr "You only have view access to this enrollment"
 
@@ -1122,18 +1134,15 @@ msgstr "This event is outside the editing period"
 msgid "This event has been completed"
 msgstr "This event has been completed"
 
+msgid "You do not have access to uncomplete this event"
+msgstr "You do not have access to uncomplete this event"
+
 msgid "This {{trackedEntityName}} is deactivated"
 msgstr "This {{trackedEntityName}} is deactivated"
 
 msgid "This tracked entity is deactivated"
 msgstr "This tracked entity is deactivated"
 
-msgid "View only - {{message}}"
-msgstr "View only - {{message}}"
-
-msgid "View only"
-msgstr "View only"
-
 msgid "Add relationship"
 msgstr "Add relationship"
 
@@ -1530,9 +1539,6 @@ msgstr "Go to “Schedule” tab to reschedule this event"
 msgid "Scheduled date cannot be changed for {{ eventStatus }} events"
 msgstr "Scheduled date cannot be changed for {{ eventStatus }} events"
 
-msgid "You do not have access to uncomplete this event"
-msgstr "You do not have access to uncomplete this event"
-
 msgid "Geometry (Area)"
 msgstr "Geometry (Area)"
 
@@ -1772,12 +1778,6 @@ msgstr "This stage can only have one event"
 msgid "New {{ eventName }} event"
 msgstr "New {{ eventName }} event"
 
-msgid "Unskip"
-msgstr "Unskip"
-
-msgid "Skip"
-msgstr "Skip"
-
 msgid "Show {{ rest }} more"
 msgstr "Show {{ rest }} more"
 

src/core_modules/capture-core/components/DataEntries/common/trackerEvent/withAskToCompleteEnrollment/CompleteModal/CompleteModal.container.tsx

@@ -1,9 +1,8 @@
 import React, { useMemo, useCallback } from 'react';
-import { useTimeZoneConversion } from '@dhis2/app-runtime';
-import { formatMomentEn } from 'capture-core-utils/date';
 import { getTrackerProgramThrowIfNotFound } from '../../../../../../metaData';
 import { statusTypes } from '../../../../../../enrollment';
 import { statusTypes as eventStatuses } from '../../../../../../events/statusTypes';
+import { useServerFormattedNow } from '../../../../../../hooks';
 import { CompleteEnrollmentAndEventsModalComponent, CompleteEnrollmentModalComponent } from './CompleteModal.component';
 import type { Props } from './completeModal.types';
 
@@ -17,7 +16,7 @@ export const CompleteModal = ({
     hasActiveEvents,
     programStageName,
 }: Props) => {
-    const { fromClientDate } = useTimeZoneConversion();
+    const getUpdatedAt = useServerFormattedNow();
     const programStages = useMemo(() => {
         const program = getTrackerProgramThrowIfNotFound(programId);
         return [...program.stages.values()];
@@ -53,9 +52,7 @@ export const CompleteModal = ({
     }, [enrollment, onCompleteEnrollment]);
 
     const onHandleCompleteEnrollmentAndEvents = useCallback(() => {
-        const nowClient = fromClientDate(new Date());
-        const nowServer = new Date(nowClient.getServerZonedISOString());
-        const updatedAt = formatMomentEn(nowServer, 'YYYY-MM-DDTHH:mm:ss');
+        const updatedAt = getUpdatedAt();
         const eventsToComplete = events.reduce((acc: any, event: any) => {
             const { access } = programStages.find((p: any) => p.id === event.programStage) || {};
             const isCurrentEvent = eventId && event.event === eventId;
@@ -71,7 +68,7 @@ export const CompleteModal = ({
             events: eventsToComplete,
         };
         onCompleteEnrollment(enrollmentWithCompletedEvents);
-    }, [events, programStages, enrollment, onCompleteEnrollment, fromClientDate, eventId]);
+    }, [events, programStages, enrollment, onCompleteEnrollment, getUpdatedAt, eventId]);
 
     return hasActiveEvents ? (
         <CompleteEnrollmentAndEventsModalComponent

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { FlyoutMenu, MenuDivider } from '@dhis2/ui';
+import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
+import { ChangelogMenuItem, SkipMenuItem, CompletionMenuItem, DeleteMenuItem } from './MenuItems';
+
+const isSkippableStatus = (status?: string) =>
+    status === eventStatuses.SCHEDULE
+    || status === eventStatuses.SKIPPED
+    || status === eventStatuses.OVERDUE;
+
+const isCompletableStatus = (status?: string) =>
+    status === eventStatuses.ACTIVE || status === eventStatuses.COMPLETED;
+
+type Props = {
+    eventId: string;
+    eventStatus?: string;
+    maxWidth?: string;
+    dataTest?: string;
+
+    onOpenChangelog: () => void;
+    onClose: () => void;
+
+    hideMutationActions?: boolean;
+    isEventBlockedByExpiry: boolean;
+    canToggleCompletion: boolean;
+    readOnlyMessage: string;
+
+    onSkipMutate: (newStatus: string) => void;
+    onSkipSuccess: (newStatus: string) => void;
+    onSkipError: () => void;
+
+    onCompletionMutate: (newStatus: string) => void;
+    onCompletionSuccess: (newStatus: string) => void;
+    onCompletionError: () => void;
+
+    askCompleteEnrollmentOnEventComplete?: boolean;
+    onAskCompleteEnrollment?: () => void;
+
+    onDeleteRequest: () => void;
+};
+
+export const EventOverflowMenu = ({
+    eventId,
+    eventStatus,
+    maxWidth,
+    dataTest = 'overflow-menu',
+    onOpenChangelog,
+    onClose,
+    hideMutationActions = false,
+    isEventBlockedByExpiry,
+    canToggleCompletion,
+    readOnlyMessage,
+    onSkipMutate,
+    onSkipSuccess,
+    onSkipError,
+    onCompletionMutate,
+    onCompletionSuccess,
+    onCompletionError,
+    askCompleteEnrollmentOnEventComplete,
+    onAskCompleteEnrollment,
+    onDeleteRequest,
+}: Props) => (
+    <FlyoutMenu dense maxWidth={maxWidth} dataTest={dataTest}>
+        <ChangelogMenuItem onOpenChangelog={onOpenChangelog} onClose={onClose} />
+
+        {!hideMutationActions && (
+            <>
+                <MenuDivider />
+
+                {isSkippableStatus(eventStatus) && (
+                    <SkipMenuItem
+                        eventId={eventId}
+                        eventStatus={eventStatus}
+                        onMutate={onSkipMutate}
+                        onSuccess={onSkipSuccess}
+                        onError={onSkipError}
+                        onClose={onClose}
+                        isEventBlockedByExpiry={isEventBlockedByExpiry}
+                        readOnlyMessage={readOnlyMessage}
+                    />
+                )}
+
+                {isCompletableStatus(eventStatus) && (
+                    <CompletionMenuItem
+                        eventId={eventId}
+                        eventStatus={eventStatus}
+                        onMutate={onCompletionMutate}
+                        onSuccess={onCompletionSuccess}
+                        onError={onCompletionError}
+                        onClose={onClose}
+                        canToggleCompletion={canToggleCompletion}
+                        readOnlyMessage={readOnlyMessage}
+                        askCompleteEnrollmentOnEventComplete={askCompleteEnrollmentOnEventComplete}
+                        onAskCompleteEnrollment={onAskCompleteEnrollment}
+                    />
+                )}
+
+                <DeleteMenuItem
+                    onDeleteRequest={onDeleteRequest}
+                    onClose={onClose}
+                    isEventBlockedByExpiry={isEventBlockedByExpiry}
+                    readOnlyMessage={readOnlyMessage}
+                />
+            </>
+        )}
+    </FlyoutMenu>
+);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { MenuItem, IconClockHistory16 } from '@dhis2/ui';
+
+type Props = {
+    onOpenChangelog: () => void;
+    onClose: () => void;
+};
+
+export const ChangelogMenuItem = ({ onOpenChangelog, onClose }: Props) => (
+    <MenuItem
+        dense
+        icon={<IconClockHistory16 />}
+        label={i18n.t('View changelog')}
+        suffix={null}
+        dataTest="event-overflow-changelog"
+        onClick={() => {
+            onOpenChangelog();
+            onClose();
+        }}
+    />
+);

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

@@ -7,8 +7,9 @@ import { useAlert, useDataEngine } from '@dhis2/app-runtime';
 import { useDispatch } from 'react-redux';
 import { errorCreator } from 'capture-core-utils';
 import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
-import { removeEventChangelogQueries } from '../../WidgetsChangelog';
 import { statusTypes as enrollmentStatuses } from '../../../enrollment';
+import { removeEventChangelogQueries } from '../../WidgetsChangelog';
+import { ConditionalTooltip } from '../../Tooltips/ConditionalTooltip';
 import { CompleteModal } from '../../DataEntries/common/trackerEvent/withAskToCompleteEnrollment/CompleteModal';
 import {
     updateEnrollmentAndEvents,
@@ -50,6 +51,8 @@ type MenuItemProps = {
     onSuccess?: (newStatus: string) => void;
     onError?: () => void;
     onClose: () => void;
+    canToggleCompletion: boolean;
+    readOnlyMessage: string;
     askCompleteEnrollmentOnEventComplete?: boolean;
     onAskCompleteEnrollment?: () => void;
 };
@@ -61,6 +64,8 @@ export const CompletionMenuItem = ({
     onSuccess,
     onError,
     onClose,
+    canToggleCompletion,
+    readOnlyMessage,
     askCompleteEnrollmentOnEventComplete,
     onAskCompleteEnrollment,
 }: MenuItemProps) => {
@@ -88,21 +93,24 @@ export const CompletionMenuItem = ({
     );
 
     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={null}
-            onClick={() => {
-                onClose();
-                if (!isCompleted && askCompleteEnrollmentOnEventComplete && onAskCompleteEnrollment) {
-                    onAskCompleteEnrollment();
-                } else {
-                    updateCompletionStatus();
-                }
-            }}
-        />
+        <ConditionalTooltip content={readOnlyMessage} enabled={!canToggleCompletion}>
+            <MenuItem
+                dense
+                disabled={!canToggleCompletion}
+                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={null}
+                onClick={() => {
+                    onClose();
+                    if (!isCompleted && askCompleteEnrollmentOnEventComplete && onAskCompleteEnrollment) {
+                        onAskCompleteEnrollment();
+                    } else {
+                        updateCompletionStatus();
+                    }
+                }}
+            />
+        </ConditionalTooltip>
     );
 };