Staging

package.json

@@ -36,8 +36,11 @@
     ]
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@googlemaps/js-api-loader": "^1.15.1",
     "@googlemaps/markerclusterer": "^2.0.15",
+    "@mui/icons-material": "^5.15.13",
     "@react-google-maps/api": "^2.19.2",
     "@turf/boolean-point-in-polygon": "^6.5.0",
     "@turf/center-of-mass": "^6.5.0",
@@ -88,4 +91,4 @@
     "typescript": "^5.0.2",
     "vite": "^4.3.0"
   }
-}
+}

src/api/event/event.ts

@@ -2,3 +2,10 @@ import { Event } from 'types/event';
 import { client } from '../baseAxios';
 
 export const getEvents = (filter?: string) => client.get<Event[]>(`/zones/events${filter !== '' ? `?${filter}` : ''}`);
+export const getGroupedEvents = (filter?: string) => client.get<Event[][]>(`/zones/events/grouped${filter !== '' ? `?${filter}` : ''}`);
+export const exportEvents = (filter?: string) => client.get<Blob>(
+  `/zones/events/export${filter !== '' ? `?${filter}` : ''}`,
+  {
+    responseType: 'blob',
+  },
+);

src/components/Menu/Menu.tsx

@@ -32,12 +32,13 @@ export const Menu = () => {
       <Styled.MenuList>
         <Styled.SectionOne>
           <Styled.BoldText onClick={() => {
-            navigate('/');
+            navigate('/events');
             setIsOpen(false);
           }}
           >
-            Lista
+            Leveranser
           </Styled.BoldText>
+          <Styled.BoldText onClick={() => navigate('/events/grouped')}>Turer</Styled.BoldText>
           <Styled.BoldText onClick={() => navigate('/map')}>Karta</Styled.BoldText>
         </Styled.SectionOne>
         <Styled.SectionTwo>

src/hooks/useEventApi.ts

@@ -1,9 +1,13 @@
-import { getEvents } from 'api/event';
+import { getEvents, exportEvents, getGroupedEvents } from 'api/event';
 
 export const useEventApi = () => {
   const getAllEvents = (filter?: string) => getEvents(filter);
+  const exportAllEvents = (filter?: string) => exportEvents(filter);
+  const getAllGroupedEvents = (filter?: string) => getGroupedEvents(filter);
 
   return {
     getAllEvents,
+    exportAllEvents,
+    getAllGroupedEvents,
   };
 };

src/modules/Delivery/Delivery.tsx

@@ -1,13 +1,17 @@
 import { useAuth } from 'hooks/useAuth';
-import { useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { DeliveryLayout } from 'layouts/DeliveryLayout';
 import { useNavigate } from 'react-router-dom';
 import MapIcon from 'assets/map_icon.svg';
 import { Button } from 'components/Button';
 import * as Styled from './styled';
 import { DeliveryList } from './components';
 
-export const Delivery = () => {
+type Props = {
+  grouped?: boolean;
+};
+
+export const Delivery: FC<Props> = ({ grouped }) => {
   const { hasToken } = useAuth();
   const isAuthenticated = hasToken();
   const navigate = useNavigate();
@@ -28,8 +32,8 @@ export const Delivery = () => {
   return (
     <DeliveryLayout>
       <Styled.Container>
-        <Styled.Heading>Leveranser</Styled.Heading>
-        <DeliveryList />
+        <Styled.Heading>{grouped ? 'Turer' : 'Leveranser'}</Styled.Heading>
+        <DeliveryList grouped={grouped} />
       </Styled.Container>
       <Styled.ButtonContainer>
         <Button type="button" primary onClick={navigateToMap}>
@@ -42,3 +46,7 @@ export const Delivery = () => {
     </DeliveryLayout>
   );
 };
+
+Delivery.defaultProps = {
+  grouped: false,
+};

src/modules/Delivery/components/DeliveryList/DeliveryList.tsx

@@ -1,19 +1,27 @@
 import { useGetEventFilters, useGetEvents } from 'modules/Delivery/hooks';
 import { Button, Loading } from 'components';
-import { FilterList } from './FilterList';
-import { ListContent } from './ListContent';
-import { ListHeader } from './ListHeader';
+import { FC } from 'react';
+import { FilterList, ListContent, ListHeader } from './components';
 import * as Styled from './styled';
 
-export const DeliveryList = () => {
+type Props = {
+  grouped?: boolean;
+};
+
+export const DeliveryList: FC<Props> = ({ grouped }) => {
   const {
-    fetchEvents, events, error, isLoading,
+    fetchEvents, exportEvents, fetchGroupedEvents,
+    events, error, isLoading, groupedEvents,
   } = useGetEvents();
   const {
     filters, checkFilter, resetFilters, triggerReload, filterOptions,
-    activeFilters,
+    activeFilters, exportEventsToExcel,
     setDateTimeFilter,
-  } = useGetEventFilters({ fetchEvents });
+  } = useGetEventFilters({
+    fetchEvents: grouped ? fetchGroupedEvents : fetchEvents,
+    exportEvents,
+    grouped: !!grouped,
+  });
 
   if (isLoading) {
     return (
@@ -46,9 +54,15 @@ export const DeliveryList = () => {
         triggerReload={triggerReload}
         filterOptions={filterOptions}
         setDateTimeFilter={setDateTimeFilter}
+        exportEventsToExcel={exportEventsToExcel}
+        showExportButton={!grouped}
       />
       <ListHeader />
-      <ListContent events={events} resetFilters={resetFilters} />
+      <ListContent events={events} groupedEvents={groupedEvents} resetFilters={resetFilters} />
     </Styled.Container>
   );
 };
+
+DeliveryList.defaultProps = {
+  grouped: false,
+};