diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetails.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetails.tsx
similarity index 100%
rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetails.tsx
rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetails.tsx
diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx
similarity index 100%
rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx
rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx
diff --git a/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsLastEvent.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsLastEvent.tsx
new file mode 100644
index 0000000000..18ec71489f
--- /dev/null
+++ b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsLastEvent.tsx
@@ -0,0 +1,74 @@
+import type { AddonSchema } from 'openapi';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
+import { useIntegrationEvents } from 'hooks/api/getters/useIntegrationEvents/useIntegrationEvents';
+import { IntegrationEventsDetails } from './IntegrationEventsDetails/IntegrationEventsDetails';
+import { Box, type BoxProps, styled } from '@mui/material';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatDateYMDHMS } from 'utils/formatDate';
+import { IntegrationEventsStateIcon } from './IntegrationEventsStateIcon';
+
+const StyledTooltipLink = styled(TooltipLink)({
+ display: 'flex',
+ alignItems: 'center',
+});
+
+const StyledTitle = styled('div')(({ theme }) => ({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ margin: theme.spacing(0, 2),
+ marginTop: theme.spacing(2),
+}));
+
+const StyledLastEventSpan = styled('span')(({ theme }) => ({
+ fontSize: theme.fontSizes.bodySize,
+}));
+
+interface IIntegrationEventsLastEventProps extends BoxProps {
+ integration?: AddonSchema;
+}
+
+export const IntegrationEventsLastEvent = ({
+ integration,
+ ...props
+}: IIntegrationEventsLastEventProps) => {
+ const { integrationEvents } = useIntegrationEvents(integration?.id, 1, {
+ refreshInterval: 5000,
+ });
+ const { locationSettings } = useLocationSettings();
+
+ if (integrationEvents.length === 0) {
+ return null;
+ }
+
+ const integrationEvent = integrationEvents[0];
+
+ return (
+ e.preventDefault()} {...props}>
+
+
+
+ Last event
+
+
+ {formatDateYMDHMS(
+ integrationEvent.createdAt,
+ locationSettings?.locale,
+ )}
+
+
+
+ >
+ }
+ >
+
+
+
+ );
+};
diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsModal.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsModal.tsx
similarity index 100%
rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsModal.tsx
rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsModal.tsx
diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsStateIcon.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsStateIcon.tsx
similarity index 100%
rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsStateIcon.tsx
rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsStateIcon.tsx
diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
index 70824db941..bdae52fb65 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
+++ b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
@@ -53,7 +53,7 @@ import { IntegrationStateSwitch } from './IntegrationStateSwitch/IntegrationStat
import { capitalizeFirst } from 'utils/capitalizeFirst';
import { IntegrationHowToSection } from '../IntegrationHowToSection/IntegrationHowToSection';
import { useUiFlag } from 'hooks/useUiFlag';
-import { IntegrationEventsModal } from '../IntegrationEventsModal/IntegrationEventsModal';
+import { IntegrationEventsModal } from '../IntegrationEvents/IntegrationEventsModal';
import AccessContext from 'contexts/AccessContext';
const StyledHeader = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
index 4c2a665c79..b98349a7a5 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
@@ -9,6 +9,7 @@ import { IntegrationCardMenu } from './IntegrationCardMenu/IntegrationCardMenu';
import type { AddonSchema } from 'openapi';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { IntegrationEventsLastEvent } from 'component/integrations/IntegrationEvents/IntegrationEventsLastEvent';
type CardVariant = 'default' | 'stacked';
@@ -177,6 +178,10 @@ export const IntegrationCard: VFC = ({
show={}
elseShow={}
/>
+
);
diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx
index 7ea48e387b..6cdcecc1a0 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx
@@ -29,7 +29,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import { useUiFlag } from 'hooks/useUiFlag';
import Visibility from '@mui/icons-material/Visibility';
import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
-import { IntegrationEventsModal } from 'component/integrations/IntegrationEventsModal/IntegrationEventsModal';
+import { IntegrationEventsModal } from 'component/integrations/IntegrationEvents/IntegrationEventsModal';
interface IIntegrationCardMenuProps {
addon: AddonSchema;