From db8a6adb05085060f6a29317fef236f08e1ca515 Mon Sep 17 00:00:00 2001
From: Dennis Hadzialic <25294013+D3nnis38@users.noreply.github.com>
Date: Mon, 11 Mar 2024 21:24:55 +0100
Subject: [PATCH] Add new column and types for sessions and os-version

---
 .../DeliveryList/ListContent/ListContent.tsx        | 13 ++++++++-----
 .../components/DeliveryList/ListContent/styled.ts   |  8 +-------
 .../DeliveryList/ListHeader/ListHeader.tsx          |  5 ++++-
 .../Delivery/components/DeliveryList/styled.ts      |  1 -
 .../Delivery/layouts/TableGrid/TableGrid.tsx        |  3 +++
 src/types/event.ts                                  |  4 +++-
 6 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/modules/Delivery/components/DeliveryList/ListContent/ListContent.tsx b/src/modules/Delivery/components/DeliveryList/ListContent/ListContent.tsx
index 986e2e3..9ee3ed5 100644
--- a/src/modules/Delivery/components/DeliveryList/ListContent/ListContent.tsx
+++ b/src/modules/Delivery/components/DeliveryList/ListContent/ListContent.tsx
@@ -31,9 +31,9 @@ export const ListContent: FC<ListContentProps> = ({ events, resetFilters }) => {
       {
       events.map((event) => (
         <Styled.Container key={event.id}>
-          <Styled.DayColumn>
+          <Styled.Column>
             {getWeekday(event.enteredAt)}
-          </Styled.DayColumn>
+          </Styled.Column>
           <Styled.PlaceColumn>
             {event.name}
             <Styled.SmallLabel>{event.address}</Styled.SmallLabel>
@@ -51,7 +51,8 @@ export const ListContent: FC<ListContentProps> = ({ events, resetFilters }) => {
               </Styled.InfoText>
             </Styled.IconInfo>
           </Styled.TypeColumn>
-          <Styled.TimeOutColumn>{getHourAndMin(event.exitedAt)}</Styled.TimeOutColumn>
+          <Styled.Column>{getHourAndMin(event.enteredAt)}</Styled.Column>
+          <Styled.Column>{getHourAndMin(event.exitedAt)}</Styled.Column>
           <Styled.CarrierColumn>
             {event.distributionOrganisation ? event.distributionOrganisation.name : ''}
             {event.distributionOrganisation?.name && (
@@ -80,8 +81,10 @@ export const ListContent: FC<ListContentProps> = ({ events, resetFilters }) => {
               <Styled.InfoText>{event.organisation.mobileNumber}</Styled.InfoText>
             </Styled.InfoBox>
           </Styled.CarrierColumn>
-          <Styled.AreaColumn>{event.area}</Styled.AreaColumn>
-          <Styled.DateColumn>{getYYYYMMDD(event.enteredAt)}</Styled.DateColumn>
+          <Styled.Column>{event.area}</Styled.Column>
+          <Styled.Column>{getYYYYMMDD(event.enteredAt)}</Styled.Column>
+          <Styled.Column>{event.sessionId}</Styled.Column>
+          <Styled.Column>{event.os}</Styled.Column>
         </Styled.Container>
       ))
       }
diff --git a/src/modules/Delivery/components/DeliveryList/ListContent/styled.ts b/src/modules/Delivery/components/DeliveryList/ListContent/styled.ts
index 7ddbf7a..0c80841 100644
--- a/src/modules/Delivery/components/DeliveryList/ListContent/styled.ts
+++ b/src/modules/Delivery/components/DeliveryList/ListContent/styled.ts
@@ -12,7 +12,7 @@ export const SmallLabel = styled.p`
   font-weight: var(--font-weight-400);
 `;
 
-const Column = styled.div`
+export const Column = styled.div`
   display: flex;
   font-size: var(--font-size-body-xs);
   font-weight: var(--font-weight-400);
@@ -20,12 +20,6 @@ const Column = styled.div`
   margin: auto 0;
 `;
 
-export const DayColumn = styled(Column)``;
-export const TimeInColumn = styled(Column)``;
-export const TimeOutColumn = styled(Column)``;
-export const AreaColumn = styled(Column)``;
-export const DateColumn = styled(Column)``;
-
 export const PlaceColumn = styled(Column)`
   flex-direction: column;
 `;
diff --git a/src/modules/Delivery/components/DeliveryList/ListHeader/ListHeader.tsx b/src/modules/Delivery/components/DeliveryList/ListHeader/ListHeader.tsx
index 6de4e5a..2b11224 100644
--- a/src/modules/Delivery/components/DeliveryList/ListHeader/ListHeader.tsx
+++ b/src/modules/Delivery/components/DeliveryList/ListHeader/ListHeader.tsx
@@ -5,10 +5,13 @@ export const ListHeader = () => (
     <Styled.Label>Dag</Styled.Label>
     <Styled.Label>Plats</Styled.Label>
     <Styled.Label>Typ</Styled.Label>
-    <Styled.Label>Tid</Styled.Label>
+    <Styled.Label>Tid in</Styled.Label>
+    <Styled.Label>Tid ut</Styled.Label>
     <Styled.Label>Leverantör</Styled.Label>
     <Styled.Label>Transportör</Styled.Label>
     <Styled.Label>Område</Styled.Label>
     <Styled.Label>Datum</Styled.Label>
+    <Styled.Label>Session</Styled.Label>
+    <Styled.Label>Plattform/OS-version</Styled.Label>
   </Styled.Container>
 );
diff --git a/src/modules/Delivery/components/DeliveryList/styled.ts b/src/modules/Delivery/components/DeliveryList/styled.ts
index 868771d..15c82e3 100644
--- a/src/modules/Delivery/components/DeliveryList/styled.ts
+++ b/src/modules/Delivery/components/DeliveryList/styled.ts
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100%;
-  max-width: 1300px;
 `;
 
 export const ErrorContainer = styled.div`
diff --git a/src/modules/Delivery/layouts/TableGrid/TableGrid.tsx b/src/modules/Delivery/layouts/TableGrid/TableGrid.tsx
index 15bf96d..1aa90e0 100644
--- a/src/modules/Delivery/layouts/TableGrid/TableGrid.tsx
+++ b/src/modules/Delivery/layouts/TableGrid/TableGrid.tsx
@@ -8,6 +8,9 @@ export const tableGrid = css`
     minmax(180px, 1fr) 
     minmax(60px, 1fr) 
     minmax(80px, 1fr) 
+    minmax(80px, 1fr) 
+    minmax(120px, 1fr)
+    minmax(120px, 1fr)
     minmax(120px, 1fr)
     minmax(120px, 1fr)
     minmax(120px, 1fr)
diff --git a/src/types/event.ts b/src/types/event.ts
index 32b9871..8ba7d07 100644
--- a/src/types/event.ts
+++ b/src/types/event.ts
@@ -2,8 +2,10 @@ import { ZoneType } from './zone';
 import { Organisation } from './organisation';
 
 export type Event = {
-  trackingId: string;
   id: string;
+  sessionId: string;
+  deviceId: string | null;
+  os: string | null;
   organisation: Organisation;
   distributionOrganisation: Organisation | null;
   zoneType: ZoneType;