Pax components and styles

src/components/FlightFlagger/FlightFlagger.stories.tsx

@@ -6,7 +6,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {default as FlightFlaggerComponent} from "./";
 
 const meta: Meta<typeof FlightFlaggerComponent> = {
-    title: "DRT Components/Flight Flagger",
+    title: "DRT Components/Features/Flight Flagger",
     component: FlightFlaggerComponent,
 };
 

src/components/FlightFlagger/FlightFlaggerFilters.stories.tsx

@@ -5,14 +5,14 @@ import {
 } from "./FlightFlaggerFilters";
 
 const meta: Meta<typeof FlightFlaggerFiltersComponent> = {
-  title: "DRT Components/Flight Flagger",
+  title: "DRT Components/Features/Flight Flagger/Filters",
   component: FlightFlaggerFiltersComponent,
 };
 
 export default meta;
 type Story = StoryObj<typeof FlightFlaggerFiltersComponent>;
 
-export const FlightFlaggerFilters: Story = {
+export const Filters: Story = {
   args: {
     nationalities: [
       {name: 'Great Britain', code: 'GBR'},

src/components/FlightFlagger/FlightFlaggerFilters.tsx

@@ -99,7 +99,7 @@ export const FlightFlaggerFilters = ({
   const [currentFormState, setCurrentFormState] = useState<FormState>(initialFormState)
   const [appliedSearchFlags, setAppliedSearchFlags] = useState<FormState>(initialFormState)
 
-  const formIsTouched = (initialForm, currentForm) => {
+  const formIsTouched = (initialForm: FormState, currentForm: FormState) => {
     return currentForm.selectedNationalities.length !== initialForm.selectedNationalities.length ||
       currentForm.selectedAgeGroups.length !== initialForm.selectedAgeGroups.length ||
       currentForm.showTransitPaxNumber != initialForm.showTransitPaxNumber ||

src/components/FlightFlagger/FlightFlaggerHighlightChip.stories.tsx

@@ -3,14 +3,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { FlightHighlightChip as FlightHighlightChipComponent } from './FlightFlaggerHighlightChip';
 
 const meta: Meta<typeof FlightHighlightChipComponent> = {
-  title: "DRT Components/Flight Flagger",
+  title: "DRT Components/Features/Flight Flagger/Highlight Chip",
   component: FlightHighlightChipComponent,
 };
 
 export default meta;
 type Story = StoryObj<typeof FlightHighlightChipComponent>;
 
-export const FlightHighlightChip: Story = {
+export const HighlightChip: Story = {
   args: {
     text: 'Highlighted info',
   },

src/components/FlightFlagger/FlightFlaggerHighlightChip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Chip  } from "@mui/material";
+import { Box, Chip  } from "@mui/material";
 import TungstenIcon from '@mui/icons-material/Tungsten';
 import CustomHighlightIcon from './icon-highlight-pax.svg'
 
@@ -8,7 +8,7 @@ export interface IFlightHighlightChip {
 }
 
 const HighlightIcon = () => {
-  return <CustomHighlightIcon style={{marginLeft: '4px', minWidth: '25px'}} />
+  return <Box sx={{marginLeft: '4px', minWidth: '25px'}} ><CustomHighlightIcon/></Box>
 }
 
 export const FlightHighlightChip = ({text}: IFlightHighlightChip) => {

src/components/FlightFlagger/FlightFlaggerResults.stories.tsx

@@ -4,7 +4,7 @@ import ExampleFlights from "./ExampleFlights";
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FlightFlaggerResultsComponent> = {
-  title: "DRT Components/Flight Flagger",
+  title: "DRT Components/Features/Flight Flagger/Flight Flagger Results",
   component: FlightFlaggerResultsComponent,
 };
 

src/components/FlightFlagger/FlightFlaggerResults.tsx

@@ -21,7 +21,7 @@ export const FlightFlaggerResults = ({flights, showHighlightOnly}: IFlightFlagge
     flights = flights.filter(flight => flight.highlights)
   }
   return isMobile ? 
-    <Box data-testid="flight-flagger-mobile-results" sx={{backgroundColor: '#E6E9F1', p: 2}}>
+    <Box data-testid="flight-flagger-mobile-results" sx={(theme) => ({backgroundColor: theme.palette.secondary.light, p: 2})}>
       {resultCount}
       { flights.map((flight: FlightArrival, index: number) => {
         return <FlightCard key={index} flight={flight} />

src/components/FlightFlagger/FlightFlaggerTable.tsx

@@ -5,6 +5,7 @@ import { FlightHighlightChip } from "./FlightFlaggerHighlightChip";
 import { FlightArrival } from "./FlightArrival";
 import InfoIcon from '@mui/icons-material/Info';
 import { styled } from '@mui/material/styles';
+import InfoTooltip from "../ui/InfoTooltip";
 
 export interface IFlightCard {
   flight: FlightArrival
@@ -48,22 +49,14 @@ export const FlightFlaggerTable = ({flights, ...others}: IFlightFlaggerTable) =>
         <StyledTableHeaderCell align="center">Origin</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">
           Country
-          <StyledTooltip title="Country of origin">
-            <IconButton>
-              <InfoIcon />
-            </IconButton>
-          </StyledTooltip>
+          <InfoTooltip text="Country of origin" />
         </StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Gate/Stand</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Status</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Scheduled</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">
           Expected
-          <StyledTooltip title="Expected arrival">
-            <IconButton>
-              <InfoIcon />
-            </IconButton>
-          </StyledTooltip>
+          <InfoTooltip text="Expected arrival" />
         </StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Exp PCP</StyledTableHeaderCell>
         <StyledTableHeaderCell align="center">Exp PCP Pax</StyledTableHeaderCell>

src/components/Header/Header.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { default as HeaderComponent } from ".";
 
 const meta: Meta<typeof HeaderComponent> = {
-  title: "DRT Components/Header",
+  title: "DRT Components/UI/Header",
   component: HeaderComponent,
 };
 

src/components/Pax/PaxCard/PaxCard.stories.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { PaxCard as PaxCardComponent } from './PaxCard';
+import { PaxTimeRange } from './PaxCard';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Stack } from '@mui/material';
+
+const meta: Meta<typeof PaxCardComponent> = {
+  title: "DRT Components/Features/Pax/PaxCard",
+  component: PaxCardComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof PaxCardComponent>;
+
+var startTime1 = new Date();
+var startTime2 = new Date();
+var startTime3 = new Date();
+var endTime1 = new Date();
+var endTime2 = new Date();
+var endTime3 = new Date();
+
+
+startTime1.setHours(11, 26);
+endTime1.setHours(11, 26);
+
+startTime2.setHours(11, 26);
+endTime2.setHours(11, 31);
+
+startTime3.setHours(11, 31);
+endTime3.setHours(11, 36);
+
+export const PaxCardSingle:Story = {
+  args: {
+    EEA: 77,
+    nonEEA: 128,
+    eGates: 213,
+    timeRange: PaxTimeRange.Next5Mins,
+    startTime: startTime1,
+    endTime: endTime1
+  }
+}
+
+export const PaxCardGroup: Story = {
+  render: () => {
+      return (
+      <Stack 
+        spacing={2} 
+        direction={'row'} 
+        display="inline-flex"
+        sx={(theme) => ({
+          p:2,
+          backgroundColor: theme.palette.secondary.light || theme.palette.grey[200]
+        })}>
+          <PaxCardComponent 
+            EEA={77} 
+            nonEEA={128} 
+            eGates={213} 
+            timeRange={PaxTimeRange.Next5Mins}
+            startTime={startTime1}
+            endTime={endTime1}
+          />
+          <PaxCardComponent 
+            EEA={45} 
+            nonEEA={456} 
+            eGates={987} 
+            timeRange={PaxTimeRange.Next5to10Mins} 
+            startTime={startTime2}
+            endTime={endTime2}
+          />
+          <PaxCardComponent 
+            EEA={431} 
+            nonEEA={12} 
+            eGates={5} 
+            timeRange={PaxTimeRange.Next10to15Mins}
+            startTime={startTime3}
+            endTime={endTime3}
+          />
+      </Stack>
+    )
+  }
+};

src/components/Pax/PaxCard/PaxCard.tsx

@@ -0,0 +1,78 @@
+import { BorderBottom } from '@mui/icons-material';
+import { Paper, styled, Theme, Typography, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import * as React from 'react';
+
+
+export enum PaxTimeRange {
+  Next5Mins = 'Next 5 Mins',
+  Next5to10Mins = 'Next 5 to 10 Mins',
+  Next10to15Mins = 'Next 10 to 15 Mins',
+}
+
+export interface IPaxCard {
+  EEA: number,
+  nonEEA: number,
+  eGates: number,
+  timeRange: PaxTimeRange,
+  startTime: Date,
+  endTime: Date,
+}
+
+const StyledPaxCard = styled(Paper)(({theme} : {theme: Theme}) => ({
+  display: 'inline-block',
+  padding: theme.spacing(2),
+  backgroundColor: theme.palette.grey[100],
+  '.MuiTableCell-root': {
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.common.black,
+    padding: `${theme.spacing(1)} ${theme.spacing(0)}`
+  },
+  '& .MuiTableRow-root :first-child': {
+    paddingRight: theme.spacing(1)
+  },
+  '& .MuiTableCell-head': {
+    borderBottom: `1px solid ${theme.palette.common.black}`,
+  },
+  '& .MuiTableBody-root .MuiTableCell-root': {
+    borderBottom: 'none !important',
+  }
+}));
+
+const formatTime = (datetime:Date) => {
+  return `${datetime.getHours()}:${datetime.getMinutes()}`
+}
+
+export const PaxCard = ({EEA = 0, nonEEA = 0, eGates = 0, timeRange, startTime, endTime}: IPaxCard) => {
+  return (
+    <StyledPaxCard elevation={0}>
+      <Typography variant='h5'>{timeRange}</Typography>
+      <Typography variant='body1'>
+        {`(${formatTime(startTime)} to ${formatTime(endTime)})`}
+      </Typography>
+      <Paper elevation={0} sx={{mt: 1, px: 1}}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Estimated pax:</TableCell>
+              <TableCell align='right'>{ EEA + nonEEA + eGates}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>EEA:</TableCell>
+              <TableCell align='right'>{ EEA }</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Non-EEA:</TableCell>
+              <TableCell align='right'>{ nonEEA }</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>e-gates:</TableCell>
+              <TableCell align='right'>{ eGates }</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Paper>
+    </StyledPaxCard>
+  )
+}

src/components/Pax/PaxCard/index.tsx

@@ -0,0 +1,2 @@
+export { PaxCard } from "./PaxCard";
+export type { IPaxCard, PaxTimeRange } from "./PaxCard";

src/components/Pax/PaxDatasourceIcon/PaxDatasourceIcon.stories.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { PaxDatasource } from './PaxDatasourceIcon';
+import { DatasourceStatus } from '../PaxUtils';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof PaxDatasource> = {
+  title: "DRT Components/Features/Pax/PaxDatasource",
+  component: PaxDatasource,
+};
+
+export default meta;
+type Story = StoryObj<typeof PaxDatasource>;
+
+export const Estimate: Story = {
+  args: {
+    status: DatasourceStatus.Estimate,
+  },
+};
+
+export const PortForecast: Story = {
+  args: {
+    status: DatasourceStatus.PortForecast,
+  },
+};
+
+export const DRTForecast: Story = {
+  args: {
+    status: DatasourceStatus.DRTForecast,
+  },
+};
+
+export const PortLiveData: Story = {
+  args: {
+    status: DatasourceStatus.PortLiveData,
+  },
+};
+
+export const CarrierData: Story = {
+  args: {
+    status: DatasourceStatus.CarrierData,
+  },
+};
+
+export const TerminalAverageData: Story = {
+  args: {
+    status: DatasourceStatus.TerminalAverageData,
+  },
+};
+
+export const PastCarrierData: Story = {
+  args: {
+    status: DatasourceStatus.PastCarrierData,
+  },
+};
+
+export const VerifiedCarrierData: Story = {
+  args: {
+    status: DatasourceStatus.VerifiedCarrierData,
+  },
+};
+