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-12T10:46:09.643Z\n"
-"PO-Revision-Date: 2026-08-12T10:46:09.643Z\n"
+"POT-Creation-Date: 2026-08-12T10:56:04.908Z\n"
+"PO-Revision-Date: 2026-08-12T10:56:04.908Z\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,18 @@ msgstr "Mark incomplete"
 msgid "Mark complete"
 msgstr "Mark complete"
 
+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 "An error occurred while deleting the event"
 msgstr "An error occurred while deleting the event"
 
@@ -461,17 +476,11 @@ 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 "Unskip"
+msgstr "Unskip"
 
-msgid "Delete"
-msgstr "Delete"
+msgid "Skip"
+msgstr "Skip"
 
 msgid "No events to display"
 msgstr "No events to display"
@@ -1002,9 +1011,6 @@ msgstr "events"
 msgid "event"
 msgstr "event"
 
-msgid "View changelog"
-msgstr "View changelog"
-
 msgid "Event details"
 msgstr "Event details"
 
@@ -1128,6 +1134,9 @@ 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 skipped"
+msgstr "This event has been skipped"
+
 msgid "This {{trackedEntityName}} is deactivated"
 msgstr "This {{trackedEntityName}} is deactivated"
 
@@ -1778,12 +1787,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,148 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useQueryClient } from '@tanstack/react-query';
+import { CircularLoader, FlyoutMenu, IconMore16 } from '@dhis2/ui';
+import type { ApiEnrollmentEvent } from 'capture-core-utils/types/api-types';
+import { statusTypes as eventStatuses } from 'capture-core/events/statusTypes';
+import { useCanChangeCompletionStatus } from 'capture-core/hooks';
+import { OverflowButton } from '../Buttons';
+import { removeEventChangelogQueries } from '../WidgetsChangelog';
+import { type ProgramStage } from '../../metaData';
+import {
+    updateEnrollmentEvent,
+    commitEnrollmentEvent,
+    rollbackEnrollmentEvent,
+} from '../Pages/common/EnrollmentOverviewDomain';
+import {
+    CompletionMenuItem,
+    SkipMenuItem,
+    ChangelogMenuItem,
+    DeleteMenuItem,
+    DeleteEventModal,
+} from './MenuItems';
+
+type Props = {
+    eventId: string;
+    eventDetails: ApiEnrollmentEvent;
+    programId: string;
+    programStage?: ProgramStage | null;
+    pendingApiResponse?: boolean;
+    onDeleteEvent: (eventId: string) => void;
+    onRollbackDeleteEvent: (event: ApiEnrollmentEvent) => void;
+    onOpenChangelog: () => void;
+    onStatusUpdated?: (newStatus: string) => void;
+    dataTest: string;
+};
+
+export const EventOverflowMenu = ({
+    eventId,
+    eventDetails,
+    programId,
+    programStage,
+    pendingApiResponse,
+    onDeleteEvent,
+    onRollbackDeleteEvent,
+    onOpenChangelog,
+    onStatusUpdated,
+    dataTest,
+}: Props) => {
+    const [actionsOpen, setActionsOpen] = useState(false);
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+    const dispatch = useDispatch();
+    const queryClient = useQueryClient();
+
+    const canChangeCompletionStatus = useCanChangeCompletionStatus({
+        programId,
+        stage: programStage,
+        eventStatus: eventDetails.status,
+    });
+    const canSkip = eventDetails.status === eventStatuses.SCHEDULE ||
+        eventDetails.status === eventStatuses.SKIPPED;
+
+    // Optimistic update shared by both status toggles (complete/incomplete and skip/unskip):
+    // apply the new status right away, then commit on success or roll back on error.
+    const onStatusMutate = (newStatus: string) => {
+        const { completedAt, completedBy, ...eventWithoutCompletion } = eventDetails;
+        dispatch(updateEnrollmentEvent(eventId, { ...eventWithoutCompletion, status: newStatus }));
+    };
+    const onStatusSuccess = (newStatus: string) => {
+        dispatch(commitEnrollmentEvent(eventId));
+        // Drop the cached changelog for this event, the way the event pages do on save. Status
+        // changes are not rendered today (no `status` item definition, so those rows are
+        // discarded), but this sits with the mutation rather than in each host, so it stays correct
+        // if they become displayable.
+        removeEventChangelogQueries(queryClient, eventId);
+        onStatusUpdated?.(newStatus);
+    };
+    const onStatusError = () => {
+        dispatch(rollbackEnrollmentEvent(eventId));
+    };
+
+    if (pendingApiResponse) {
+        return <CircularLoader small dataTest={`${dataTest}-loader`} />;
+    }
+
+    return (
+        <>
+            <OverflowButton
+                open={actionsOpen}
+                onClick={() => setActionsOpen(prev => !prev)}
+                icon={<IconMore16 />}
+                small
+                secondary
+                dataTest={`${dataTest}-button`}
+                component={
+                    <FlyoutMenu
+                        dense
+                        maxWidth="250px"
+                        dataTest={`${dataTest}-menu`}
+                    >
+                        {canChangeCompletionStatus && (
+                            <CompletionMenuItem
+                                eventId={eventId}
+                                eventStatus={eventDetails.status}
+                                onMutate={onStatusMutate}
+                                onSuccess={onStatusSuccess}
+                                onError={onStatusError}
+                                onClose={() => setActionsOpen(false)}
+                            />
+                        )}
+                        {canSkip && (
+                            <SkipMenuItem
+                                eventId={eventId}
+                                eventStatus={eventDetails.status}
+                                onMutate={onStatusMutate}
+                                onSuccess={onStatusSuccess}
+                                onError={onStatusError}
+                                onClose={() => setActionsOpen(false)}
+                            />
+                        )}
+                        <ChangelogMenuItem
+                            onOpenChangelog={onOpenChangelog}
+                            onClose={() => setActionsOpen(false)}
+                        />
+                        <DeleteMenuItem
+                            occurredAt={eventDetails.occurredAt}
+                            completedAt={eventDetails.completedAt}
+                            eventStatus={eventDetails.status}
+                            programId={programId}
+                            programStage={programStage}
+                            onRequestDelete={() => setDeleteModalOpen(true)}
+                            onClose={() => setActionsOpen(false)}
+                        />
+                    </FlyoutMenu>
+                }
+            />
+
+            {deleteModalOpen && (
+                <DeleteEventModal
+                    eventId={eventId}
+                    eventDetails={eventDetails}
+                    onDeleteEvent={onDeleteEvent}
+                    onRollbackDeleteEvent={onRollbackDeleteEvent}
+                    onClose={() => setDeleteModalOpen(false)}
+                />
+            )}
+        </>
+    );
+};

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();
+        }}
+    />
+);