From bd82ef0b4a035399fd97de4a5d25ca85ca30dc1b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 8 Oct 2024 14:09:38 +0200
Subject: [PATCH] fix: add events to UI

---
 .../personalDashboard/LatestProjectEvents.tsx | 29 ++++++++++++++++---
 ...ardProjectDetailsSchemaLatestEventsItem.ts |  1 +
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
index 9b823b0ea09b..773dbed99ef9 100644
--- a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
+++ b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
@@ -3,6 +3,8 @@ import { Markdown } from '../common/Markdown/Markdown';
 import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
 import { UserAvatar } from '../common/UserAvatar/UserAvatar';
 import { Typography, styled } from '@mui/material';
+import { formatDateYMDHM } from 'utils/formatDate';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 const Events = styled('ul')(({ theme }) => ({
     padding: 0,
@@ -16,6 +18,10 @@ const Event = styled('li')(({ theme }) => ({
     gap: theme.spacing(2),
     alignItems: 'center',
     marginBottom: theme.spacing(4),
+
+    '*': {
+        fontWeight: 'normal',
+    },
 }));
 
 const TitleContainer = styled('div')(({ theme }) => ({
@@ -32,9 +38,16 @@ const ActionBox = styled('article')(({ theme }) => ({
     flexDirection: 'column',
 }));
 
+const Timestamp = styled('time')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.fontSize,
+    marginBottom: theme.spacing(1),
+}));
+
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
+    const { locationSettings } = useLocationSettings();
     return (
         <ActionBox>
             <TitleContainer>
@@ -55,10 +68,18 @@ export const LatestProjectEvents: FC<{
                                 src={event.createdByImageUrl}
                                 sx={{ mt: 1 }}
                             />
-                            <Markdown>
-                                {event.summary ||
-                                    'No preview available for this event'}
-                            </Markdown>
+                            <div>
+                                <Timestamp dateTime={event.createdAt}>
+                                    {formatDateYMDHM(
+                                        event.createdAt,
+                                        locationSettings.locale,
+                                    )}
+                                </Timestamp>
+                                <Markdown>
+                                    {event.summary ||
+                                        'No preview available for this event'}
+                                </Markdown>
+                            </div>
                         </Event>
                     );
                 })}
diff --git a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
index 5de24466500d..2341bdaf3b00 100644
--- a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
+++ b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
@@ -22,4 +22,5 @@ export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
      * @nullable
      */
     summary: string | null;
+    createdAt: string;
 };