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-08-28T11:16:56.550Z\n"
-"PO-Revision-Date: 2026-08-28T11:16:56.550Z\n"
+"POT-Creation-Date: 2026-08-28T12:16:22.694Z\n"
+"PO-Revision-Date: 2026-08-28T12:16:22.694Z\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/EventOverflowMenu/EventOverflowMenu.tsx

@@ -0,0 +1,100 @@
+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;
+
+    onDeleteRequest: () => void;
+};
+
+export const EventOverflowMenu = ({
+    eventId,
+    eventStatus,
+    maxWidth,
+    dataTest = 'overflow-menu',
+    onOpenChangelog,
+    onClose,
+    hideMutationActions = false,
+    isEventBlockedByExpiry,
+    canToggleCompletion,
+    readOnlyMessage,
+    onSkipMutate,
+    onSkipSuccess,
+    onSkipError,
+    onCompletionMutate,
+    onCompletionSuccess,
+    onCompletionError,
+    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}
+                    />
+                )}
+
+                <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,6 +7,7 @@ import { useAlert, useDataEngine } from '@dhis2/app-runtime';
 import { errorCreator } from 'capture-core-utils';
 import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
 import { removeEventChangelogQueries } from '../../WidgetsChangelog';
+import { ConditionalTooltip } from '../../Tooltips/ConditionalTooltip';
 
 type Props = {
     eventId: string;
@@ -15,6 +16,8 @@ type Props = {
     onSuccess?: (newStatus: string) => void;
     onError?: () => void;
     onClose: () => void;
+    canToggleCompletion: boolean;
+    readOnlyMessage: string;
 };
 
 export const CompletionMenuItem = ({
@@ -24,6 +27,8 @@ export const CompletionMenuItem = ({
     onSuccess,
     onError,
     onClose,
+    canToggleCompletion,
+    readOnlyMessage,
 }: Props) => {
     const dataEngine = useDataEngine();
     const queryClient = useQueryClient();
@@ -75,16 +80,19 @@ 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();
-                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();
+                    updateCompletionStatus();
+                }}
+            />
+        </ConditionalTooltip>
     );
 };