gistfile1.diff

diff --git a/apps/parking-web/src/sections/events/EventDetails/index.tsx b/apps/parking-web/src/sections/events/EventDetails/index.tsx
index 055f224a..73fdbd2a 100644
--- a/apps/parking-web/src/sections/events/EventDetails/index.tsx
+++ b/apps/parking-web/src/sections/events/EventDetails/index.tsx
@@ -2,8 +2,8 @@ import { DateTime } from 'luxon';
 import styled from '@emotion/styled';
 import { useQuery } from '@apollo/client';
 import React, { useRef, useMemo, useState, useEffect } from 'react';
+import { ChipComponent, DriverSessionView, CameraEventCarousel } from 'shared';
 import { formatContainerNumberForDisplay } from 'shared/src/utils/containerDisplay';
-import { ChipComponent, DriverSessionView, CameraEventsSummary, CameraEventCarousel } from 'shared';
 
 import {
   Box,
@@ -69,9 +69,6 @@ const query = gql(`
           state
           hasCameraTech
         }
-        cameraEventsSummary {
-          ...cameraEventsSummary
-        }
         timeline {
           timelineEvents {
             id
@@ -151,9 +148,6 @@ const EventDetails = ({ eventId, onClose }: Props) => {
   const data = response?.viewer?.gateEvent;
   const { t } = useTranslate();
   const smUp = useResponsive('up', 'sm');
-  const [cameraContainerMaxHeight, setCameraContainerMaxHeight] = useState<string | number>(
-    '100vh'
-  );
 
   const [activeTab, setActiveTab] = useState(0);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -171,7 +165,6 @@ const EventDetails = ({ eventId, onClose }: Props) => {
       const ref1Height = ref1.current?.offsetHeight || 0;
       const ref2Height = ref2.current?.offsetHeight || 0;
       const combinedHeight = ref1Height + ref2Height + 250;
-      setCameraContainerMaxHeight(`calc(100vh - ${combinedHeight}px)`);
       console.log(`ref1: ${ref1Height} ref2: ${ref2Height} combined: ${combinedHeight}`);
     };
     calculateMaxHeight();
@@ -235,54 +228,6 @@ const EventDetails = ({ eventId, onClose }: Props) => {
     return result;
   }, [data, t, loading]);
 
-  const cameraEventsSummary = useMemo(() => {
-    if (!data) {
-      return null;
-    }
-    if (!data.cameraEventsSummary) {
-      return (
-        <Box display="flex" justifyContent="center" m={smUp ? 5 : 1}>
-          {data.yard.hasCameraTech ? (
-            <Typography>{t('noCameraEvents')}</Typography>
-          ) : (
-            <Box
-              display="flex"
-              flexDirection="column"
-              alignItems="center"
-              justifyContent="center"
-              sx={{ height: '50vh' }}
-            >
-              <Iconify
-                icon="mdi:image-off-outline"
-                sx={{
-                  width: 150,
-                  height: 150,
-                  mb: 2,
-                }}
-              />
-              <Typography sx={{ textAlign: 'center', color: 'text.secondary' }} variant="h6">
-                {t('noImagesForEvent')}
-              </Typography>
-            </Box>
-          )}
-        </Box>
-      );
-    }
-    return (
-      <CameraEventsSummary
-        accessCodeTime={data.timestamp}
-        disableScrollToAccessCodeEvent
-        sx={{ m: 0, pt: smUp ? 4 : 2, pb: 0 }}
-        hostApi={HOST_API!}
-        hideVideo
-        cameraEventsSummary={data.cameraEventsSummary}
-        cameraEventsContainerSx={{ maxHeight: cameraContainerMaxHeight }}
-        zoomHint={t('zoomPanInstructions')}
-        hideHeader
-      />
-    );
-  }, [data, smUp, cameraContainerMaxHeight, t]);
-
   const hasDriverSessions = !!data?.relatedAccessControlEvent?.driverSessions?.length;
 
   return (
@@ -308,7 +253,6 @@ const EventDetails = ({ eventId, onClose }: Props) => {
       <Box sx={{ borderBottom: 1, borderColor: 'divider', mt: 2 }}>
         <Tabs value={activeTab} onChange={handleTabChange} aria-label="event details tabs">
           <Tab label="Image Carousel" />
-          <Tab label="Legacy Timeline" />
           {hasDriverSessions ? <Tab label="Driver Session" /> : null}
         </Tabs>
       </Box>
@@ -345,9 +289,6 @@ const EventDetails = ({ eventId, onClose }: Props) => {
               </Box>
             )}
           </TabPanel>
-          <TabPanel value={activeTab} index={1}>
-            {cameraEventsSummary}
-          </TabPanel>
           {hasDriverSessions ? (
             <TabPanel value={activeTab} index={2}>
               <DriverSessionView