feat: add event rows to Show Page Calendar tab (#4319)

* feat: add event rows to Show Page Calendar tab

Closes #4287

* refactor: use time as events group key instead of ISO string for easier sorting

* feat: implement data model changes

* refactor: improve sorting

packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { startOfMonth } from 'date-fns';
+
+import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
+import { sortCalendarEventsDesc } from '@/activities/calendar/utils/sortCalendarEvents';
+import { mockedCalendarEvents } from '~/testing/mock-data/calendar';
+import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
+import { sortDesc } from '~/utils/sort';
+
+const StyledContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(6)};
+  width: 100%;
+`;
+
+export const Calendar = () => {
+  const sortedCalendarEvents = [...mockedCalendarEvents].sort(
+    sortCalendarEventsDesc,
+  );
+  const calendarEventsByMonthTime = groupArrayItemsBy(
+    sortedCalendarEvents,
+    ({ startsAt }) => startOfMonth(startsAt).getTime(),
+  );
+  const sortedMonthTimes = Object.keys(calendarEventsByMonthTime)
+    .map(Number)
+    .sort(sortDesc);
+
+  return (
+    <StyledContainer>
+      {sortedMonthTimes.map((monthTime) => {
+        const monthCalendarEvents = calendarEventsByMonthTime[monthTime];
+
+        return (
+          !!monthCalendarEvents?.length && (
+            <CalendarMonthCard
+              key={monthTime}
+              calendarEvents={monthCalendarEvents}
+            />
+          )
+        );
+      })}
+    </StyledContainer>
+  );
+};