diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx
index cb19ed636c7..2b531fb558c 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.spec.tsx
@@ -1,4 +1,6 @@
import { type OrganizationApiToken } from 'qovery-typescript-axios'
+import { useState } from 'react'
+import { dateUTCString } from '@qovery/shared/util-dates'
import { renderWithProviders, screen } from '@qovery/shared/util-tests'
import * as useApiTokensModule from '../hooks/use-api-tokens/use-api-tokens'
import * as useDeleteApiTokenModule from '../hooks/use-delete-api-token/use-delete-api-token'
@@ -37,6 +39,51 @@ describe('SettingsApiToken', () => {
})
})
+ afterEach(() => {
+ jest.useRealTimers()
+ })
+
+ it('should show last usage next to creation, relative to when the list loaded', async () => {
+ jest.useFakeTimers().setSystemTime(new Date('2026-10-13T12:00:00Z'))
+ const lastUsedAt = '2026-10-13T10:00:00Z'
+ useApiTokensMockSpy.mockReturnValue({
+ data: [{ id: 'token-1', name: 'My token', created_at: '2024-01-01T00:00:00Z', last_used_at: lastUsedAt }],
+ })
+
+ function TestPage() {
+ const [renderCount, setRenderCount] = useState(0)
+ return (
+ <>
+
+
+
+ )
+ }
+
+ const { userEvent } = renderWithProviders(
)
+
+ const lastUsed = screen.getByText('Last used 2 hours ago')
+ expect(lastUsed).toHaveAttribute('title', dateUTCString(lastUsedAt))
+ expect(lastUsed.previousElementSibling).toHaveTextContent('Created since')
+
+ jest.setSystemTime(new Date('2026-10-13T13:00:00Z'))
+ await userEvent.click(screen.getByRole('button', { name: 'Render 0' }))
+
+ expect(screen.getByRole('button', { name: 'Render 1' })).toBeInTheDocument()
+ expect(screen.getByText('Last used 2 hours ago')).toBeInTheDocument()
+ })
+
+ it.each([null, undefined])('should hide last usage when the timestamp is %s', (lastUsedAt) => {
+ useApiTokensMockSpy.mockReturnValue({
+ data: [{ id: 'token-1', name: 'My token', last_used_at: lastUsedAt }],
+ })
+
+ renderWithProviders(
)
+
+ expect(screen.getByTestId('token-list-token-1')).toBeInTheDocument()
+ expect(screen.queryByText(/Last used/)).not.toBeInTheDocument()
+ })
+
it('should render empty state', () => {
useApiTokensMockSpy.mockReturnValue({ data: [] })
diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
index c794dc8bcc6..ef5d0cd1694 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
@@ -1,6 +1,7 @@
import { useParams } from '@tanstack/react-router'
+import { formatDistanceStrict } from 'date-fns'
import { type OrganizationApiToken } from 'qovery-typescript-axios'
-import { Suspense } from 'react'
+import { Suspense, useState } from 'react'
import { SettingsHeading } from '@qovery/shared/console-shared'
import { useModal, useModalConfirmation } from '@qovery/shared/ui'
import { BlockContent, Button, Icon, Section, Skeleton, Tooltip, Truncate } from '@qovery/shared/ui'
@@ -18,13 +19,14 @@ interface PageOrganizationApiProps {
function PageOrganizationApi(props: PageOrganizationApiProps) {
const { apiTokens, onDelete } = props
+ const [loadedAt] = useState(() => new Date())
return (
{apiTokens.length > 0 ? (
- {apiTokens.map((token: OrganizationApiToken) => (
+ {apiTokens.map((token) => (
-
Role: {upperCaseFirstLetter(token.role_name)}
{token.created_at && (
-
+
Created since {dateMediumLocalFormat(token.created_at)}
)}
+ {token.last_used_at && (
+
+ Last used {formatDistanceStrict(new Date(token.last_used_at), loadedAt, { addSuffix: true })}
+
+ )}