From 1019317bda398e4811d3d43bc39b607ed94dc64c Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Tue, 27 Aug 2024 14:21:59 +0100
Subject: [PATCH 01/43] Adding add min staff alert

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffWarning.tsx | 26 ++++++++++++++++++++++++
 src/components/Staff/Staff.stories.tsx   | 18 ++++++++++++++++
 src/components/Staff/index.ts            |  2 ++
 src/components/index.ts                  |  3 +++
 4 files changed, 49 insertions(+)
 create mode 100644 src/components/Staff/MinStaffWarning.tsx
 create mode 100644 src/components/Staff/Staff.stories.tsx
 create mode 100644 src/components/Staff/index.ts

diff --git a/src/components/Staff/MinStaffWarning.tsx b/src/components/Staff/MinStaffWarning.tsx
new file mode 100644
index 0000000..13f4144
--- /dev/null
+++ b/src/components/Staff/MinStaffWarning.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import {Alert, Box, Button} from "@mui/material";
+
+export interface IMinStaffWarning {
+  message1: string,
+  message2: string,
+  minStaff?: number,
+  handleClick: () => void,
+}
+
+export const MinStaffWarning = ({message1, message2, minStaff, handleClick}: IMinStaffWarning) => {
+  return <Alert sx={{color: '#873200', border: '1px solid #873200'}} severity="warning">
+    <Box><strong>{message1} {minStaff}</strong></Box>
+    <Box sx={{paddingTop: '10px'}}>{message2}</Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Button
+        data-testid="mobile-add-min-staff"
+        variant="outlined"
+        id="add-min-staff"
+        onClick={handleClick}
+        sx={{marginLeft: 'auto', backgroundColor: '#334F96', color: '#fff', textTransform: 'none'}}
+      >+ Add minimum staff</Button>
+    </Box>
+  </Alert>
+}
diff --git a/src/components/Staff/Staff.stories.tsx b/src/components/Staff/Staff.stories.tsx
new file mode 100644
index 0000000..f2c024b
--- /dev/null
+++ b/src/components/Staff/Staff.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MinStaffWarning as MinStaffWarningComponent } from "./MinStaffWarning";
+
+export const meta: Meta<typeof MinStaffWarningComponent> = {
+  title: "DRT Components/MinStaffWarningComponent",
+  component: MinStaffWarningComponent,
+};
+
+type Story = StoryObj<typeof MinStaffWarningComponent>;
+
+export const MinStaffWarning: Story = {
+  args: {
+    message1: "Your minimum staff cover in DRT is",
+    message2: "You can now more accurately reflect your minimum staff cover in DRT",
+    minStaff: 1,
+    handleClick: () => {console.log("Add min staff clicked")}
+  }
+};
diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
new file mode 100644
index 0000000..109aaca
--- /dev/null
+++ b/src/components/Staff/index.ts
@@ -0,0 +1,2 @@
+export {MinStaffWarning} from './MinStaffWarning'
+export type {IMinStaffWarning} from './MinStaffWarning'
diff --git a/src/components/index.ts b/src/components/index.ts
index 3f2e5e4..f815d1d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,3 +8,6 @@ export type { IStatusTag } from "./StatusTags";
 
 export {default as Header} from './Header'
 export type { IHeader, MenuItem} from './Header';
+
+export { MinStaffWarning } from './Staff'
+export type {IMinStaffWarning} from './Staff'

From d9e7ddc346f37addc7809b21d215da9b3e4f3220 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Tue, 27 Aug 2024 15:44:42 +0100
Subject: [PATCH 02/43] remove strong

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffWarning.tsx | 2 +-
 src/components/Staff/Staff.stories.tsx   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Staff/MinStaffWarning.tsx b/src/components/Staff/MinStaffWarning.tsx
index 13f4144..63cfc77 100644
--- a/src/components/Staff/MinStaffWarning.tsx
+++ b/src/components/Staff/MinStaffWarning.tsx
@@ -11,7 +11,7 @@ export interface IMinStaffWarning {
 
 export const MinStaffWarning = ({message1, message2, minStaff, handleClick}: IMinStaffWarning) => {
   return <Alert sx={{color: '#873200', border: '1px solid #873200'}} severity="warning">
-    <Box><strong>{message1} {minStaff}</strong></Box>
+    <Box sx={{fontWeight: 'bold'}}>{message1} {minStaff}</Box>
     <Box sx={{paddingTop: '10px'}}>{message2}</Box>
     <Box sx={{paddingTop: '10px'}}>
       <Button
diff --git a/src/components/Staff/Staff.stories.tsx b/src/components/Staff/Staff.stories.tsx
index f2c024b..48d0bea 100644
--- a/src/components/Staff/Staff.stories.tsx
+++ b/src/components/Staff/Staff.stories.tsx
@@ -1,11 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MinStaffWarning as MinStaffWarningComponent } from "./MinStaffWarning";
 
-export const meta: Meta<typeof MinStaffWarningComponent> = {
+const meta: Meta<typeof MinStaffWarningComponent> = {
   title: "DRT Components/MinStaffWarningComponent",
   component: MinStaffWarningComponent,
 };
 
+export default meta;
 type Story = StoryObj<typeof MinStaffWarningComponent>;
 
 export const MinStaffWarning: Story = {

From 2ea7c920fb23f11e7704a2ac245b2df06a1999c8 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Wed, 28 Aug 2024 12:54:34 +0100
Subject: [PATCH 03/43] adding form to update min staff number

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx      | 67 ++++++++++++++++++++++
 src/components/Staff/MinStaffWarning.tsx   |  2 +-
 src/components/Staff/StaffForm.stories.tsx | 26 +++++++++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Staff/MinStaffForm.tsx
 create mode 100644 src/components/Staff/StaffForm.stories.tsx

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
new file mode 100644
index 0000000..c0a814d
--- /dev/null
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -0,0 +1,67 @@
+import React, {useState} from "react";
+import {Alert, Box, Button, OutlinedInput} from "@mui/material";
+
+export interface IMinStaffForm {
+  port: string
+  terminal: string
+  minStaffNumber: number | null
+  handleSubmit: (minStaff: number | null) => boolean
+}
+
+export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit}: IMinStaffForm) => {
+  const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
+  const [error, setError] = useState(false);
+  const [updated, setUpdated] = useState(false);
+  const [submitError, setSubmitError] = useState(false);
+
+  const handleFormSubmit = (event: React.ChangeEvent, minStaff: number | null) => {
+    try {
+      const submitted = handleSubmit(minStaff);
+      setUpdated(submitted);
+      setSubmitError(false);
+    } catch (error) {
+      console.error(error);
+      setSubmitError(true);
+    }
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStaffNumber(null);
+    const value = event.target.value;
+
+    if (!isNaN(Number(value)) && value.trim() !== "") {
+      setStaffNumber(Number(value));
+      setError(false);
+    } else {
+      setError(true);
+    }
+  }
+
+  {
+    if (updated) {
+      return <Alert severity="info">You updated the minimum staff number</Alert>
+    } else
+    return <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+      {error && (
+        <Alert severity="error">Enter number only</Alert>
+      )}
+      {submitError && (
+        <Alert severity="error">An error occurred while submitting the form</Alert> // Add this line
+      )}
+      <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
+      <h2>Updating minimum staff number at PCP</h2>
+      <Box sx={{paddingTop: '10px'}}>This number will applied to all future dates. It will overwrite staff numbers that
+        are below this number.</Box>
+      <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <OutlinedInput placeholder="minimum number staff*" onChange={handleInputChange}/>
+      </Box>
+      <Button sx={{
+        marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
+        '&:hover': {backgroundColor: '#334F96'}
+      }} onClick={e => handleFormSubmit(e, staffNumber)}>
+        Continue
+      </Button>
+    </Box>
+  }
+}
diff --git a/src/components/Staff/MinStaffWarning.tsx b/src/components/Staff/MinStaffWarning.tsx
index 63cfc77..024e0b8 100644
--- a/src/components/Staff/MinStaffWarning.tsx
+++ b/src/components/Staff/MinStaffWarning.tsx
@@ -19,7 +19,7 @@ export const MinStaffWarning = ({message1, message2, minStaff, handleClick}: IMi
         variant="outlined"
         id="add-min-staff"
         onClick={handleClick}
-        sx={{marginLeft: 'auto', backgroundColor: '#334F96', color: '#fff', textTransform: 'none'}}
+        sx={{marginLeft: 'auto', backgroundColor: '#334F96', color: '#fff', textTransform: 'none','&:hover': {backgroundColor: '#334F96'}}}
       >+ Add minimum staff</Button>
     </Box>
   </Alert>
diff --git a/src/components/Staff/StaffForm.stories.tsx b/src/components/Staff/StaffForm.stories.tsx
new file mode 100644
index 0000000..2e08704
--- /dev/null
+++ b/src/components/Staff/StaffForm.stories.tsx
@@ -0,0 +1,26 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {MinStaffForm as MinStaffFormComponent} from "./MinStaffForm";
+import React from "react";
+
+const meta: Meta<typeof MinStaffFormComponent> = {
+  title: "DRT Components/MinStaffFormComponent",
+  component: MinStaffFormComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MinStaffFormComponent>;
+
+export const MinStaffForm: Story = {
+  args: {
+    port: "Birmingham (BHX)",
+    terminal: "Terminal 1",
+    minStaffNumber: null,
+    handleSubmit: (minStaff: number) => {
+      console.log(minStaff)
+      if (minStaff === null || minStaff === undefined) {
+        return false;
+      }
+      return true;
+    },
+  }
+};

From 2c176c726f3fe8d3113d11cd4b30d5312e53c992 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Wed, 28 Aug 2024 13:10:03 +0100
Subject: [PATCH 04/43] Adding min staff form for export

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/index.ts |  3 +++
 src/components/index.ts       | 16 ++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
index 109aaca..1eacd3a 100644
--- a/src/components/Staff/index.ts
+++ b/src/components/Staff/index.ts
@@ -1,2 +1,5 @@
 export {MinStaffWarning} from './MinStaffWarning'
+export {MinStaffForm} from './MinStaffForm'
 export type {IMinStaffWarning} from './MinStaffWarning'
+export type {IMinStaffForm} from './MinStaffForm'
+
diff --git a/src/components/index.ts b/src/components/index.ts
index f815d1d..61667bd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,13 +1,13 @@
-export { default as FlightFlagger } from "./FlightFlagger";
+export {default as FlightFlagger} from "./FlightFlagger";
 
-export { FlightFlaggerFilters, FlightHighlightChip } from "./FlightFlagger";
-export type { IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip, AutocompleteOption } from "./FlightFlagger";
+export {FlightFlaggerFilters, FlightHighlightChip} from "./FlightFlagger";
+export type {IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip, AutocompleteOption} from "./FlightFlagger";
 
-export { StatusTag } from "./StatusTags";
-export type { IStatusTag } from "./StatusTags";
+export {StatusTag} from "./StatusTags";
+export type {IStatusTag} from "./StatusTags";
 
 export {default as Header} from './Header'
-export type { IHeader, MenuItem} from './Header';
+export type {IHeader, MenuItem} from './Header';
 
-export { MinStaffWarning } from './Staff'
-export type {IMinStaffWarning} from './Staff'
+export {MinStaffWarning, MinStaffForm} from './Staff'
+export type {IMinStaffWarning, IMinStaffForm} from './Staff'

From 23c49bb1c9e4e5b5c719f1a4ec168d5993cb9369 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 29 Aug 2024 23:33:11 +0100
Subject: [PATCH 05/43] adding continueCallback for update

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx      | 54 +++++++++++++---------
 src/components/Staff/StaffForm.stories.tsx |  4 +-
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index c0a814d..fcd1b87 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -6,9 +6,10 @@ export interface IMinStaffForm {
   terminal: string
   minStaffNumber: number | null
   handleSubmit: (minStaff: number | null) => boolean
+  continueCallback: () => void
 }
 
-export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit}: IMinStaffForm) => {
+export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, continueCallback}: IMinStaffForm) => {
   const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
   const [error, setError] = useState(false);
   const [updated, setUpdated] = useState(false);
@@ -39,29 +40,36 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit}: IMi
 
   {
     if (updated) {
-      return <Alert severity="info">You updated the minimum staff number</Alert>
+      return <Box sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
+        <Alert sx={{paddingTop: '10px'}} severity="info">You updated the minimum staff number</Alert>
+          <Button sx={{marginTop: '10px', marginLeft: '50px', marginBottom: '10px',  backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
+          '&:hover': {backgroundColor: '#334F96'}, }} onClick={continueCallback}>
+          Continue
+        </Button>
+      </Box>
     } else
-    return <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-      {error && (
-        <Alert severity="error">Enter number only</Alert>
-      )}
-      {submitError && (
-        <Alert severity="error">An error occurred while submitting the form</Alert> // Add this line
-      )}
-      <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
-      <h2>Updating minimum staff number at PCP</h2>
-      <Box sx={{paddingTop: '10px'}}>This number will applied to all future dates. It will overwrite staff numbers that
-        are below this number.</Box>
-      <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
-      <Box sx={{paddingTop: '10px'}}>
-        <OutlinedInput placeholder="minimum number staff*" onChange={handleInputChange}/>
+      return <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+        {error && (
+          <Alert severity="error">Enter number only</Alert>
+        )}
+        {submitError && (
+          <Alert severity="error">An error occurred while submitting the form</Alert> // Add this line
+        )}
+        <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
+        <h2>Updating minimum staff number at PCP</h2>
+        <Box sx={{paddingTop: '10px'}}>This number will applied to all future dates. It will overwrite staff numbers
+          that
+          are below this number.</Box>
+        <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
+        <Box sx={{paddingTop: '10px'}}>
+          <OutlinedInput placeholder="minimum number staff*" onChange={handleInputChange}/>
+        </Box>
+        <Button sx={{
+          marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
+          '&:hover': {backgroundColor: '#334F96'}
+        }} onClick={e => handleFormSubmit(e, staffNumber)}>
+          Continue
+        </Button>
       </Box>
-      <Button sx={{
-        marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
-        '&:hover': {backgroundColor: '#334F96'}
-      }} onClick={e => handleFormSubmit(e, staffNumber)}>
-        Continue
-      </Button>
-    </Box>
   }
 }
diff --git a/src/components/Staff/StaffForm.stories.tsx b/src/components/Staff/StaffForm.stories.tsx
index 2e08704..f26e6d9 100644
--- a/src/components/Staff/StaffForm.stories.tsx
+++ b/src/components/Staff/StaffForm.stories.tsx
@@ -22,5 +22,7 @@ export const MinStaffForm: Story = {
       }
       return true;
     },
-  }
+    continueCallback: () => {
+      console.log("Continue")
+  }}
 };

From 85f28a4b21c1926f74d7d2fa8c0890fa109eda62 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 30 Aug 2024 15:20:38 +0100
Subject: [PATCH 06/43] Change success icon and colors

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index fcd1b87..955c1be 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -1,5 +1,6 @@
 import React, {useState} from "react";
 import {Alert, Box, Button, OutlinedInput} from "@mui/material";
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
 export interface IMinStaffForm {
   port: string
@@ -41,7 +42,7 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
   {
     if (updated) {
       return <Box sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
-        <Alert sx={{paddingTop: '10px'}} severity="info">You updated the minimum staff number</Alert>
+        <Alert sx={{color:'#FFFFFF', backgroundColor:'#2E7D32'}} severity="success" icon={<CheckCircleIcon style={{ color: '#FFFFFF' }}/>}>You updated the minimum staff number</Alert>
           <Button sx={{marginTop: '10px', marginLeft: '50px', marginBottom: '10px',  backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
           '&:hover': {backgroundColor: '#334F96'}, }} onClick={continueCallback}>
           Continue

From ec1c1aecbb0aec809a76e0407fce0833ad2cc5e9 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Mon, 2 Sep 2024 14:42:30 +0100
Subject: [PATCH 07/43] adding test for min staff form and warning component

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx         | 38 ++++++------
 .../Staff/__tests__/MinStaffForm.test.tsx     | 59 +++++++++++++++++++
 .../Staff/__tests__/MinStaffWarning.test.tsx  | 30 ++++++++++
 3 files changed, 107 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Staff/__tests__/MinStaffForm.test.tsx
 create mode 100644 src/components/Staff/__tests__/MinStaffWarning.test.tsx

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index 955c1be..b55d96e 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from "react";
-import {Alert, Box, Button, OutlinedInput} from "@mui/material";
+import {Alert, Box, Button, OutlinedInput, Typography} from "@mui/material";
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import {AddCircle} from "@mui/icons-material";
 
 export interface IMinStaffForm {
   port: string
@@ -12,17 +13,16 @@ export interface IMinStaffForm {
 
 export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, continueCallback}: IMinStaffForm) => {
   const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
-  const [error, setError] = useState(false);
-  const [updated, setUpdated] = useState(false);
+  const [staffNumberFormatError, setStaffNumberFormatError] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
   const [submitError, setSubmitError] = useState(false);
 
   const handleFormSubmit = (event: React.ChangeEvent, minStaff: number | null) => {
     try {
       const submitted = handleSubmit(minStaff);
-      setUpdated(submitted);
+      setSubmitted(submitted);
       setSubmitError(false);
     } catch (error) {
-      console.error(error);
       setSubmitError(true);
     }
   }
@@ -33,15 +33,15 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
 
     if (!isNaN(Number(value)) && value.trim() !== "") {
       setStaffNumber(Number(value));
-      setError(false);
+      setStaffNumberFormatError(false);
     } else {
-      setError(true);
+      setStaffNumberFormatError(true);
     }
   }
 
   {
-    if (updated) {
-      return <Box sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
+    if (submitted) {
+      return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
         <Alert sx={{color:'#FFFFFF', backgroundColor:'#2E7D32'}} severity="success" icon={<CheckCircleIcon style={{ color: '#FFFFFF' }}/>}>You updated the minimum staff number</Alert>
           <Button sx={{marginTop: '10px', marginLeft: '50px', marginBottom: '10px',  backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
           '&:hover': {backgroundColor: '#334F96'}, }} onClick={continueCallback}>
@@ -49,26 +49,24 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
         </Button>
       </Box>
     } else
-      return <Box sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-        {error && (
-          <Alert severity="error">Enter number only</Alert>
+      return <Box data-testid={`min-staff-form`} sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+        {staffNumberFormatError && (
+          <Alert data-testid={`min-staff-number-error`} severity="error">Please enter a valid whole number, eg 10</Alert>
         )}
         {submitError && (
-          <Alert severity="error">An error occurred while submitting the form</Alert> // Add this line
+          <Alert data-testid={`min-staff-submit-error`} severity="error">An error occurred while submitting the form. Please try again or contact us if the problem persists</Alert>
         )}
         <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
-        <h2>Updating minimum staff number at PCP</h2>
-        <Box sx={{paddingTop: '10px'}}>This number will applied to all future dates. It will overwrite staff numbers
-          that
-          are below this number.</Box>
+        <Typography variant ="h2" component="h2">Updating minimum staff number at PCP</Typography>
+        <Box sx={{paddingTop: '10px'}}>This number will be applied to all future dates. It will overwrite all staff numbers that are currently zero with your new specified number</Box>
         <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
         <Box sx={{paddingTop: '10px'}}>
-          <OutlinedInput placeholder="minimum number staff*" onChange={handleInputChange}/>
+          <OutlinedInput data-testid={`min-staff-number-input`} placeholder="minimum number staff*" onChange={handleInputChange}/>
         </Box>
-        <Button sx={{
+        <Button data-testid={`min-staff-form-submit`} sx={{
           marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
           '&:hover': {backgroundColor: '#334F96'}
-        }} onClick={e => handleFormSubmit(e, staffNumber)}>
+        }} startIcon={<AddCircle/>} onClick={e => handleFormSubmit(e, staffNumber)}>
           Continue
         </Button>
       </Box>
diff --git a/src/components/Staff/__tests__/MinStaffForm.test.tsx b/src/components/Staff/__tests__/MinStaffForm.test.tsx
new file mode 100644
index 0000000..137b97c
--- /dev/null
+++ b/src/components/Staff/__tests__/MinStaffForm.test.tsx
@@ -0,0 +1,59 @@
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { MinStaffForm } from "../MinStaffForm";
+import React from "react";
+
+describe("MinStaffForm", () => {
+  const handleSubmitMock = jest.fn();
+  const continueCallbackMock = jest.fn();
+
+  const props = {
+    port: "Port",
+    terminal: "Terminal",
+    minStaffNumber: 10,
+    handleSubmit: handleSubmitMock,
+    continueCallback: continueCallbackMock
+  };
+
+  it("renders min staff form correctly", () => {
+    const { getByTestId } = render(<MinStaffForm {...props} />);
+    expect(getByTestId('min-staff-form')).toBeInTheDocument();
+  });
+
+  it("handles min staff number submission with valid input", async () => {
+    const { getByPlaceholderText, getByTestId } = render(<MinStaffForm {...props} />);
+    const input = getByPlaceholderText("minimum number staff*");
+
+    fireEvent.change(input, { target: { value: '20' } });
+    fireEvent.click(getByTestId('min-staff-form-submit'));
+
+    await waitFor(() => {
+      expect(handleSubmitMock).toHaveBeenCalledWith(20);
+    });
+  });
+
+  it("shows error when min staff number is not a valid number", async () => {
+    const { getByPlaceholderText, getByTestId } = render(<MinStaffForm {...props} />);
+    const input = getByPlaceholderText("minimum number staff*");
+
+    fireEvent.change(input, { target: { value: 'invalid' } });
+    fireEvent.click(getByTestId('min-staff-form-submit'));
+
+    await waitFor(() => {
+      expect(getByTestId('min-staff-number-error')).toBeInTheDocument();
+    });
+  });
+
+  it("shows error when min staff form submission fails", async () => {
+    handleSubmitMock.mockImplementationOnce(() => { throw new Error(); });
+
+    const { getByPlaceholderText, getByTestId } = render(<MinStaffForm {...props} />);
+    const input = getByPlaceholderText("minimum number staff*");
+
+    fireEvent.change(input, { target: { value: '20' } });
+    fireEvent.click(getByTestId('min-staff-form-submit'));
+
+    await waitFor(() => {
+      expect(getByTestId('min-staff-submit-error')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/components/Staff/__tests__/MinStaffWarning.test.tsx b/src/components/Staff/__tests__/MinStaffWarning.test.tsx
new file mode 100644
index 0000000..e8d2ee6
--- /dev/null
+++ b/src/components/Staff/__tests__/MinStaffWarning.test.tsx
@@ -0,0 +1,30 @@
+import { render, fireEvent } from "@testing-library/react";
+import { MinStaffWarning } from "../MinStaffWarning";
+import React from "react";
+
+describe("MinStaffWarning", () => {
+  const handleClickMock = jest.fn();
+
+  const props = {
+    message1: "Warning message 1",
+    message2: "Warning message 2",
+    minStaff: 10,
+    handleClick: handleClickMock
+  };
+
+  it("renders correctly", () => {
+    const { getByText } = render(<MinStaffWarning {...props} />);
+    expect(getByText('Warning message 1 10')).toBeInTheDocument();
+    expect(getByText('Warning message 2')).toBeInTheDocument();
+    expect(getByText('+ Add minimum staff')).toBeInTheDocument();
+  });
+
+  it("handles button click", () => {
+    const { getByTestId } = render(<MinStaffWarning {...props} />);
+    const button = getByTestId('mobile-add-min-staff');
+
+    fireEvent.click(button);
+
+    expect(handleClickMock).toHaveBeenCalled();
+  });
+});

From 1d5ebae15f422746958d8a4018136fee1ac4c653 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Mon, 2 Sep 2024 14:45:51 +0100
Subject: [PATCH 08/43] using AddCircleOutlineOutlinedIcon for adding min staff

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index b55d96e..869c48f 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import {Alert, Box, Button, OutlinedInput, Typography} from "@mui/material";
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import {AddCircle} from "@mui/icons-material";
+import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined";
 
 export interface IMinStaffForm {
   port: string
@@ -66,7 +66,7 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
         <Button data-testid={`min-staff-form-submit`} sx={{
           marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
           '&:hover': {backgroundColor: '#334F96'}
-        }} startIcon={<AddCircle/>} onClick={e => handleFormSubmit(e, staffNumber)}>
+        }} startIcon={<AddCircleOutlineOutlinedIcon/>} onClick={e => handleFormSubmit(e, staffNumber)}>
           Continue
         </Button>
       </Box>

From 779b1422e0a0b1b1997039147150941e626e2c34 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Tue, 3 Sep 2024 11:20:47 +0100
Subject: [PATCH 09/43] remove icon on continue

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index 869c48f..3313530 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -1,7 +1,6 @@
 import React, {useState} from "react";
-import {Alert, Box, Button, OutlinedInput, Typography} from "@mui/material";
+import {Alert, Box, Button, TextField, Typography} from "@mui/material";
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined";
 
 export interface IMinStaffForm {
   port: string
@@ -31,7 +30,7 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
     setStaffNumber(null);
     const value = event.target.value;
 
-    if (!isNaN(Number(value)) && value.trim() !== "") {
+    if ((!isNaN(Number(value)) && value.trim() !== "") && Number(value)!=0) {
       setStaffNumber(Number(value));
       setStaffNumberFormatError(false);
     } else {
@@ -51,22 +50,22 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
     } else
       return <Box data-testid={`min-staff-form`} sx={{paddingTop: '10px', paddingLeft: '10px'}}>
         {staffNumberFormatError && (
-          <Alert data-testid={`min-staff-number-error`} severity="error">Please enter a valid whole number, eg 10</Alert>
+          <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold'}} severity="error">Please enter a valid whole number, eg 10</Alert>
         )}
         {submitError && (
-          <Alert data-testid={`min-staff-submit-error`} severity="error">An error occurred while submitting the form. Please try again or contact us if the problem persists</Alert>
+          <Alert data-testid={`min-staff-submit-error`} sx={{fontWeight: 'bold'}} severity="error">An error occurred while submitting the form. Please try again or contact us if the problem persists</Alert>
         )}
         <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
         <Typography variant ="h2" component="h2">Updating minimum staff number at PCP</Typography>
         <Box sx={{paddingTop: '10px'}}>This number will be applied to all future dates. It will overwrite all staff numbers that are currently zero with your new specified number</Box>
         <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
         <Box sx={{paddingTop: '10px'}}>
-          <OutlinedInput data-testid={`min-staff-number-input`} placeholder="minimum number staff*" onChange={handleInputChange}/>
+          <TextField label="minimum number staff*" variant="outlined" sx={{ width: '25ch' }} data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
         </Box>
         <Button data-testid={`min-staff-form-submit`} sx={{
           marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
           '&:hover': {backgroundColor: '#334F96'}
-        }} startIcon={<AddCircleOutlineOutlinedIcon/>} onClick={e => handleFormSubmit(e, staffNumber)}>
+        }} onClick={e => handleFormSubmit(e, staffNumber)}>
           Continue
         </Button>
       </Box>

From f39a604deae8918596bea91c4010be4152d03a73 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 5 Sep 2024 09:57:26 +0100
Subject: [PATCH 10/43] separating min staff update sucess component

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx         | 69 ++++++++-----------
 src/components/Staff/MinStaffSuccess.tsx      | 15 ++++
 .../Staff/MinStaffSucess.stories.tsx          | 17 +++++
 ...tories.tsx => MinStaffWarning.stories.tsx} |  0
 src/components/Staff/StaffForm.stories.tsx    | 12 ++--
 5 files changed, 65 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Staff/MinStaffSuccess.tsx
 create mode 100644 src/components/Staff/MinStaffSucess.stories.tsx
 rename src/components/Staff/{Staff.stories.tsx => MinStaffWarning.stories.tsx} (100%)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index 3313530..5f49d19 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -1,25 +1,22 @@
 import React, {useState} from "react";
 import {Alert, Box, Button, TextField, Typography} from "@mui/material";
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
 export interface IMinStaffForm {
   port: string
   terminal: string
+  message: string
   minStaffNumber: number | null
-  handleSubmit: (minStaff: number | null) => boolean
-  continueCallback: () => void
+  handleSubmit: (minStaff: number | null) => void
 }
 
-export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, continueCallback}: IMinStaffForm) => {
+export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSubmit}: IMinStaffForm) => {
   const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
   const [staffNumberFormatError, setStaffNumberFormatError] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
   const [submitError, setSubmitError] = useState(false);
 
   const handleFormSubmit = (event: React.ChangeEvent, minStaff: number | null) => {
     try {
-      const submitted = handleSubmit(minStaff);
-      setSubmitted(submitted);
+      handleSubmit(minStaff);
       setSubmitError(false);
     } catch (error) {
       setSubmitError(true);
@@ -30,7 +27,7 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
     setStaffNumber(null);
     const value = event.target.value;
 
-    if ((!isNaN(Number(value)) && value.trim() !== "") && Number(value)!=0) {
+    if ((!isNaN(Number(value)) && value.trim() !== "") && Number(value) != 0) {
       setStaffNumber(Number(value));
       setStaffNumberFormatError(false);
     } else {
@@ -38,36 +35,28 @@ export const MinStaffForm = ({port, terminal, minStaffNumber, handleSubmit, cont
     }
   }
 
-  {
-    if (submitted) {
-      return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
-        <Alert sx={{color:'#FFFFFF', backgroundColor:'#2E7D32'}} severity="success" icon={<CheckCircleIcon style={{ color: '#FFFFFF' }}/>}>You updated the minimum staff number</Alert>
-          <Button sx={{marginTop: '10px', marginLeft: '50px', marginBottom: '10px',  backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
-          '&:hover': {backgroundColor: '#334F96'}, }} onClick={continueCallback}>
-          Continue
-        </Button>
-      </Box>
-    } else
-      return <Box data-testid={`min-staff-form`} sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-        {staffNumberFormatError && (
-          <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold'}} severity="error">Please enter a valid whole number, eg 10</Alert>
-        )}
-        {submitError && (
-          <Alert data-testid={`min-staff-submit-error`} sx={{fontWeight: 'bold'}} severity="error">An error occurred while submitting the form. Please try again or contact us if the problem persists</Alert>
-        )}
-        <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
-        <Typography variant ="h2" component="h2">Updating minimum staff number at PCP</Typography>
-        <Box sx={{paddingTop: '10px'}}>This number will be applied to all future dates. It will overwrite all staff numbers that are currently zero with your new specified number</Box>
-        <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
-        <Box sx={{paddingTop: '10px'}}>
-          <TextField label="minimum number staff*" variant="outlined" sx={{ width: '25ch' }} data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
-        </Box>
-        <Button data-testid={`min-staff-form-submit`} sx={{
-          marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
-          '&:hover': {backgroundColor: '#334F96'}
-        }} onClick={e => handleFormSubmit(e, staffNumber)}>
-          Continue
-        </Button>
-      </Box>
-  }
+  return <Box data-testid={`min-staff-form`} sx={{paddingTop: '10px', paddingLeft: '10px'}}>
+    {staffNumberFormatError && (
+      <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold'}} severity="error">Please enter a valid
+        whole number, eg 10</Alert>
+    )}
+    {submitError && (
+      <Alert data-testid={`min-staff-submit-error`} sx={{fontWeight: 'bold'}} severity="error">An error occurred while
+        submitting the form. Please try again or contact us if the problem persists</Alert>
+    )}
+    <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
+    <Typography variant="h2" component="h2">Updating minimum staff number at PCP</Typography>
+    <Box sx={{paddingTop: '10px'}}>{message}</Box>
+    <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <TextField label="Enter minimum number of staff*" variant="outlined" sx={{width: '35ch'}}
+                 data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
+    </Box>
+    <Button data-testid={`min-staff-form-submit`} sx={{
+      marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
+      '&:hover': {backgroundColor: '#334F96'}
+    }} onClick={e => handleFormSubmit(e, staffNumber)}>
+      Continue
+    </Button>
+  </Box>
 }
diff --git a/src/components/Staff/MinStaffSuccess.tsx b/src/components/Staff/MinStaffSuccess.tsx
new file mode 100644
index 0000000..def661c
--- /dev/null
+++ b/src/components/Staff/MinStaffSuccess.tsx
@@ -0,0 +1,15 @@
+import {Alert, Box, Button} from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import React from "react";
+
+export interface IMinStaffSuccess {
+  minStaffNumber: number | null,
+  message: string,
+}
+
+export const MinStaffSuccess = ({minStaffNumber, message}: IMinStaffSuccess) => {
+  return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
+    <Alert sx={{color: '#FFFFFF', backgroundColor: '#2E7D32'}} severity="success"
+           icon={<CheckCircleIcon style={{color: '#FFFFFF'}}/>}>{message} {minStaffNumber}</Alert>
+  </Box>
+}
diff --git a/src/components/Staff/MinStaffSucess.stories.tsx b/src/components/Staff/MinStaffSucess.stories.tsx
new file mode 100644
index 0000000..4df7850
--- /dev/null
+++ b/src/components/Staff/MinStaffSucess.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MinStaffSuccess as MinStaffSuccessComponent } from "./MinStaffSuccess";
+
+const meta: Meta<typeof MinStaffSuccessComponent> = {
+  title: "DRT Components/MinStaffSuccessComponent",
+  component: MinStaffSuccessComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MinStaffSuccessComponent>;
+
+export const MinStaffSuccess: Story = {
+  args: {
+    minStaffNumber: 1,
+    message: "You updated the minimum staff number"
+  }
+};
diff --git a/src/components/Staff/Staff.stories.tsx b/src/components/Staff/MinStaffWarning.stories.tsx
similarity index 100%
rename from src/components/Staff/Staff.stories.tsx
rename to src/components/Staff/MinStaffWarning.stories.tsx
diff --git a/src/components/Staff/StaffForm.stories.tsx b/src/components/Staff/StaffForm.stories.tsx
index f26e6d9..7895853 100644
--- a/src/components/Staff/StaffForm.stories.tsx
+++ b/src/components/Staff/StaffForm.stories.tsx
@@ -14,15 +14,11 @@ export const MinStaffForm: Story = {
   args: {
     port: "Birmingham (BHX)",
     terminal: "Terminal 1",
+    message: "This number will be applied to all future dates. It will overwrite all staff numbers " +
+      "that are currently zero with your new specified number",
     minStaffNumber: null,
     handleSubmit: (minStaff: number) => {
       console.log(minStaff)
-      if (minStaff === null || minStaff === undefined) {
-        return false;
-      }
-      return true;
-    },
-    continueCallback: () => {
-      console.log("Continue")
-  }}
+    }
+  }
 };

From 3dfa0ade929dd9ade8ccabeb8eaa26fba1025bcc Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 5 Sep 2024 11:32:25 +0100
Subject: [PATCH 11/43] Update index for export IMinSuccess Type

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/index.ts |  2 ++
 src/components/index.ts       | 18 +++++++++---------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
index 1eacd3a..4bf4919 100644
--- a/src/components/Staff/index.ts
+++ b/src/components/Staff/index.ts
@@ -1,5 +1,7 @@
 export {MinStaffWarning} from './MinStaffWarning'
 export {MinStaffForm} from './MinStaffForm'
+export {MinStaffSuccess} from './MinStaffSuccess'
+export type {IMinStaffSuccess} from './MinStaffSuccess'
 export type {IMinStaffWarning} from './MinStaffWarning'
 export type {IMinStaffForm} from './MinStaffForm'
 
diff --git a/src/components/index.ts b/src/components/index.ts
index 8a8aef3..d44157e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,13 +1,13 @@
-export { default as FlightFlagger } from "./FlightFlagger";
+export {default as FlightFlagger} from "./FlightFlagger";
 
-export { FlightFlaggerFilters, FlightHighlightChip } from "./FlightFlagger";
-export type { IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip } from "./FlightFlagger";
+export {FlightFlaggerFilters, FlightHighlightChip} from "./FlightFlagger";
+export type {IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip} from "./FlightFlagger";
 
-export { StatusTag } from "./StatusTags";
-export type { IStatusTag } from "./StatusTags";
+export {StatusTag} from "./StatusTags";
+export type {IStatusTag} from "./StatusTags";
 
-export { default as Header } from './Header'
-export type { IHeader, MenuItem } from './Header';
+export {default as Header} from './Header'
+export type {IHeader, MenuItem} from './Header';
 
-export { MinStaffWarning, MinStaffForm } from './Staff'
-export type { IMinStaffWarning, IMinStaffForm } from './Staff'
+export {MinStaffSuccess, MinStaffWarning, MinStaffForm} from './Staff'
+export type {IMinStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'

From 42a7993aa02ccc49d1f21f8226485925533a2b92 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 5 Sep 2024 12:57:31 +0100
Subject: [PATCH 12/43] adding close success handler

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffSuccess.tsx        | 16 ++++++++++++++--
 src/components/Staff/MinStaffSucess.stories.tsx |  5 ++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Staff/MinStaffSuccess.tsx b/src/components/Staff/MinStaffSuccess.tsx
index def661c..ed80eac 100644
--- a/src/components/Staff/MinStaffSuccess.tsx
+++ b/src/components/Staff/MinStaffSuccess.tsx
@@ -1,15 +1,27 @@
-import {Alert, Box, Button} from "@mui/material";
+import {Alert, Box, IconButton} from "@mui/material";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
 
 export interface IMinStaffSuccess {
   minStaffNumber: number | null,
   message: string,
+  closeHandler: () => void
 }
 
-export const MinStaffSuccess = ({minStaffNumber, message}: IMinStaffSuccess) => {
+export const MinStaffSuccess = ({minStaffNumber, message, closeHandler}: IMinStaffSuccess) => {
   return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
     <Alert sx={{color: '#FFFFFF', backgroundColor: '#2E7D32'}} severity="success"
+           action={
+             <IconButton
+               aria-label="close"
+               color="inherit"
+               size="small"
+               onClick={closeHandler}
+             >
+               <CloseIcon fontSize="inherit"/>
+             </IconButton>
+           }
            icon={<CheckCircleIcon style={{color: '#FFFFFF'}}/>}>{message} {minStaffNumber}</Alert>
   </Box>
 }
diff --git a/src/components/Staff/MinStaffSucess.stories.tsx b/src/components/Staff/MinStaffSucess.stories.tsx
index 4df7850..0b3bf3f 100644
--- a/src/components/Staff/MinStaffSucess.stories.tsx
+++ b/src/components/Staff/MinStaffSucess.stories.tsx
@@ -12,6 +12,9 @@ type Story = StoryObj<typeof MinStaffSuccessComponent>;
 export const MinStaffSuccess: Story = {
   args: {
     minStaffNumber: 1,
-    message: "You updated the minimum staff number"
+    message: "You updated the minimum staff number",
+    closeHandler: () => {
+      console.log("Close handler")
+    }
   }
 };

From 3d8cb6edc966538a652814571a5bc2f33fb18762 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 6 Sep 2024 12:07:48 +0100
Subject: [PATCH 13/43] adding cancel to mins staff form

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx      | 9 ++++++---
 src/components/Staff/StaffForm.stories.tsx | 3 +++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index 5f49d19..619c4df 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {Alert, Box, Button, TextField, Typography} from "@mui/material";
+import {Alert, Box, Button, Link, TextField, Typography} from "@mui/material";
 
 export interface IMinStaffForm {
   port: string
@@ -7,9 +7,10 @@ export interface IMinStaffForm {
   message: string
   minStaffNumber: number | null
   handleSubmit: (minStaff: number | null) => void
+  cancelHandler: () => void
 }
 
-export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSubmit}: IMinStaffForm) => {
+export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSubmit, cancelHandler}: IMinStaffForm) => {
   const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
   const [staffNumberFormatError, setStaffNumberFormatError] = useState(false);
   const [submitError, setSubmitError] = useState(false);
@@ -52,11 +53,13 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
       <TextField label="Enter minimum number of staff*" variant="outlined" sx={{width: '35ch'}}
                  data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
     </Box>
-    <Button data-testid={`min-staff-form-submit`} sx={{
+    <Box sx={{display: 'flex', alignItems: 'center'}}><Button data-testid={`min-staff-form-submit`} sx={{
       marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
       '&:hover': {backgroundColor: '#334F96'}
     }} onClick={e => handleFormSubmit(e, staffNumber)}>
       Continue
     </Button>
+      <Link sx={{paddingLeft: '30px', paddingTop: '10px', cursor: 'pointer'}} onClick={cancelHandler}>Cancel</Link>
+    </Box>
   </Box>
 }
diff --git a/src/components/Staff/StaffForm.stories.tsx b/src/components/Staff/StaffForm.stories.tsx
index 7895853..15530f1 100644
--- a/src/components/Staff/StaffForm.stories.tsx
+++ b/src/components/Staff/StaffForm.stories.tsx
@@ -19,6 +19,9 @@ export const MinStaffForm: Story = {
     minStaffNumber: null,
     handleSubmit: (minStaff: number) => {
       console.log(minStaff)
+    },
+    cancelHandler : () => {
+      console.log("Cancel clicked")
     }
   }
 };

From 9e817fc5eea91929d60d3245eaad8d4f279afeec Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 13 Sep 2024 10:22:40 +0100
Subject: [PATCH 14/43] adding decimal error check

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx         | 40 ++++++++++++++-----
 .../Staff/__tests__/MinStaffForm.test.tsx     | 28 +++++++------
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index 619c4df..efe53b4 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -13,6 +13,7 @@ export interface IMinStaffForm {
 export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSubmit, cancelHandler}: IMinStaffForm) => {
   const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
   const [staffNumberFormatError, setStaffNumberFormatError] = useState(false);
+  const [staffNumberErrorText, setStaffNumberErrorText] = useState("");
   const [submitError, setSubmitError] = useState(false);
 
   const handleFormSubmit = (event: React.ChangeEvent, minStaff: number | null) => {
@@ -28,18 +29,31 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
     setStaffNumber(null);
     const value = event.target.value;
 
-    if ((!isNaN(Number(value)) && value.trim() !== "") && Number(value) != 0) {
-      setStaffNumber(Number(value));
-      setStaffNumberFormatError(false);
+    if (!isNaN(Number(value)) && value.trim() !== "") {
+      if (Number.isInteger(Number(value))) {
+        if (Number(value) != 0) {
+          setStaffNumber(Number(value));
+          setStaffNumberFormatError(false);
+        } else {
+          setStaffNumberFormatError(true);
+          setStaffNumberErrorText("Please enter a number greater than 0");
+        }
+      } else {
+        setStaffNumberFormatError(true);
+        setStaffNumberErrorText("Please enter a whole number, eg 10");
+      }
     } else {
       setStaffNumberFormatError(true);
+      setStaffNumberErrorText("Please enter a valid whole number, eg 10");
     }
   }
 
   return <Box data-testid={`min-staff-form`} sx={{paddingTop: '10px', paddingLeft: '10px'}}>
     {staffNumberFormatError && (
-      <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold'}} severity="error">Please enter a valid
-        whole number, eg 10</Alert>
+      <Alert data-testid={`min-staff-number-error`} severity="error">
+        <Box sx={{marginTop: '-5px',fontWeight: 'bold', fontSize: '18px'}}>There is a problem</Box>
+        <Box sx={{fontWeight: 'bold', fontSize: '12px'}}> {staffNumberErrorText}</Box>
+      </Alert>
     )}
     {submitError && (
       <Alert data-testid={`min-staff-submit-error`} sx={{fontWeight: 'bold'}} severity="error">An error occurred while
@@ -52,13 +66,17 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
     <Box sx={{paddingTop: '10px'}}>
       <TextField label="Enter minimum number of staff*" variant="outlined" sx={{width: '35ch'}}
                  data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
+      {staffNumberFormatError && (
+        <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold', fontSize: '12px'}}
+               severity="error">{staffNumberErrorText}</Alert>
+      )}
     </Box>
-    <Box sx={{display: 'flex', alignItems: 'center'}}><Button data-testid={`min-staff-form-submit`} sx={{
-      marginTop: '10px', backgroundColor: '#334F96', color: '#fff', textTransform: 'none',
-      '&:hover': {backgroundColor: '#334F96'}
-    }} onClick={e => handleFormSubmit(e, staffNumber)}>
-      Continue
-    </Button>
+    <Box sx={{display: 'flex', alignItems: 'center'}}>
+      <Button data-testid={`min-staff-form-submit`} sx={{
+      marginTop: '10px', backgroundColor: staffNumberFormatError ? '#BDBDBD' : '#334F96',
+        color: staffNumberFormatError ? '#000' : '#fff',
+        textTransform: 'none', '&:hover': {backgroundColor: staffNumberFormatError ? '#BDBDBD' : '#334F96'}
+    }} onClick={e => handleFormSubmit(e, staffNumber)} disabled={staffNumberFormatError}>Continue</Button>
       <Link sx={{paddingLeft: '30px', paddingTop: '10px', cursor: 'pointer'}} onClick={cancelHandler}>Cancel</Link>
     </Box>
   </Box>
diff --git a/src/components/Staff/__tests__/MinStaffForm.test.tsx b/src/components/Staff/__tests__/MinStaffForm.test.tsx
index 137b97c..97ca6ac 100644
--- a/src/components/Staff/__tests__/MinStaffForm.test.tsx
+++ b/src/components/Staff/__tests__/MinStaffForm.test.tsx
@@ -1,5 +1,5 @@
-import { render, fireEvent, waitFor } from "@testing-library/react";
-import { MinStaffForm } from "../MinStaffForm";
+import {render, fireEvent, waitFor} from "@testing-library/react";
+import {MinStaffForm} from "../MinStaffForm";
 import React from "react";
 
 describe("MinStaffForm", () => {
@@ -15,15 +15,15 @@ describe("MinStaffForm", () => {
   };
 
   it("renders min staff form correctly", () => {
-    const { getByTestId } = render(<MinStaffForm {...props} />);
+    const {getByTestId} = render(<MinStaffForm {...props} />);
     expect(getByTestId('min-staff-form')).toBeInTheDocument();
   });
 
   it("handles min staff number submission with valid input", async () => {
-    const { getByPlaceholderText, getByTestId } = render(<MinStaffForm {...props} />);
-    const input = getByPlaceholderText("minimum number staff*");
+    const {getByTestId} = render(<MinStaffForm {...props} />);
+    const input = getByTestId("min-staff-number-input");
 
-    fireEvent.change(input, { target: { value: '20' } });
+    fireEvent.change(input, {target: {value: '20'}});
     fireEvent.click(getByTestId('min-staff-form-submit'));
 
     await waitFor(() => {
@@ -32,10 +32,10 @@ describe("MinStaffForm", () => {
   });
 
   it("shows error when min staff number is not a valid number", async () => {
-    const { getByPlaceholderText, getByTestId } = render(<MinStaffForm {...props} />);
-    const input = getByPlaceholderText("minimum number staff*");
+    const {getByTestId} = render(<MinStaffForm {...props} />);
+    const input = getByTestId("min-staff-number-input");
 
-    fireEvent.change(input, { target: { value: 'invalid' } });
+    fireEvent.change(input, {target: {value: 'invalid'}});
     fireEvent.click(getByTestId('min-staff-form-submit'));
 
     await waitFor(() => {
@@ -44,12 +44,14 @@ describe("MinStaffForm", () => {
   });
 
   it("shows error when min staff form submission fails", async () => {
-    handleSubmitMock.mockImplementationOnce(() => { throw new Error(); });
+    handleSubmitMock.mockImplementationOnce(() => {
+      throw new Error();
+    });
 
-    const { getByPlaceholderText, getByTestId } = render(<MinStaffForm {...props} />);
-    const input = getByPlaceholderText("minimum number staff*");
+    const {getByTestId} = render(<MinStaffForm {...props} />);
+    const input = getByTestId("min-staff-number-input");
 
-    fireEvent.change(input, { target: { value: '20' } });
+    fireEvent.change(input, {target: {value: '20'}});
     fireEvent.click(getByTestId('min-staff-form-submit'));
 
     await waitFor(() => {

From 4ff2fc74fb98c832dc03ba08035b33db0364806c Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 13 Sep 2024 10:53:57 +0100
Subject: [PATCH 15/43] remove colon

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index efe53b4..3051e5d 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -59,7 +59,7 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
       <Alert data-testid={`min-staff-submit-error`} sx={{fontWeight: 'bold'}} severity="error">An error occurred while
         submitting the form. Please try again or contact us if the problem persists</Alert>
     )}
-    <Box sx={{paddingTop: '10px'}}>{port} : {terminal}</Box>
+    <Box sx={{paddingTop: '10px'}}>{port} {terminal}</Box>
     <Typography variant="h2" component="h2">Updating minimum staff number at PCP</Typography>
     <Box sx={{paddingTop: '10px'}}>{message}</Box>
     <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>

From 1af309dc2e497ff1db3fb7668e8ae22dd62ac735 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 13 Sep 2024 10:59:34 +0100
Subject: [PATCH 16/43] update title

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index 3051e5d..c349813 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -60,7 +60,7 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
         submitting the form. Please try again or contact us if the problem persists</Alert>
     )}
     <Box sx={{paddingTop: '10px'}}>{port} {terminal}</Box>
-    <Typography variant="h2" component="h2">Updating minimum staff number at PCP</Typography>
+    <Typography variant="h2" component="h2">Updating minimum staff PCP staff number</Typography>
     <Box sx={{paddingTop: '10px'}}>{message}</Box>
     <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
     <Box sx={{paddingTop: '10px'}}>

From d40922eef6cf0d341d399612f2b8ce0d7de7b828 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 13 Sep 2024 13:51:26 +0100
Subject: [PATCH 17/43] adding text change

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/MinStaffForm.tsx      | 7 +++----
 src/components/Staff/StaffForm.stories.tsx | 3 +--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
index c349813..cf08219 100644
--- a/src/components/Staff/MinStaffForm.tsx
+++ b/src/components/Staff/MinStaffForm.tsx
@@ -31,7 +31,7 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
 
     if (!isNaN(Number(value)) && value.trim() !== "") {
       if (Number.isInteger(Number(value))) {
-        if (Number(value) != 0) {
+        if (Number(value) > 0) {
           setStaffNumber(Number(value));
           setStaffNumberFormatError(false);
         } else {
@@ -60,11 +60,10 @@ export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSub
         submitting the form. Please try again or contact us if the problem persists</Alert>
     )}
     <Box sx={{paddingTop: '10px'}}>{port} {terminal}</Box>
-    <Typography variant="h2" component="h2">Updating minimum staff PCP staff number</Typography>
+    <Typography variant="h2" component="h2">Update minimum PCP staff number</Typography>
     <Box sx={{paddingTop: '10px'}}>{message}</Box>
-    <Box sx={{paddingTop: '10px'}}>Staff numbers from any previous dates will not change.</Box>
     <Box sx={{paddingTop: '10px'}}>
-      <TextField label="Enter minimum number of staff*" variant="outlined" sx={{width: '35ch'}}
+      <TextField label="Enter minimum PCP staff number" variant="outlined" sx={{width: '35ch'}}
                  data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
       {staffNumberFormatError && (
         <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold', fontSize: '12px'}}
diff --git a/src/components/Staff/StaffForm.stories.tsx b/src/components/Staff/StaffForm.stories.tsx
index 15530f1..7988f2d 100644
--- a/src/components/Staff/StaffForm.stories.tsx
+++ b/src/components/Staff/StaffForm.stories.tsx
@@ -14,8 +14,7 @@ export const MinStaffForm: Story = {
   args: {
     port: "Birmingham (BHX)",
     terminal: "Terminal 1",
-    message: "This number will be applied to all future dates. It will overwrite all staff numbers " +
-      "that are currently zero with your new specified number",
+    message: "All future dates with the previously entered minimum staff number will be updated.",
     minStaffNumber: null,
     handleSubmit: (minStaff: number) => {
       console.log(minStaff)

From 91e913ca9bff49dafe7c8b1b2ae50442c78a695a Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Wed, 25 Sep 2024 12:42:37 +0100
Subject: [PATCH 18/43] fix test and update esbuild

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 package-lock.json                             | 1695 ++++++++++++++---
 package.json                                  |    3 +-
 .../Staff/__tests__/MinStaffForm.test.tsx     |   36 +-
 3 files changed, 1444 insertions(+), 290 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3e7164e..2efd7fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@drt/drt-react-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@drt/drt-react-components",
-      "version": "1.5.0",
+      "version": "1.5.1",
       "license": "MIT",
       "dependencies": {
         "-": "^0.0.1",
@@ -14,7 +14,7 @@
         "@emotion/styled": "^11.11.5",
         "@fontsource/material-icons": "^5.0.18",
         "@fontsource/roboto": "^5.0.13",
-        "@mui/icons-material": "5.11.16",
+        "@mui/icons-material": "5.16.5",
         "@mui/lab": "5.0.0-alpha.119",
         "@mui/material": "5.16.5",
         "@storybook/addon-a11y": "^8.1.10",
@@ -22,6 +22,7 @@
         "@svgr/webpack": "^8.1.0",
         "css-loader": "^7.1.2",
         "css-mediaquery": "^0.1.2",
+        "esbuild": "^0.24.0",
         "install-peers": "^1.0.4",
         "postcss": "^8.4.38",
         "sass-loader": "^14.2.1",
@@ -2153,19 +2154,364 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.2",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
       "cpu": [
         "x64"
       ],
-      "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -4669,29 +5015,435 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/builder-webpack5": {
-      "version": "8.1.6",
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/channels": "8.1.6",
-        "@storybook/client-logger": "8.1.6",
-        "@storybook/core-common": "8.1.6",
-        "@storybook/core-events": "8.1.6",
-        "@storybook/core-webpack": "8.1.6",
-        "@storybook/node-logger": "8.1.6",
-        "@storybook/preview": "8.1.6",
-        "@storybook/preview-api": "8.1.6",
-        "@types/node": "^18.0.0",
-        "@types/semver": "^7.3.4",
-        "browser-assert": "^1.2.1",
-        "case-sensitive-paths-webpack-plugin": "^2.4.0",
-        "cjs-module-lexer": "^1.2.3",
-        "constants-browserify": "^1.0.0",
-        "css-loader": "^6.7.1",
-        "es-module-lexer": "^1.5.0",
-        "express": "^4.17.3",
-        "fork-ts-checker-webpack-plugin": "^8.0.0",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/builder-manager/node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/channels": "8.1.6",
+        "@storybook/client-logger": "8.1.6",
+        "@storybook/core-common": "8.1.6",
+        "@storybook/core-events": "8.1.6",
+        "@storybook/core-webpack": "8.1.6",
+        "@storybook/node-logger": "8.1.6",
+        "@storybook/preview": "8.1.6",
+        "@storybook/preview-api": "8.1.6",
+        "@types/node": "^18.0.0",
+        "@types/semver": "^7.3.4",
+        "browser-assert": "^1.2.1",
+        "case-sensitive-paths-webpack-plugin": "^2.4.0",
+        "cjs-module-lexer": "^1.2.3",
+        "constants-browserify": "^1.0.0",
+        "css-loader": "^6.7.1",
+        "es-module-lexer": "^1.5.0",
+        "express": "^4.17.3",
+        "fork-ts-checker-webpack-plugin": "^8.0.0",
         "fs-extra": "^11.1.0",
         "html-webpack-plugin": "^5.5.0",
         "magic-string": "^0.30.5",
@@ -4714,257 +5466,663 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependenciesMeta": {
-        "typescript": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
+      "version": "18.19.34",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/css-loader": {
+      "version": "6.11.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/style-loader": {
+      "version": "3.3.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/@storybook/builder-webpack5/node_modules/webpack-virtual-modules": {
+      "version": "0.5.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@storybook/channels": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/client-logger": "8.1.6",
+        "@storybook/core-events": "8.1.6",
+        "@storybook/global": "^5.0.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/types": "^7.24.0",
+        "@ndelangen/get-tarball": "^3.0.7",
+        "@storybook/codemod": "8.1.6",
+        "@storybook/core-common": "8.1.6",
+        "@storybook/core-events": "8.1.6",
+        "@storybook/core-server": "8.1.6",
+        "@storybook/csf-tools": "8.1.6",
+        "@storybook/node-logger": "8.1.6",
+        "@storybook/telemetry": "8.1.6",
+        "@storybook/types": "8.1.6",
+        "@types/semver": "^7.3.4",
+        "@yarnpkg/fslib": "2.10.3",
+        "@yarnpkg/libzip": "2.3.0",
+        "chalk": "^4.1.0",
+        "commander": "^6.2.1",
+        "cross-spawn": "^7.0.3",
+        "detect-indent": "^6.1.0",
+        "envinfo": "^7.7.3",
+        "execa": "^5.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "get-npm-tarball-url": "^2.0.3",
+        "giget": "^1.0.0",
+        "globby": "^14.0.1",
+        "jscodeshift": "^0.15.1",
+        "leven": "^3.1.0",
+        "ora": "^5.4.1",
+        "prettier": "^3.1.1",
+        "prompts": "^2.4.0",
+        "read-pkg-up": "^7.0.1",
+        "semver": "^7.3.7",
+        "strip-json-comments": "^3.0.1",
+        "tempy": "^3.1.0",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0"
+      },
+      "bin": {
+        "getstorybook": "bin/index.js",
+        "sb": "bin/index.js"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/cli/node_modules/commander": {
+      "version": "6.2.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@storybook/client-logger": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/codemod": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.24.4",
+        "@babel/types": "^7.24.0",
+        "@storybook/csf": "^0.1.7",
+        "@storybook/csf-tools": "8.1.6",
+        "@storybook/node-logger": "8.1.6",
+        "@storybook/types": "8.1.6",
+        "@types/cross-spawn": "^6.0.2",
+        "cross-spawn": "^7.0.3",
+        "globby": "^14.0.1",
+        "jscodeshift": "^0.15.1",
+        "lodash": "^4.17.21",
+        "prettier": "^3.1.1",
+        "recast": "^0.23.5",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/components": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@storybook/client-logger": "8.1.6",
+        "@storybook/csf": "^0.1.7",
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^1.2.5",
+        "@storybook/theming": "8.1.6",
+        "@storybook/types": "8.1.6",
+        "memoizerific": "^1.11.3",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
+      }
+    },
+    "node_modules/@storybook/core-common": {
+      "version": "8.1.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/core-events": "8.1.6",
+        "@storybook/csf-tools": "8.1.6",
+        "@storybook/node-logger": "8.1.6",
+        "@storybook/types": "8.1.6",
+        "@yarnpkg/fslib": "2.10.3",
+        "@yarnpkg/libzip": "2.3.0",
+        "chalk": "^4.1.0",
+        "cross-spawn": "^7.0.3",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0",
+        "esbuild-register": "^3.5.0",
+        "execa": "^5.0.0",
+        "file-system-cache": "2.3.0",
+        "find-cache-dir": "^3.0.0",
+        "find-up": "^5.0.0",
+        "fs-extra": "^11.1.0",
+        "glob": "^10.0.0",
+        "handlebars": "^4.7.7",
+        "lazy-universal-dotenv": "^4.0.0",
+        "node-fetch": "^2.0.0",
+        "picomatch": "^2.3.0",
+        "pkg-dir": "^5.0.0",
+        "prettier-fallback": "npm:prettier@^3",
+        "pretty-hrtime": "^1.0.3",
+        "resolve-from": "^5.0.0",
+        "semver": "^7.3.7",
+        "tempy": "^3.1.0",
+        "tiny-invariant": "^1.3.1",
+        "ts-dedent": "^2.0.0",
+        "util": "^0.12.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
           "optional": true
         }
       }
     },
-    "node_modules/@storybook/builder-webpack5/node_modules/@types/node": {
-      "version": "18.19.34",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~5.26.4"
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/builder-webpack5/node_modules/css-loader": {
-      "version": "6.11.0",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "icss-utils": "^5.1.0",
-        "postcss": "^8.4.33",
-        "postcss-modules-extract-imports": "^3.1.0",
-        "postcss-modules-local-by-default": "^4.0.5",
-        "postcss-modules-scope": "^3.2.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.2.0",
-        "semver": "^7.5.4"
-      },
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/builder-webpack5/node_modules/style-loader": {
-      "version": "3.3.4",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/builder-webpack5/node_modules/webpack-virtual-modules": {
-      "version": "0.5.0",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "node_modules/@storybook/channels": {
-      "version": "8.1.6",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/client-logger": "8.1.6",
-        "@storybook/core-events": "8.1.6",
-        "@storybook/global": "^5.0.0",
-        "telejson": "^7.2.0",
-        "tiny-invariant": "^1.3.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/core-common/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/cli": {
-      "version": "8.1.6",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/types": "^7.24.0",
-        "@ndelangen/get-tarball": "^3.0.7",
-        "@storybook/codemod": "8.1.6",
-        "@storybook/core-common": "8.1.6",
-        "@storybook/core-events": "8.1.6",
-        "@storybook/core-server": "8.1.6",
-        "@storybook/csf-tools": "8.1.6",
-        "@storybook/node-logger": "8.1.6",
-        "@storybook/telemetry": "8.1.6",
-        "@storybook/types": "8.1.6",
-        "@types/semver": "^7.3.4",
-        "@yarnpkg/fslib": "2.10.3",
-        "@yarnpkg/libzip": "2.3.0",
-        "chalk": "^4.1.0",
-        "commander": "^6.2.1",
-        "cross-spawn": "^7.0.3",
-        "detect-indent": "^6.1.0",
-        "envinfo": "^7.7.3",
-        "execa": "^5.0.0",
-        "find-up": "^5.0.0",
-        "fs-extra": "^11.1.0",
-        "get-npm-tarball-url": "^2.0.3",
-        "giget": "^1.0.0",
-        "globby": "^14.0.1",
-        "jscodeshift": "^0.15.1",
-        "leven": "^3.1.0",
-        "ora": "^5.4.1",
-        "prettier": "^3.1.1",
-        "prompts": "^2.4.0",
-        "read-pkg-up": "^7.0.1",
-        "semver": "^7.3.7",
-        "strip-json-comments": "^3.0.1",
-        "tempy": "^3.1.0",
-        "tiny-invariant": "^1.3.1",
-        "ts-dedent": "^2.0.0"
-      },
-      "bin": {
-        "getstorybook": "bin/index.js",
-        "sb": "bin/index.js"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/cli/node_modules/commander": {
-      "version": "6.2.1",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
       "engines": {
-        "node": ">= 6"
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/client-logger": {
-      "version": "8.1.6",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/global": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/codemod": {
-      "version": "8.1.6",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.24.4",
-        "@babel/preset-env": "^7.24.4",
-        "@babel/types": "^7.24.0",
-        "@storybook/csf": "^0.1.7",
-        "@storybook/csf-tools": "8.1.6",
-        "@storybook/node-logger": "8.1.6",
-        "@storybook/types": "8.1.6",
-        "@types/cross-spawn": "^6.0.2",
-        "cross-spawn": "^7.0.3",
-        "globby": "^14.0.1",
-        "jscodeshift": "^0.15.1",
-        "lodash": "^4.17.21",
-        "prettier": "^3.1.1",
-        "recast": "^0.23.5",
-        "tiny-invariant": "^1.3.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/components": {
-      "version": "8.1.6",
+    "node_modules/@storybook/core-common/node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-dialog": "^1.0.5",
-        "@radix-ui/react-slot": "^1.0.2",
-        "@storybook/client-logger": "8.1.6",
-        "@storybook/csf": "^0.1.7",
-        "@storybook/global": "^5.0.0",
-        "@storybook/icons": "^1.2.5",
-        "@storybook/theming": "8.1.6",
-        "@storybook/types": "8.1.6",
-        "memoizerific": "^1.11.3",
-        "util-deprecate": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@storybook/core-common": {
-      "version": "8.1.6",
+    "node_modules/@storybook/core-common/node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@storybook/core-events": "8.1.6",
-        "@storybook/csf-tools": "8.1.6",
-        "@storybook/node-logger": "8.1.6",
-        "@storybook/types": "8.1.6",
-        "@yarnpkg/fslib": "2.10.3",
-        "@yarnpkg/libzip": "2.3.0",
-        "chalk": "^4.1.0",
-        "cross-spawn": "^7.0.3",
-        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0",
-        "esbuild-register": "^3.5.0",
-        "execa": "^5.0.0",
-        "file-system-cache": "2.3.0",
-        "find-cache-dir": "^3.0.0",
-        "find-up": "^5.0.0",
-        "fs-extra": "^11.1.0",
-        "glob": "^10.0.0",
-        "handlebars": "^4.7.7",
-        "lazy-universal-dotenv": "^4.0.0",
-        "node-fetch": "^2.0.0",
-        "picomatch": "^2.3.0",
-        "pkg-dir": "^5.0.0",
-        "prettier-fallback": "npm:prettier@^3",
-        "pretty-hrtime": "^1.0.3",
-        "resolve-from": "^5.0.0",
-        "semver": "^7.3.7",
-        "tempy": "^3.1.0",
-        "tiny-invariant": "^1.3.1",
-        "ts-dedent": "^2.0.0",
-        "util": "^0.12.4"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
       },
-      "peerDependencies": {
-        "prettier": "^2 || ^3"
+      "engines": {
+        "node": ">=12"
       },
-      "peerDependenciesMeta": {
-        "prettier": {
-          "optional": true
-        }
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/@storybook/core-common/node_modules/glob": {
@@ -9387,40 +10545,41 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.20.2",
-      "dev": true,
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
       "hasInstallScript": true,
-      "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
       }
     },
     "node_modules/esbuild-plugin-alias": {
diff --git a/package.json b/package.json
index a1db2f1..f441294 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.18",
     "@fontsource/roboto": "^5.0.13",
-    "@mui/icons-material": "5.11.16",
+    "@mui/icons-material": "5.16.5",
     "@mui/lab": "5.0.0-alpha.119",
     "@mui/material": "5.16.5",
     "@storybook/addon-a11y": "^8.1.10",
@@ -103,6 +103,7 @@
     "@svgr/webpack": "^8.1.0",
     "css-loader": "^7.1.2",
     "css-mediaquery": "^0.1.2",
+    "esbuild": "^0.24.0",
     "install-peers": "^1.0.4",
     "postcss": "^8.4.38",
     "sass-loader": "^14.2.1",
diff --git a/src/components/Staff/__tests__/MinStaffForm.test.tsx b/src/components/Staff/__tests__/MinStaffForm.test.tsx
index 97ca6ac..6bf0ecc 100644
--- a/src/components/Staff/__tests__/MinStaffForm.test.tsx
+++ b/src/components/Staff/__tests__/MinStaffForm.test.tsx
@@ -1,45 +1,39 @@
-import {render, fireEvent, waitFor} from "@testing-library/react";
-import {MinStaffForm} from "../MinStaffForm";
+import {render, fireEvent, screen, waitFor, getByLabelText} from "@testing-library/react";
+import { MinStaffForm } from "../MinStaffForm";
 import React from "react";
 
 describe("MinStaffForm", () => {
   const handleSubmitMock = jest.fn();
-  const continueCallbackMock = jest.fn();
+  const cancelHandlerMock = jest.fn();
+  const handleInputChangeMock = jest.fn();
 
   const props = {
     port: "Port",
     terminal: "Terminal",
+    message: "Message",
     minStaffNumber: 10,
     handleSubmit: handleSubmitMock,
-    continueCallback: continueCallbackMock
+    cancelHandler: cancelHandlerMock,
+    handleInputChange: handleInputChangeMock
+
   };
 
   it("renders min staff form correctly", () => {
-    const {getByTestId} = render(<MinStaffForm {...props} />);
+    const { getByTestId } = render(<MinStaffForm {...props} />);
     expect(getByTestId('min-staff-form')).toBeInTheDocument();
   });
 
   it("handles min staff number submission with valid input", async () => {
-    const {getByTestId} = render(<MinStaffForm {...props} />);
-    const input = getByTestId("min-staff-number-input");
+    render(<MinStaffForm {...props} />);
 
-    fireEvent.change(input, {target: {value: '20'}});
-    fireEvent.click(getByTestId('min-staff-form-submit'));
-
-    await waitFor(() => {
-      expect(handleSubmitMock).toHaveBeenCalledWith(20);
-    });
-  });
+    const input = screen.getByRole('textbox');
 
-  it("shows error when min staff number is not a valid number", async () => {
-    const {getByTestId} = render(<MinStaffForm {...props} />);
-    const input = getByTestId("min-staff-number-input");
+    fireEvent.change(input, {target: {value: '20'}});
 
-    fireEvent.change(input, {target: {value: 'invalid'}});
-    fireEvent.click(getByTestId('min-staff-form-submit'));
+    fireEvent.click(screen.getByTestId('min-staff-form-submit'));
 
     await waitFor(() => {
-      expect(getByTestId('min-staff-number-error')).toBeInTheDocument();
+      expect(handleSubmitMock).toHaveBeenCalledWith(20);
     });
   });
 
@@ -49,7 +43,7 @@ describe("MinStaffForm", () => {
     });
 
     const {getByTestId} = render(<MinStaffForm {...props} />);
-    const input = getByTestId("min-staff-number-input");
+    const input = screen.getByRole('textbox');
 
     fireEvent.change(input, {target: {value: '20'}});
     fireEvent.click(getByTestId('min-staff-form-submit'));

From 89dc1aa359ecdc4a6fc663ba3713aff4a4f799a9 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 26 Sep 2024 23:02:15 +0100
Subject: [PATCH 19/43] Initial submit shift staff form

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 package-lock.json                             | 276 +++++++++++++++---
 package.json                                  |   8 +
 .../Staff/ShiftStaffForm.stories.tsx          |  43 +++
 src/components/Staff/ShiftStaffForm.tsx       | 153 ++++++++++
 4 files changed, 433 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Staff/ShiftStaffForm.stories.tsx
 create mode 100644 src/components/Staff/ShiftStaffForm.tsx

diff --git a/package-lock.json b/package-lock.json
index 2efd7fc..9b9b767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,13 +17,18 @@
         "@mui/icons-material": "5.16.5",
         "@mui/lab": "5.0.0-alpha.119",
         "@mui/material": "5.16.5",
+        "@mui/x-date-pickers": "^6.20.2",
         "@storybook/addon-a11y": "^8.1.10",
         "@storybook/icons": "^1.2.9",
         "@svgr/webpack": "^8.1.0",
         "css-loader": "^7.1.2",
         "css-mediaquery": "^0.1.2",
+        "dayjs": "^1.11.13",
         "esbuild": "^0.24.0",
         "install-peers": "^1.0.4",
+        "moment": "^2.29.4",
+        "moment-timezone": "^0.5.43",
+        "momentjs": "^2.0.0",
         "postcss": "^8.4.38",
         "sass-loader": "^14.2.1",
         "style-loader": "^4.0.0"
@@ -71,6 +76,9 @@
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "jest-svg-transformer": "^1.0.0",
+        "moment": "^2.29.4",
+        "moment-timezone": "^0.5.43",
+        "momentjs": "^2.0.0",
         "prop-types": "^15.8.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -1918,8 +1926,9 @@
       "license": "MIT"
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.7",
-      "license": "MIT",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1999,7 +2008,7 @@
     },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
@@ -2017,12 +2026,12 @@
     },
     "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
       "version": "1.9.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
       "version": "4.0.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -2033,7 +2042,7 @@
     },
     "node_modules/@emotion/babel-plugin/node_modules/source-map": {
       "version": "0.5.7",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2041,7 +2050,6 @@
     },
     "node_modules/@emotion/cache": {
       "version": "11.11.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.8.1",
@@ -2053,12 +2061,12 @@
     },
     "node_modules/@emotion/hash": {
       "version": "0.9.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
@@ -2066,12 +2074,11 @@
     },
     "node_modules/@emotion/memoize": {
       "version": "0.8.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@emotion/react": {
       "version": "11.11.4",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -2094,7 +2101,7 @@
     },
     "node_modules/@emotion/serialize": {
       "version": "1.1.4",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@emotion/hash": "^0.9.1",
@@ -2106,12 +2113,11 @@
     },
     "node_modules/@emotion/sheet": {
       "version": "1.2.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@emotion/styled": {
       "version": "11.11.5",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -2133,12 +2139,12 @@
     },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "react": ">=16.8.0"
@@ -2146,12 +2152,10 @@
     },
     "node_modules/@emotion/utils": {
       "version": "1.2.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.3.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -2616,6 +2620,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@fontsource/material-icons": {
       "version": "5.0.18",
       "license": "Apache-2.0"
@@ -3179,7 +3217,6 @@
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
       "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
-      "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
@@ -3255,7 +3292,6 @@
       "version": "5.16.5",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.5.tgz",
       "integrity": "sha512-eQrjjg4JeczXvh/+8yvJkxWIiKNHVptB/AqpsKfZBWp5mUD5U3VsjODMuUl1K2BSq0omV3CiO/mQmWSSMKSmaA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/core-downloads-tracker": "^5.16.5",
@@ -3300,7 +3336,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3309,7 +3344,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz",
       "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/utils": "^5.16.6",
@@ -3336,7 +3370,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz",
       "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@emotion/cache": "^11.11.0",
@@ -3368,7 +3401,6 @@
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
       "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/private-theming": "^5.16.6",
@@ -3406,7 +3438,6 @@
     },
     "node_modules/@mui/system/node_modules/clsx": {
       "version": "2.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -3416,7 +3447,6 @@
       "version": "7.2.16",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz",
       "integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==",
-      "dev": true,
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3430,7 +3460,6 @@
       "version": "5.16.6",
       "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
       "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/types": "^7.2.15",
@@ -3460,7 +3489,139 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "6.20.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.20.2.tgz",
+      "integrity": "sha512-x1jLg8R+WhvkmUETRfX2wC+xJreMii78EXKLl6r3G+ggcAZlPyt0myID1Amf6hvJb9CtR7CgUo8BwR+1Vx9Ggw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "^5.0.0-beta.22",
+        "@mui/utils": "^5.14.16",
+        "@types/react-transition-group": "^4.4.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.8.6",
+        "@mui/system": "^5.8.0",
+        "date-fns": "^2.25.0 || ^3.2.0",
+        "date-fns-jalali": "^2.13.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/base": {
+      "version": "5.0.0-beta.58",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.58.tgz",
+      "integrity": "sha512-P0E7ZrxOuyYqBvVv9w8k7wm+Xzx/KRu+BGgFcR2htTsGCpJNQJCSUXNUZ50MUmSU9hzqhwbQWNXhV1MBTl6F7A==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@floating-ui/react-dom": "^2.1.1",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "6.0.0-rc.0",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/base/node_modules/@mui/utils": {
+      "version": "6.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.0-rc.0.tgz",
+      "integrity": "sha512-tBp0ILEXDL0bbDDT8PnZOjCqSm5Dfk2N0Z45uzRw+wVl6fVvloC9zw8avl+OdX1Bg3ubs/ttKn8nRNv17bpM5A==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/x-date-pickers/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "engines": {
         "node": ">=6"
       }
@@ -3518,7 +3679,6 @@
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -7412,7 +7572,7 @@
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/pretty-hrtime": {
@@ -7422,7 +7582,6 @@
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/qs": {
@@ -7437,7 +7596,6 @@
     },
     "node_modules/@types/react": {
       "version": "18.3.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -7454,7 +7612,6 @@
     },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -8603,7 +8760,7 @@
     },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -8617,7 +8774,7 @@
     },
     "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
       "version": "7.1.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -9770,7 +9927,6 @@
     },
     "node_modules/csstype": {
       "version": "3.1.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -9834,6 +9990,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.5",
       "license": "MIT",
@@ -10118,7 +10279,6 @@
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.7",
@@ -11300,7 +11460,7 @@
     },
     "node_modules/find-root": {
       "version": "1.1.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/find-up": {
@@ -12062,7 +12222,7 @@
     },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "react-is": "^16.7.0"
@@ -12070,7 +12230,7 @@
     },
     "node_modules/hoist-non-react-statics/node_modules/react-is": {
       "version": "16.13.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/hosted-git-info": {
@@ -14288,6 +14448,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "devOptional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.45",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.45.tgz",
+      "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==",
+      "dev": true,
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/momentjs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/momentjs/-/momentjs-2.0.0.tgz",
+      "integrity": "sha512-GYMUxLyCwVhECkJR1/LMHEyb9gWYSPRnXi+elGN0m5bet7ngQOxU4QLWUI/eBzgN4N/T194n6yP7lQiE+Udw9A==",
+      "deprecated": "WARNING: The correct package name for Moment.js is 'moment', not 'momentjs'.",
+      "dev": true
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "license": "MIT"
@@ -14598,7 +14786,6 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -15811,7 +15998,6 @@
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -15821,7 +16007,6 @@
     },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/proxy-addr": {
@@ -16078,7 +16263,6 @@
     },
     "node_modules/react-is": {
       "version": "18.3.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-remove-scroll": {
@@ -16150,7 +16334,6 @@
     },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
-      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
@@ -17413,7 +17596,6 @@
     },
     "node_modules/stylis": {
       "version": "4.2.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/supports-color": {
@@ -18783,7 +18965,7 @@
     },
     "node_modules/yaml": {
       "version": "1.10.2",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "engines": {
         "node": ">= 6"
diff --git a/package.json b/package.json
index f441294..b86d4bc 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,9 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-svg-transformer": "^1.0.0",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "momentjs": "^2.0.0",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -98,11 +101,16 @@
     "@mui/icons-material": "5.16.5",
     "@mui/lab": "5.0.0-alpha.119",
     "@mui/material": "5.16.5",
+    "@mui/x-date-pickers": "^6.20.2",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "momentjs": "^2.0.0",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/icons": "^1.2.9",
     "@svgr/webpack": "^8.1.0",
     "css-loader": "^7.1.2",
     "css-mediaquery": "^0.1.2",
+    "dayjs": "^1.11.13",
     "esbuild": "^0.24.0",
     "install-peers": "^1.0.4",
     "postcss": "^8.4.38",
diff --git a/src/components/Staff/ShiftStaffForm.stories.tsx b/src/components/Staff/ShiftStaffForm.stories.tsx
new file mode 100644
index 0000000..9bda582
--- /dev/null
+++ b/src/components/Staff/ShiftStaffForm.stories.tsx
@@ -0,0 +1,43 @@
+import moment from 'moment';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ShiftStaffForm as ShiftStaffFormComponent} from "./ShiftStaffForm";
+import {Moment} from "moment/moment";
+
+const meta: Meta<typeof ShiftStaffFormComponent> = {
+  title: "DRT Components/ShiftStaffFormComponent",
+  component: ShiftStaffFormComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ShiftStaffFormComponent>;
+
+export const ShiftStaffForm = {
+  args: {
+    shiftName: 'Shift 1',
+    port: "Birmingham (BHX)",
+    minimumRosteredStaff: null,
+    terminal: 'Terminal 1',
+    actualStaff: 1,
+    startAt: moment(),
+    periodInMinutes: 30,
+    endAt: moment().add(1, 'hour'),
+    frequency: 'daily',
+    email: 'someone@example.com',
+    handleSubmit: (port: string,
+                   terminal: string,
+                   shiftName: string,
+                   startAt: Moment,
+                   periodInMinutes: number,
+                   endAt: Moment | null,
+                   frequency: string | null,
+                   actualStaff: number | null,
+                   minimumRosteredStaff: number,
+                   email: string) => {
+      console.log('Submit clicked', port, terminal, shiftName, startAt, periodInMinutes, endAt, frequency, actualStaff, minimumRosteredStaff, email);
+    },
+    cancelHandler: () => {
+      console.log('Cancel clicked');
+    },
+  }
+};
diff --git a/src/components/Staff/ShiftStaffForm.tsx b/src/components/Staff/ShiftStaffForm.tsx
new file mode 100644
index 0000000..c7758ff
--- /dev/null
+++ b/src/components/Staff/ShiftStaffForm.tsx
@@ -0,0 +1,153 @@
+import React, {useState} from "react";
+import {Box, Button, Link, TextField, Typography, Select, MenuItem} from "@mui/material";
+import {Moment} from "moment";
+import {TimePicker} from '@mui/x-date-pickers/TimePicker';
+import {DatePicker} from '@mui/x-date-pickers/DatePicker';
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+
+export type IShiftStaffForm = {
+  port: string,
+  terminal: string,
+  shiftName: string,
+  startAt: Moment,
+  periodInMinutes: number,
+  endAt: Moment | null,
+  frequency: string | null,
+  actualStaff: number | null,
+  minimumRosteredStaff: number,
+  email: string
+}
+
+export interface ShiftStaffFormData {
+  port: string,
+  terminal: string,
+  shiftName: string,
+  startAt: Moment,
+  periodInMinutes: number,
+  endAt: Moment | null,
+  frequency: string | null,
+  actualStaff: number | null,
+  minimumRosteredStaff: number,
+  email: string,
+  handleSubmit: (port: string,
+                 terminal: string,
+                 shiftName: string,
+                 startAt: moment.Moment,
+                 periodInMinutes: number,
+                 endAt: moment.Moment | null,
+                 frequency: string | null,
+                 actualStaff: number | null,
+                 minimumRosteredStaff: number,
+                 email: string) => void,
+  cancelHandler: () => void
+}
+
+export const ShiftStaffForm = ({port, terminal, shiftName, startAt, periodInMinutes, endAt, frequency, actualStaff, minimumRosteredStaff, email, handleSubmit, cancelHandler}:ShiftStaffFormData) => {
+  const [newShiftName, setNewShiftName] = useState<string>(shiftName);
+  const [selectedDate, setSelectedDate] = useState<Moment>(startAt);
+  const [endDate, setEndDate] = useState<Moment | null>(endAt);
+  const [startTime, setStartTime] = useState<Moment | null>(null);
+  const [endTime, setEndTime] = useState<Moment | null>(null);
+  const [selectedFrequency, setSelectedFrequency] = useState<string | null>(frequency ? frequency : 'daily');
+  const [staffNumber, setStaffNumber] = useState<number>(actualStaff ? actualStaff : 0);
+  const [showEndDatePicker, setShowEndDatePicker] = useState(false);
+
+  const handleEndDateLinkClick = (event) => {
+    event.preventDefault();
+    setShowEndDatePicker(true);
+  };
+
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
+    setShowEndDatePicker(false);
+  };
+
+  const handleDateChange = (date: Moment | null) => {
+    setSelectedDate(date);
+  };
+
+  const handleStartTimeChange = (date: Moment | null) => {
+    setStartTime(date);
+  };
+
+  const handleEndTimeChange = (date: Moment | null) => {
+    setEndTime(date);
+  };
+
+  const handleFrequencyChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setSelectedFrequency(event.target.value as string);
+  };
+
+  const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStaffNumber(event.target.value as number);
+  };
+
+  const handleShiftNameChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setNewShiftName(event.target.value as string);
+  };
+
+  const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
+    handleSubmit(port, terminal, newShiftName, selectedDate, periodInMinutes, endTime, selectedFrequency, staffNumber, minimumRosteredStaff, email)
+  }
+
+
+  return <Box data-testid={`shift-staff-form`}
+              sx={{
+                paddingTop: '10px',
+                paddingLeft: '20px',
+                paddingBottom: '10px',
+                backgroundColor: '#B4B5BE',
+                border: '1px solid black'
+              }}>
+    <Typography variant="h2" component="h2">Add Shift</Typography>
+    <TextField sx={{backgroundColor: '#FFFFFF'}} label="Shift name" value={newShiftName}
+               onChange={handleShiftNameChange}/>
+    <Box sx={{paddingTop: '10px'}}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Date" value={selectedDate} onChange={handleDateChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Time"
+                    value={startTime} onChange={handleStartTimeChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF'}} label="End Time"
+                    value={endTime} onChange={handleEndTimeChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Select value={selectedFrequency} onChange={handleFrequencyChange}
+              sx={{backgroundColor: '#FFFFFF', width: '150px', paddingTop: '10px'}}>
+        <MenuItem value={'daily'}>Daily</MenuItem>
+        <MenuItem value={'weekly'}>Weekly</MenuItem>
+        <MenuItem value={'monthly'}>Monthly</MenuItem>
+      </Select>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      {showEndDatePicker ? (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
+                      renderInput={(params) => <TextField {...params} />}/>
+        </LocalizationProvider>
+      ) : (
+        <Link href="#" onClick={handleEndDateLinkClick}>Set End Date</Link>
+      )}
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <TextField sx={{backgroundColor: '#FFFFFF'}} label="Staff Number"
+                 value={staffNumber}
+                 onChange={handleStaffNumberChange} type="number"/>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Button sx={{paddingLeft: '10px'}} onClick={handleSubmitForm}>Add staff</Button>
+      <Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>
+    </Box>
+  </Box>
+
+}

From 19a3ae694b4705c33c30490c49646b0ae8ffd491 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 27 Sep 2024 10:58:08 +0100
Subject: [PATCH 20/43] DRTII-1557 adding json for handle submit

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/ShiftStaffForm.stories.tsx | 14 +++++++++++++-
 src/components/Staff/ShiftStaffForm.tsx         | 16 +++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/Staff/ShiftStaffForm.stories.tsx b/src/components/Staff/ShiftStaffForm.stories.tsx
index 9bda582..fe43dd0 100644
--- a/src/components/Staff/ShiftStaffForm.stories.tsx
+++ b/src/components/Staff/ShiftStaffForm.stories.tsx
@@ -34,7 +34,19 @@ export const ShiftStaffForm = {
                    actualStaff: number | null,
                    minimumRosteredStaff: number,
                    email: string) => {
-      console.log('Submit clicked', port, terminal, shiftName, startAt, periodInMinutes, endAt, frequency, actualStaff, minimumRosteredStaff, email);
+        const json = {
+        'port': port,
+        'terminal': terminal,
+        'shiftName': shiftName,
+        'startAt': startAt.valueOf(),
+        'periodInMinutes': periodInMinutes,
+        'endAt': endAt?.valueOf(),
+        'frequency': frequency,
+        'actualStaff': actualStaff,
+        'minimumRosteredStaff': minimumRosteredStaff,
+        'email': email
+      }
+      console.log('Submit clicked',json);
     },
     cancelHandler: () => {
       console.log('Cancel clicked');
diff --git a/src/components/Staff/ShiftStaffForm.tsx b/src/components/Staff/ShiftStaffForm.tsx
index c7758ff..6185eca 100644
--- a/src/components/Staff/ShiftStaffForm.tsx
+++ b/src/components/Staff/ShiftStaffForm.tsx
@@ -88,7 +88,21 @@ export const ShiftStaffForm = ({port, terminal, shiftName, startAt, periodInMinu
   };
 
   const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
-    handleSubmit(port, terminal, newShiftName, selectedDate, periodInMinutes, endTime, selectedFrequency, staffNumber, minimumRosteredStaff, email)
+    const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
+    console.log("endTime.valueOf",endTime.valueOf())
+    console.log("startTime.valueOf",startTime.valueOf())
+    console.log("selectedDate",selectedDate.valueOf())
+    console.log("difference",startTime.valueOf()-selectedDate.valueOf())
+    handleSubmit(port = port,
+      terminal=  terminal,
+      shiftName= newShiftName,
+      startAt = selectedDate,
+      periodInMinutes = diffInMinutes,
+      endAt = endDate,
+      frequency = selectedFrequency,
+      actualStaff =  staffNumber,
+      minimumRosteredStaff =minimumRosteredStaff,
+      email = email)
   }
 
 

From 3946ffe090aed05d875d64f2a852bd5c2cfff90d Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 27 Sep 2024 14:18:56 +0100
Subject: [PATCH 21/43] using IShiftStaffForm instead if individual fields

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 .../Staff/ShiftStaffForm.stories.tsx          | 74 ++++++++++---------
 src/components/Staff/ShiftStaffForm.tsx       | 67 +++++++----------
 2 files changed, 66 insertions(+), 75 deletions(-)

diff --git a/src/components/Staff/ShiftStaffForm.stories.tsx b/src/components/Staff/ShiftStaffForm.stories.tsx
index fe43dd0..4c16461 100644
--- a/src/components/Staff/ShiftStaffForm.stories.tsx
+++ b/src/components/Staff/ShiftStaffForm.stories.tsx
@@ -1,6 +1,6 @@
 import moment from 'moment';
 import type {Meta, StoryObj} from '@storybook/react';
-import {ShiftStaffForm as ShiftStaffFormComponent} from "./ShiftStaffForm";
+import {IShiftStaffForm, ShiftStaffForm as ShiftStaffFormComponent} from "./ShiftStaffForm";
 import {Moment} from "moment/moment";
 
 const meta: Meta<typeof ShiftStaffFormComponent> = {
@@ -12,41 +12,47 @@ export default meta;
 
 type Story = StoryObj<typeof ShiftStaffFormComponent>;
 
+const ssform: IShiftStaffForm = {
+  shiftName: 'Shift 1',
+  port: "Birmingham (BHX)",
+  minimumRosteredStaff: null,
+  terminal: 'Terminal 1',
+  actualStaff: 1,
+  startAt: moment(),
+  periodInMinutes: 30,
+  endAt: moment().add(1, 'hour'),
+  frequency: 'daily',
+  email: 'someone@example.com'
+}
+
 export const ShiftStaffForm = {
+
   args: {
-    shiftName: 'Shift 1',
-    port: "Birmingham (BHX)",
-    minimumRosteredStaff: null,
-    terminal: 'Terminal 1',
-    actualStaff: 1,
-    startAt: moment(),
-    periodInMinutes: 30,
-    endAt: moment().add(1, 'hour'),
-    frequency: 'daily',
-    email: 'someone@example.com',
-    handleSubmit: (port: string,
-                   terminal: string,
-                   shiftName: string,
-                   startAt: Moment,
-                   periodInMinutes: number,
-                   endAt: Moment | null,
-                   frequency: string | null,
-                   actualStaff: number | null,
-                   minimumRosteredStaff: number,
-                   email: string) => {
-        const json = {
-        'port': port,
-        'terminal': terminal,
-        'shiftName': shiftName,
-        'startAt': startAt.valueOf(),
-        'periodInMinutes': periodInMinutes,
-        'endAt': endAt?.valueOf(),
-        'frequency': frequency,
-        'actualStaff': actualStaff,
-        'minimumRosteredStaff': minimumRosteredStaff,
-        'email': email
-      }
-      console.log('Submit clicked',json);
+    ssf: ssform,
+    handleSubmit: (ssf: IShiftStaffForm) => {
+      // port: string,
+      //  terminal: string,
+      //  shiftName: string,
+      //  startAt: Moment,
+      //  periodInMinutes: number,
+      //  endAt: Moment | null,
+      //  frequency: string | null,
+      //  actualStaff: number | null,
+      //  minimumRosteredStaff: number,
+      //  email: string) => {
+      //   const json = {
+      //   'port': port,
+      //   'terminal': terminal,
+      //   'shiftName': shiftName,
+      //   'startAt': startAt.valueOf(),
+      //   'periodInMinutes': periodInMinutes,
+      //   'endAt': endAt?.valueOf(),
+      //   'frequency': frequency,
+      //   'actualStaff': actualStaff,
+      //   'minimumRosteredStaff': minimumRosteredStaff,
+      //   'email': email
+      // }
+      console.log('Submit clicked', ssf);
     },
     cancelHandler: () => {
       console.log('Cancel clicked');
diff --git a/src/components/Staff/ShiftStaffForm.tsx b/src/components/Staff/ShiftStaffForm.tsx
index 6185eca..54820cc 100644
--- a/src/components/Staff/ShiftStaffForm.tsx
+++ b/src/components/Staff/ShiftStaffForm.tsx
@@ -15,42 +15,24 @@ export type IShiftStaffForm = {
   endAt: Moment | null,
   frequency: string | null,
   actualStaff: number | null,
-  minimumRosteredStaff: number,
+  minimumRosteredStaff: number | null,
   email: string
 }
 
 export interface ShiftStaffFormData {
-  port: string,
-  terminal: string,
-  shiftName: string,
-  startAt: Moment,
-  periodInMinutes: number,
-  endAt: Moment | null,
-  frequency: string | null,
-  actualStaff: number | null,
-  minimumRosteredStaff: number,
-  email: string,
-  handleSubmit: (port: string,
-                 terminal: string,
-                 shiftName: string,
-                 startAt: moment.Moment,
-                 periodInMinutes: number,
-                 endAt: moment.Moment | null,
-                 frequency: string | null,
-                 actualStaff: number | null,
-                 minimumRosteredStaff: number,
-                 email: string) => void,
+  ssf: IShiftStaffForm,
+  handleSubmit: (ssf: IShiftStaffForm) => void,
   cancelHandler: () => void
 }
 
-export const ShiftStaffForm = ({port, terminal, shiftName, startAt, periodInMinutes, endAt, frequency, actualStaff, minimumRosteredStaff, email, handleSubmit, cancelHandler}:ShiftStaffFormData) => {
-  const [newShiftName, setNewShiftName] = useState<string>(shiftName);
-  const [selectedDate, setSelectedDate] = useState<Moment>(startAt);
-  const [endDate, setEndDate] = useState<Moment | null>(endAt);
+export const ShiftStaffForm = ({ssf, handleSubmit, cancelHandler}: ShiftStaffFormData) => {
+  const [newShiftName, setNewShiftName] = useState<string>(ssf.shiftName);
+  const [selectedDate, setSelectedDate] = useState<Moment>(ssf.startAt);
+  const [endDate, setEndDate] = useState<Moment | null>(ssf.endAt);
   const [startTime, setStartTime] = useState<Moment | null>(null);
   const [endTime, setEndTime] = useState<Moment | null>(null);
-  const [selectedFrequency, setSelectedFrequency] = useState<string | null>(frequency ? frequency : 'daily');
-  const [staffNumber, setStaffNumber] = useState<number>(actualStaff ? actualStaff : 0);
+  const [selectedFrequency, setSelectedFrequency] = useState<string | null>(ssf.frequency ? ssf.frequency : 'daily');
+  const [staffNumber, setStaffNumber] = useState<number>(ssf.actualStaff ? ssf.actualStaff : 0);
   const [showEndDatePicker, setShowEndDatePicker] = useState(false);
 
   const handleEndDateLinkClick = (event) => {
@@ -89,20 +71,23 @@ export const ShiftStaffForm = ({port, terminal, shiftName, startAt, periodInMinu
 
   const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
     const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
-    console.log("endTime.valueOf",endTime.valueOf())
-    console.log("startTime.valueOf",startTime.valueOf())
-    console.log("selectedDate",selectedDate.valueOf())
-    console.log("difference",startTime.valueOf()-selectedDate.valueOf())
-    handleSubmit(port = port,
-      terminal=  terminal,
-      shiftName= newShiftName,
-      startAt = selectedDate,
-      periodInMinutes = diffInMinutes,
-      endAt = endDate,
-      frequency = selectedFrequency,
-      actualStaff =  staffNumber,
-      minimumRosteredStaff =minimumRosteredStaff,
-      email = email)
+    console.log("endTime.valueOf", endTime.valueOf())
+    console.log("startTime.valueOf", startTime.valueOf())
+    console.log("selectedDate", selectedDate.valueOf())
+    console.log("difference", startTime.valueOf() - selectedDate.valueOf())
+    const ssform: IShiftStaffForm = {
+      port: ssf.port,
+      terminal: ssf.terminal,
+      shiftName: newShiftName,
+      startAt: selectedDate,
+      periodInMinutes: diffInMinutes,
+      endAt: endDate,
+      frequency: selectedFrequency,
+      actualStaff: staffNumber,
+      minimumRosteredStaff: ssf.minimumRosteredStaff,
+      email: ssf.email
+    };
+    handleSubmit(ssform);
   }
 
 

From 6a291ba1476c2f7d6791dd429f34cc95e3f2f597 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Sun, 29 Sep 2024 15:25:40 +0100
Subject: [PATCH 22/43] addin export for shift staff to index

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/index.ts | 3 ++-
 src/components/index.ts       | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
index 4bf4919..86f1f7a 100644
--- a/src/components/Staff/index.ts
+++ b/src/components/Staff/index.ts
@@ -4,4 +4,5 @@ export {MinStaffSuccess} from './MinStaffSuccess'
 export type {IMinStaffSuccess} from './MinStaffSuccess'
 export type {IMinStaffWarning} from './MinStaffWarning'
 export type {IMinStaffForm} from './MinStaffForm'
-
+export type {IShiftStaffForm, ShiftStaffFormData} from './ShiftStaffForm'
+export {ShiftStaffForm} from './ShiftStaffForm'
diff --git a/src/components/index.ts b/src/components/index.ts
index d44157e..db8a3c8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,3 +11,6 @@ export type {IHeader, MenuItem} from './Header';
 
 export {MinStaffSuccess, MinStaffWarning, MinStaffForm} from './Staff'
 export type {IMinStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'
+
+export type {IShiftStaffForm, ShiftStaffFormData} from './Staff'
+export {ShiftStaffForm} from './Staff'

From 162751113784f639aa9e83383ae641bc5bf1a8bc Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Sun, 29 Sep 2024 22:17:13 +0100
Subject: [PATCH 23/43] adding optional ssf

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/ShiftStaffForm.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Staff/ShiftStaffForm.tsx b/src/components/Staff/ShiftStaffForm.tsx
index 54820cc..a1fd811 100644
--- a/src/components/Staff/ShiftStaffForm.tsx
+++ b/src/components/Staff/ShiftStaffForm.tsx
@@ -20,19 +20,19 @@ export type IShiftStaffForm = {
 }
 
 export interface ShiftStaffFormData {
-  ssf: IShiftStaffForm,
+  ssf: IShiftStaffForm | null,
   handleSubmit: (ssf: IShiftStaffForm) => void,
   cancelHandler: () => void
 }
 
 export const ShiftStaffForm = ({ssf, handleSubmit, cancelHandler}: ShiftStaffFormData) => {
-  const [newShiftName, setNewShiftName] = useState<string>(ssf.shiftName);
-  const [selectedDate, setSelectedDate] = useState<Moment>(ssf.startAt);
-  const [endDate, setEndDate] = useState<Moment | null>(ssf.endAt);
+  const [newShiftName, setNewShiftName] = useState<string>(ssf?.shiftName);
+  const [selectedDate, setSelectedDate] = useState<Moment>(ssf?.startAt);
+  const [endDate, setEndDate] = useState<Moment | null>(ssf?.endAt);
   const [startTime, setStartTime] = useState<Moment | null>(null);
   const [endTime, setEndTime] = useState<Moment | null>(null);
-  const [selectedFrequency, setSelectedFrequency] = useState<string | null>(ssf.frequency ? ssf.frequency : 'daily');
-  const [staffNumber, setStaffNumber] = useState<number>(ssf.actualStaff ? ssf.actualStaff : 0);
+  const [selectedFrequency, setSelectedFrequency] = useState<string | null>(ssf?.frequency ? ssf?.frequency : 'daily');
+  const [staffNumber, setStaffNumber] = useState<number>(ssf?.actualStaff ? ssf?.actualStaff : 0);
   const [showEndDatePicker, setShowEndDatePicker] = useState(false);
 
   const handleEndDateLinkClick = (event) => {

From f002b187d11fca6de7d14efad18402823cdecba2 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Tue, 1 Oct 2024 21:46:30 +0100
Subject: [PATCH 24/43] adding edit shift staff form

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 .../Staff/EditShiftStaffForm.stories.tsx      |  33 ++++++
 src/components/Staff/EditShiftStaffForm.tsx   | 102 ++++++++++++++++++
 .../Staff/ShiftStaffForm.stories.tsx          |  22 ----
 src/components/Staff/index.ts                 |   2 +
 src/components/index.ts                       |   3 +
 5 files changed, 140 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Staff/EditShiftStaffForm.stories.tsx
 create mode 100644 src/components/Staff/EditShiftStaffForm.tsx

diff --git a/src/components/Staff/EditShiftStaffForm.stories.tsx b/src/components/Staff/EditShiftStaffForm.stories.tsx
new file mode 100644
index 0000000..196aea0
--- /dev/null
+++ b/src/components/Staff/EditShiftStaffForm.stories.tsx
@@ -0,0 +1,33 @@
+import moment from 'moment';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Moment} from "moment/moment";
+import type {IEditShiftStaff, IEditShiftStaffForm} from './EditShiftStaffForm'
+import {EditShiftStaffForm as EditShiftStaffFormComponent} from './EditShiftStaffForm'
+
+const meta: Meta<typeof EditShiftStaffFormComponent> = {
+  title: "DRT Components/EditShiftStaffFormComponent",
+  component: EditShiftStaffFormComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EditShiftStaffFormComponent>;
+
+const essform: IEditShiftStaff = {
+  actualStaff: 1,
+  dayAt: moment(),
+  startTime: moment(),
+  endTime: moment().add(1, 'hour'),
+}
+
+export const EditShiftStaffForm = {
+  args: {
+    essf: essform,
+    handleSubmit: (essf: IEditShiftStaff) => {
+      console.log('Submit clicked', essf);
+    },
+    cancelHandler: () => {
+      console.log('Cancel clicked');
+    },
+  }
+};
diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
new file mode 100644
index 0000000..9a9475d
--- /dev/null
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -0,0 +1,102 @@
+import React, {useState} from "react";
+import {Box, Button, Link, TextField, Typography, Select, MenuItem} from "@mui/material";
+import {Moment} from "moment";
+import {TimePicker} from '@mui/x-date-pickers/TimePicker';
+import {DatePicker} from '@mui/x-date-pickers/DatePicker';
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+
+export type IEditShiftStaff = {
+  dayAt: Moment,
+  startTime: Moment | null,
+  endTime: Moment | null,
+  actualStaff: number | null
+}
+
+export interface IEditShiftStaffForm {
+  essf: IEditShiftStaff | null,
+  handleSubmit: (ssf: IEditShiftStaff) => void,
+  cancelHandler: () => void
+}
+
+export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShiftStaffForm) => {
+  const [selectedDate, setSelectedDate] = useState<Moment>(essf?.dayAt);
+  const [startTime, setStartTime] = useState<Moment | null>(null);
+  const [endTime, setEndTime] = useState<Moment | null>(null);
+  const [staffNumber, setStaffNumber] = useState<number>(essf?.actualStaff ? essf?.actualStaff : 0);
+
+  const handleDateChange = (date: Moment | null) => {
+    setSelectedDate(date);
+  };
+
+  const handleStartTimeChange = (date: Moment | null) => {
+    setStartTime(date);
+  };
+
+  const handleEndTimeChange = (date: Moment | null) => {
+    setEndTime(date);
+  };
+
+  const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStaffNumber(event.target.value as number);
+  };
+
+  const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
+    const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
+    console.log("endTime.valueOf", endTime.valueOf())
+    console.log("startTime.valueOf", startTime.valueOf())
+    console.log("selectedDate", selectedDate.valueOf())
+    console.log("difference", startTime.valueOf() - selectedDate.valueOf())
+    console.log("staffNumber", staffNumber)
+    const ess: IEditShiftStaff = {
+      dayAt: selectedDate,
+      startTime: startTime,
+      endTime: endTime,
+      actualStaff: staffNumber
+    };
+    handleSubmit(ess);
+  }
+
+
+  return <Box data-testid={`shift-staff-form`}
+              sx={{
+                paddingTop: '10px',
+                paddingLeft: '20px',
+                paddingBottom: '10px',
+                backgroundColor: '#B4B5BE',
+                border: '1px solid black',
+                width: '350px'
+              }}>
+    <Typography variant="h2" component="h2">Update staff</Typography>
+    <Box sx={{paddingTop: '10px'}}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Date" value={selectedDate} onChange={handleDateChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Time"
+                      value={startTime} onChange={handleStartTimeChange}
+                      renderInput={(params) => <TextField {...params} />}/>
+        </LocalizationProvider>
+      </Box>
+    <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="End Time"
+                      value={endTime} onChange={handleEndTimeChange}
+                      renderInput={(params) => <TextField {...params} />}/>
+        </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <TextField sx={{backgroundColor: '#FFFFFF'}} label="Staff Number"
+                 value={staffNumber}
+                 onChange={handleStaffNumberChange} type="number"/>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Button sx={{paddingLeft: '10px'}} onClick={handleSubmitForm}>Update staff</Button>
+      <Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>
+    </Box>
+  </Box>
+
+}
diff --git a/src/components/Staff/ShiftStaffForm.stories.tsx b/src/components/Staff/ShiftStaffForm.stories.tsx
index 4c16461..0b47186 100644
--- a/src/components/Staff/ShiftStaffForm.stories.tsx
+++ b/src/components/Staff/ShiftStaffForm.stories.tsx
@@ -30,28 +30,6 @@ export const ShiftStaffForm = {
   args: {
     ssf: ssform,
     handleSubmit: (ssf: IShiftStaffForm) => {
-      // port: string,
-      //  terminal: string,
-      //  shiftName: string,
-      //  startAt: Moment,
-      //  periodInMinutes: number,
-      //  endAt: Moment | null,
-      //  frequency: string | null,
-      //  actualStaff: number | null,
-      //  minimumRosteredStaff: number,
-      //  email: string) => {
-      //   const json = {
-      //   'port': port,
-      //   'terminal': terminal,
-      //   'shiftName': shiftName,
-      //   'startAt': startAt.valueOf(),
-      //   'periodInMinutes': periodInMinutes,
-      //   'endAt': endAt?.valueOf(),
-      //   'frequency': frequency,
-      //   'actualStaff': actualStaff,
-      //   'minimumRosteredStaff': minimumRosteredStaff,
-      //   'email': email
-      // }
       console.log('Submit clicked', ssf);
     },
     cancelHandler: () => {
diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
index 86f1f7a..31998b9 100644
--- a/src/components/Staff/index.ts
+++ b/src/components/Staff/index.ts
@@ -6,3 +6,5 @@ export type {IMinStaffWarning} from './MinStaffWarning'
 export type {IMinStaffForm} from './MinStaffForm'
 export type {IShiftStaffForm, ShiftStaffFormData} from './ShiftStaffForm'
 export {ShiftStaffForm} from './ShiftStaffForm'
+export type {IEditShiftStaff, IEditShiftStaffForm} from './EditShiftStaffForm'
+export {EditShiftStaffForm} from './EditShiftStaffForm'
diff --git a/src/components/index.ts b/src/components/index.ts
index db8a3c8..fa43046 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,3 +14,6 @@ export type {IMinStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'
 
 export type {IShiftStaffForm, ShiftStaffFormData} from './Staff'
 export {ShiftStaffForm} from './Staff'
+
+export type {IEditShiftStaff, IEditShiftStaffForm} from './Staff'
+export {EditShiftStaffForm} from './Staff'

From 660949cad7f17a2547d0220a093f5792416618b5 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Wed, 2 Oct 2024 11:41:24 +0100
Subject: [PATCH 25/43] updating minstaffSucces to staffSuccess

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/EditShiftStaffForm.tsx   | 26 ++++++++++++++++---
 .../Staff/MinStaffSucess.stories.tsx          | 20 --------------
 .../{MinStaffSuccess.tsx => StaffSuccess.tsx} |  8 +++---
 src/components/Staff/StaffSucess.stories.tsx  | 20 ++++++++++++++
 src/components/Staff/index.ts                 |  4 +--
 src/components/index.ts                       |  4 +--
 6 files changed, 50 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/Staff/MinStaffSucess.stories.tsx
 rename src/components/Staff/{MinStaffSuccess.tsx => StaffSuccess.tsx} (79%)
 create mode 100644 src/components/Staff/StaffSucess.stories.tsx

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 9a9475d..c4a25b9 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -1,10 +1,11 @@
 import React, {useState} from "react";
-import {Box, Button, Link, TextField, Typography, Select, MenuItem} from "@mui/material";
+import {Box, Button, Link, TextField, Typography, Select, MenuItem, IconButton} from "@mui/material";
 import {Moment} from "moment";
 import {TimePicker} from '@mui/x-date-pickers/TimePicker';
 import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import CloseIcon from "@mui/icons-material/Close";
 
 export type IEditShiftStaff = {
   dayAt: Moment,
@@ -67,7 +68,16 @@ export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShi
                 border: '1px solid black',
                 width: '350px'
               }}>
-    <Typography variant="h2" component="h2">Update staff</Typography>
+    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+      <Typography variant="h2" component="h2">Edit staff</Typography>
+      <IconButton
+      aria-label="close"
+      color="inherit"
+      size="small"
+      onClick={cancelHandler}>
+        <CloseIcon fontSize="inherit"/>
+      </IconButton>
+    </Box>
     <Box sx={{paddingTop: '10px'}}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Date" value={selectedDate} onChange={handleDateChange}
@@ -94,8 +104,16 @@ export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShi
                  onChange={handleStaffNumberChange} type="number"/>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-      <Button sx={{paddingLeft: '10px'}} onClick={handleSubmitForm}>Update staff</Button>
-      <Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>
+      <Button  sx={{
+        textTransform: 'none',
+        paddingLeft: '10px',
+        color: 'white',
+        backgroundColor: 'primary.main',
+        '&:hover': {
+          backgroundColor: 'primary.dark',
+        }
+      }}  onClick={handleSubmitForm}>Save staff updates</Button>
+      {/*<Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>*/}
     </Box>
   </Box>
 
diff --git a/src/components/Staff/MinStaffSucess.stories.tsx b/src/components/Staff/MinStaffSucess.stories.tsx
deleted file mode 100644
index 0b3bf3f..0000000
--- a/src/components/Staff/MinStaffSucess.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MinStaffSuccess as MinStaffSuccessComponent } from "./MinStaffSuccess";
-
-const meta: Meta<typeof MinStaffSuccessComponent> = {
-  title: "DRT Components/MinStaffSuccessComponent",
-  component: MinStaffSuccessComponent,
-};
-
-export default meta;
-type Story = StoryObj<typeof MinStaffSuccessComponent>;
-
-export const MinStaffSuccess: Story = {
-  args: {
-    minStaffNumber: 1,
-    message: "You updated the minimum staff number",
-    closeHandler: () => {
-      console.log("Close handler")
-    }
-  }
-};
diff --git a/src/components/Staff/MinStaffSuccess.tsx b/src/components/Staff/StaffSuccess.tsx
similarity index 79%
rename from src/components/Staff/MinStaffSuccess.tsx
rename to src/components/Staff/StaffSuccess.tsx
index ed80eac..708748f 100644
--- a/src/components/Staff/MinStaffSuccess.tsx
+++ b/src/components/Staff/StaffSuccess.tsx
@@ -3,13 +3,13 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 
-export interface IMinStaffSuccess {
-  minStaffNumber: number | null,
+export interface IStaffSuccess {
+  staffNumber: number | null,
   message: string,
   closeHandler: () => void
 }
 
-export const MinStaffSuccess = ({minStaffNumber, message, closeHandler}: IMinStaffSuccess) => {
+export const StaffSuccess = ({staffNumber, message, closeHandler}: IStaffSuccess) => {
   return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
     <Alert sx={{color: '#FFFFFF', backgroundColor: '#2E7D32'}} severity="success"
            action={
@@ -22,6 +22,6 @@ export const MinStaffSuccess = ({minStaffNumber, message, closeHandler}: IMinSta
                <CloseIcon fontSize="inherit"/>
              </IconButton>
            }
-           icon={<CheckCircleIcon style={{color: '#FFFFFF'}}/>}>{message} {minStaffNumber}</Alert>
+           icon={<CheckCircleIcon style={{color: '#FFFFFF'}}/>}>{message} {staffNumber}</Alert>
   </Box>
 }
diff --git a/src/components/Staff/StaffSucess.stories.tsx b/src/components/Staff/StaffSucess.stories.tsx
new file mode 100644
index 0000000..cf4eb1d
--- /dev/null
+++ b/src/components/Staff/StaffSucess.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StaffSuccess as StaffSuccessComponent } from "./StaffSuccess";
+
+const meta: Meta<typeof StaffSuccessComponent> = {
+  title: "DRT Components/StaffSuccessComponent",
+  component: StaffSuccessComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof StaffSuccessComponent>;
+
+export const StaffSuccess: Story = {
+  args: {
+    staffNumber: 1,
+    message: "You updated the staff number for selected date and time",
+    closeHandler: () => {
+      console.log("Close handler")
+    }
+  }
+};
diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
index 31998b9..57e7e07 100644
--- a/src/components/Staff/index.ts
+++ b/src/components/Staff/index.ts
@@ -1,7 +1,7 @@
 export {MinStaffWarning} from './MinStaffWarning'
 export {MinStaffForm} from './MinStaffForm'
-export {MinStaffSuccess} from './MinStaffSuccess'
-export type {IMinStaffSuccess} from './MinStaffSuccess'
+export {StaffSuccess} from './StaffSuccess'
+export type {IStaffSuccess} from './StaffSuccess'
 export type {IMinStaffWarning} from './MinStaffWarning'
 export type {IMinStaffForm} from './MinStaffForm'
 export type {IShiftStaffForm, ShiftStaffFormData} from './ShiftStaffForm'
diff --git a/src/components/index.ts b/src/components/index.ts
index fa43046..c2cd3cc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,8 +9,8 @@ export type {IStatusTag} from "./StatusTags";
 export {default as Header} from './Header'
 export type {IHeader, MenuItem} from './Header';
 
-export {MinStaffSuccess, MinStaffWarning, MinStaffForm} from './Staff'
-export type {IMinStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'
+export {StaffSuccess, MinStaffWarning, MinStaffForm} from './Staff'
+export type {IStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'
 
 export type {IShiftStaffForm, ShiftStaffFormData} from './Staff'
 export {ShiftStaffForm} from './Staff'

From a6a5f45b56898804e65788cc5735a6452a3b738f Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 3 Oct 2024 15:48:57 +0100
Subject: [PATCH 26/43] updating edit shif staff

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 .../Staff/EditShiftStaffForm.stories.tsx      | 13 ++-
 src/components/Staff/EditShiftStaffForm.tsx   | 94 +++++++++++--------
 2 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.stories.tsx b/src/components/Staff/EditShiftStaffForm.stories.tsx
index 196aea0..1bc3de7 100644
--- a/src/components/Staff/EditShiftStaffForm.stories.tsx
+++ b/src/components/Staff/EditShiftStaffForm.stories.tsx
@@ -15,15 +15,18 @@ type Story = StoryObj<typeof EditShiftStaffFormComponent>;
 
 const essform: IEditShiftStaff = {
   actualStaff: 1,
-  dayAt: moment(),
-  startTime: moment(),
-  endTime: moment().add(1, 'hour'),
+  startDayAt: moment(),
+  startTimeAt: moment(),
+  endTimeAt: moment().add(1, 'hour'),
+  endDayAt: moment().add(1, 'day')
 }
 
+
+
 export const EditShiftStaffForm = {
   args: {
-    essf: essform,
-    handleSubmit: (essf: IEditShiftStaff) => {
+    ess: essform,
+     handleSubmit: (essf: IEditShiftStaff) => {
       console.log('Submit clicked', essf);
     },
     cancelHandler: () => {
diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index c4a25b9..2f563fd 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -8,26 +8,37 @@ import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import CloseIcon from "@mui/icons-material/Close";
 
 export type IEditShiftStaff = {
-  dayAt: Moment,
-  startTime: Moment | null,
-  endTime: Moment | null,
+  startDayAt: Moment,
+  startTimeAt: Moment | null,
+  endTimeAt: Moment | null,
+  endDayAt: Moment | null,
   actualStaff: number | null
 }
 
+
 export interface IEditShiftStaffForm {
-  essf: IEditShiftStaff | null,
+  essf: IEditShiftStaff,
   handleSubmit: (ssf: IEditShiftStaff) => void,
   cancelHandler: () => void
 }
 
-export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShiftStaffForm) => {
-  const [selectedDate, setSelectedDate] = useState<Moment>(essf?.dayAt);
-  const [startTime, setStartTime] = useState<Moment | null>(null);
-  const [endTime, setEndTime] = useState<Moment | null>(null);
-  const [staffNumber, setStaffNumber] = useState<number>(essf?.actualStaff ? essf?.actualStaff : 0);
+export const EditShiftStaffForm = ({ essf,
+                                     handleSubmit,
+                                     cancelHandler
+                                   }: IEditShiftStaffForm) => {
+  const [startDate, setStartDate] = useState<Moment>(essf.startDayAt? essf.startDayAt : moment());
+  const [startTime, setStartTime] = useState<Moment | null>(essf.startTimeAt? essf.startTimeAt : moment());
+  const [endTime, setEndTime] = useState<Moment | null>(essf.endTimeAt? essf.endTimeAt : moment().add(1, 'hour'));
+  const [endDate, setEndDate] = useState<Moment | null>(essf.endDayAt? essf.endDayAt : moment().add(1, 'day'));
+  const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff? essf.actualStaff : 0);
+
+  const handleStartDateChange = (date: Moment) => {
+    setStartDate(date);
+    setEndDate(date);
+  };
 
-  const handleDateChange = (date: Moment | null) => {
-    setSelectedDate(date);
+  const handleEndDateChange = (date: Moment | null) => {
+    setEndDate(date);
   };
 
   const handleStartTimeChange = (date: Moment | null) => {
@@ -46,13 +57,14 @@ export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShi
     const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
     console.log("endTime.valueOf", endTime.valueOf())
     console.log("startTime.valueOf", startTime.valueOf())
-    console.log("selectedDate", selectedDate.valueOf())
-    console.log("difference", startTime.valueOf() - selectedDate.valueOf())
+    console.log("selectedDate", startDate.valueOf())
+    console.log("difference", startTime.valueOf() - startDate.valueOf())
     console.log("staffNumber", staffNumber)
     const ess: IEditShiftStaff = {
-      dayAt: selectedDate,
-      startTime: startTime,
-      endTime: endTime,
+      startDayAt: startDate,
+      startTimeAt: startTime,
+      endTimeAt: endTime,
+      endDayAt: endDate,
       actualStaff: staffNumber
     };
     handleSubmit(ess);
@@ -64,39 +76,44 @@ export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShi
                 paddingTop: '10px',
                 paddingLeft: '20px',
                 paddingBottom: '10px',
-                backgroundColor: '#B4B5BE',
+                // backgroundColor: '#B4B5BE',
                 border: '1px solid black',
-                width: '350px'
+                width: '370px'
               }}>
-    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+    <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
       <Typography variant="h2" component="h2">Edit staff</Typography>
       <IconButton
-      aria-label="close"
-      color="inherit"
-      size="small"
-      onClick={cancelHandler}>
+        aria-label="close"
+        color="inherit"
+        size="small"
+        onClick={cancelHandler}>
         <CloseIcon fontSize="inherit"/>
       </IconButton>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Date" value={selectedDate} onChange={handleDateChange}
+        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Date" value={startDate}
+                    onChange={handleStartDateChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker sx={{backgroundColor: '#FFFFFF', width: '150px'}} label="Start Time"
+                    value={startTime} onChange={handleStartTimeChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '150px'}} label="End Time"
+                    value={endTime} onChange={handleEndTimeChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Time"
-                      value={startTime} onChange={handleStartTimeChange}
-                      renderInput={(params) => <TextField {...params} />}/>
-        </LocalizationProvider>
-      </Box>
-    <Box sx={{paddingTop: '10px'}}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="End Time"
-                      value={endTime} onChange={handleEndTimeChange}
-                      renderInput={(params) => <TextField {...params} />}/>
-        </LocalizationProvider>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
       <TextField sx={{backgroundColor: '#FFFFFF'}} label="Staff Number"
@@ -104,7 +121,7 @@ export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShi
                  onChange={handleStaffNumberChange} type="number"/>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-      <Button  sx={{
+      <Button sx={{
         textTransform: 'none',
         paddingLeft: '10px',
         color: 'white',
@@ -112,8 +129,7 @@ export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShi
         '&:hover': {
           backgroundColor: 'primary.dark',
         }
-      }}  onClick={handleSubmitForm}>Save staff updates</Button>
-      {/*<Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>*/}
+      }} onClick={handleSubmitForm}>Save staff updates</Button>
     </Box>
   </Box>
 

From caaf814ae63ee607a9c98a4891577c0cb2c9a3e6 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Thu, 3 Oct 2024 23:09:23 +0100
Subject: [PATCH 27/43] remove moment in initialization

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/EditShiftStaffForm.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 2f563fd..3101620 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -26,12 +26,16 @@ export const EditShiftStaffForm = ({ essf,
                                      handleSubmit,
                                      cancelHandler
                                    }: IEditShiftStaffForm) => {
-  const [startDate, setStartDate] = useState<Moment>(essf.startDayAt? essf.startDayAt : moment());
-  const [startTime, setStartTime] = useState<Moment | null>(essf.startTimeAt? essf.startTimeAt : moment());
-  const [endTime, setEndTime] = useState<Moment | null>(essf.endTimeAt? essf.endTimeAt : moment().add(1, 'hour'));
-  const [endDate, setEndDate] = useState<Moment | null>(essf.endDayAt? essf.endDayAt : moment().add(1, 'day'));
-  const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff? essf.actualStaff : 0);
-
+  // const [startDate, setStartDate] = useState<Moment>(essf.startDayAt? essf.startDayAt : moment());
+  // const [startTime, setStartTime] = useState<Moment | null>(essf.startTimeAt? essf.startTimeAt : moment());
+  // const [endTime, setEndTime] = useState<Moment | null>(essf.endTimeAt? essf.endTimeAt : moment().add(1, 'hour'));
+  // const [endDate, setEndDate] = useState<Moment | null>(essf.endDayAt? essf.endDayAt : moment().add(1, 'day'));
+  // const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff? essf.actualStaff : 0);
+  const [startDate, setStartDate] = useState<Moment>(essf?.startDayAt);
+  const [startTime, setStartTime] = useState<Moment | null>(essf?.startTimeAt);
+  const [endTime, setEndTime] = useState<Moment | null>(null);
+  const [endDate, setEndDate] = useState<Moment | null>(null);
+  const [staffNumber, setStaffNumber] = useState<number>(0);
   const handleStartDateChange = (date: Moment) => {
     setStartDate(date);
     setEndDate(date);

From 3c3ec85b3e03a0f4b7a056593dbdd8794c60dfdb Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 4 Oct 2024 09:54:34 +0100
Subject: [PATCH 28/43] rename ess to essf

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 .../Staff/EditShiftStaffForm.stories.tsx      |  2 +-
 src/components/Staff/EditShiftStaffForm.tsx   | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.stories.tsx b/src/components/Staff/EditShiftStaffForm.stories.tsx
index 1bc3de7..8d4d485 100644
--- a/src/components/Staff/EditShiftStaffForm.stories.tsx
+++ b/src/components/Staff/EditShiftStaffForm.stories.tsx
@@ -25,7 +25,7 @@ const essform: IEditShiftStaff = {
 
 export const EditShiftStaffForm = {
   args: {
-    ess: essform,
+    essf: essform,
      handleSubmit: (essf: IEditShiftStaff) => {
       console.log('Submit clicked', essf);
     },
diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 3101620..ea0d81e 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -15,27 +15,27 @@ export type IEditShiftStaff = {
   actualStaff: number | null
 }
 
-
 export interface IEditShiftStaffForm {
   essf: IEditShiftStaff,
   handleSubmit: (ssf: IEditShiftStaff) => void,
   cancelHandler: () => void
 }
 
-export const EditShiftStaffForm = ({ essf,
+export const EditShiftStaffForm = ({
+                                     essf,
                                      handleSubmit,
                                      cancelHandler
                                    }: IEditShiftStaffForm) => {
-  // const [startDate, setStartDate] = useState<Moment>(essf.startDayAt? essf.startDayAt : moment());
-  // const [startTime, setStartTime] = useState<Moment | null>(essf.startTimeAt? essf.startTimeAt : moment());
-  // const [endTime, setEndTime] = useState<Moment | null>(essf.endTimeAt? essf.endTimeAt : moment().add(1, 'hour'));
-  // const [endDate, setEndDate] = useState<Moment | null>(essf.endDayAt? essf.endDayAt : moment().add(1, 'day'));
-  // const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff? essf.actualStaff : 0);
-  const [startDate, setStartDate] = useState<Moment>(essf?.startDayAt);
-  const [startTime, setStartTime] = useState<Moment | null>(essf?.startTimeAt);
-  const [endTime, setEndTime] = useState<Moment | null>(null);
-  const [endDate, setEndDate] = useState<Moment | null>(null);
-  const [staffNumber, setStaffNumber] = useState<number>(0);
+  const [startDate, setStartDate] = useState<Moment>(essf.startDayAt ? essf.startDayAt : moment());
+  const [startTime, setStartTime] = useState<Moment | null>(essf.startTimeAt ? essf.startTimeAt : moment());
+  const [endTime, setEndTime] = useState<Moment | null>(essf.endTimeAt ? essf.endTimeAt : moment().add(1, 'hour'));
+  const [endDate, setEndDate] = useState<Moment | null>(essf.endDayAt ? essf.endDayAt : moment().add(1, 'day'));
+  const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff ? essf.actualStaff : 0);
+  // const [startDate, setStartDate] = useState<Moment>(essf?.startDayAt);
+  // const [startTime, setStartTime] = useState<Moment | null>(essf?.startTimeAt);
+  // const [endTime, setEndTime] = useState<Moment | null>(null);
+  // const [endDate, setEndDate] = useState<Moment | null>(null);
+  // const [staffNumber, setStaffNumber] = useState<number>(0);
   const handleStartDateChange = (date: Moment) => {
     setStartDate(date);
     setEndDate(date);

From f614168e3f117a5d913f1838b80f0d424dd855b5 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 4 Oct 2024 10:35:15 +0100
Subject: [PATCH 29/43] using AdapterMoment an removing null

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/EditShiftStaffForm.tsx | 49 +++++++++++----------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index ea0d81e..d3df6f1 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -1,18 +1,19 @@
 import React, {useState} from "react";
 import {Box, Button, Link, TextField, Typography, Select, MenuItem, IconButton} from "@mui/material";
-import {Moment} from "moment";
+import moment,{Moment} from "moment";
 import {TimePicker} from '@mui/x-date-pickers/TimePicker';
 import {DatePicker} from '@mui/x-date-pickers/DatePicker';
-import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
+// import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import CloseIcon from "@mui/icons-material/Close";
+import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment";
 
 export type IEditShiftStaff = {
   startDayAt: Moment,
-  startTimeAt: Moment | null,
-  endTimeAt: Moment | null,
-  endDayAt: Moment | null,
-  actualStaff: number | null
+  startTimeAt: Moment ,
+  endTimeAt: Moment,
+  endDayAt: Moment,
+  actualStaff: number
 }
 
 export interface IEditShiftStaffForm {
@@ -26,31 +27,31 @@ export const EditShiftStaffForm = ({
                                      handleSubmit,
                                      cancelHandler
                                    }: IEditShiftStaffForm) => {
-  const [startDate, setStartDate] = useState<Moment>(essf.startDayAt ? essf.startDayAt : moment());
-  const [startTime, setStartTime] = useState<Moment | null>(essf.startTimeAt ? essf.startTimeAt : moment());
-  const [endTime, setEndTime] = useState<Moment | null>(essf.endTimeAt ? essf.endTimeAt : moment().add(1, 'hour'));
-  const [endDate, setEndDate] = useState<Moment | null>(essf.endDayAt ? essf.endDayAt : moment().add(1, 'day'));
-  const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff ? essf.actualStaff : 0);
+  const [startDate, setStartDate] = useState<Moment>(essf.startDayAt);
+  const [startTime, setStartTime] = useState<Moment>(essf.startTimeAt);
+  const [endTime, setEndTime] = useState<Moment>(essf.endTimeAt);
+  const [endDate, setEndDate] = useState<Moment>(essf.endDayAt);
+  const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff);
   // const [startDate, setStartDate] = useState<Moment>(essf?.startDayAt);
   // const [startTime, setStartTime] = useState<Moment | null>(essf?.startTimeAt);
   // const [endTime, setEndTime] = useState<Moment | null>(null);
   // const [endDate, setEndDate] = useState<Moment | null>(null);
   // const [staffNumber, setStaffNumber] = useState<number>(0);
-  const handleStartDateChange = (date: Moment) => {
-    setStartDate(date);
-    setEndDate(date);
+  const handleStartDateChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStartDate(event.target.value as Moment);
+    setEndDate(event.target.value as Moment);
   };
 
-  const handleEndDateChange = (date: Moment | null) => {
-    setEndDate(date);
+  const handleEndDateChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setEndDate(event.target.value as Moment);
   };
 
-  const handleStartTimeChange = (date: Moment | null) => {
-    setStartTime(date);
+  const handleStartTimeChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStartTime(event.target.value as Moment);
   };
 
-  const handleEndTimeChange = (date: Moment | null) => {
-    setEndTime(date);
+  const handleEndTimeChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setEndTime(event.target.value as Moment);
   };
 
   const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
@@ -95,26 +96,26 @@ export const EditShiftStaffForm = ({
       </IconButton>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Date" value={startDate}
                     onChange={handleStartDateChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
         <TimePicker sx={{backgroundColor: '#FFFFFF', width: '150px'}} label="Start Time"
                     value={startTime} onChange={handleStartTimeChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
         <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '150px'}} label="End Time"
                     value={endTime} onChange={handleEndTimeChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>

From e9a4caf27a51ab354a20ead9ba49dd1dd3738922 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
Date: Fri, 4 Oct 2024 11:16:52 +0100
Subject: [PATCH 30/43] update handle change event with adapter date

Signed-off-by: Nilesh Gupta <nilesh.nemichandgupta@digital.homeoffice.gov.uk>
---
 src/components/Staff/EditShiftStaffForm.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index d3df6f1..de5ef91 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -37,21 +37,21 @@ export const EditShiftStaffForm = ({
   // const [endTime, setEndTime] = useState<Moment | null>(null);
   // const [endDate, setEndDate] = useState<Moment | null>(null);
   // const [staffNumber, setStaffNumber] = useState<number>(0);
-  const handleStartDateChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setStartDate(event.target.value as Moment);
-    setEndDate(event.target.value as Moment);
+  const handleStartDateChange = (date: Moment | null) => {
+    setStartDate(date);
+    setEndDate(date);
   };
 
-  const handleEndDateChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setEndDate(event.target.value as Moment);
+  const handleEndDateChange = (date: Moment | null) => {
+    setEndDate(date);
   };
 
-  const handleStartTimeChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setStartTime(event.target.value as Moment);
+  const handleStartTimeChange = (date: Moment | null) => {
+    setStartTime(date);
   };
 
-  const handleEndTimeChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setEndTime(event.target.value as Moment);
+  const handleEndTimeChange = (date: Moment | null) => {
+    setEndTime(date);
   };
 
   const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {

From 3ec8939cee4a0aec7aa1b8bc0a736defc953d670 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh@Nileshs-Mac-Studio.local>
Date: Tue, 8 Oct 2024 09:16:28 +0100
Subject: [PATCH 31/43] change width of edit form

---
 src/components/Staff/EditShiftStaffForm.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index de5ef91..997b435 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -32,11 +32,6 @@ export const EditShiftStaffForm = ({
   const [endTime, setEndTime] = useState<Moment>(essf.endTimeAt);
   const [endDate, setEndDate] = useState<Moment>(essf.endDayAt);
   const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff);
-  // const [startDate, setStartDate] = useState<Moment>(essf?.startDayAt);
-  // const [startTime, setStartTime] = useState<Moment | null>(essf?.startTimeAt);
-  // const [endTime, setEndTime] = useState<Moment | null>(null);
-  // const [endDate, setEndDate] = useState<Moment | null>(null);
-  // const [staffNumber, setStaffNumber] = useState<number>(0);
   const handleStartDateChange = (date: Moment | null) => {
     setStartDate(date);
     setEndDate(date);
@@ -83,7 +78,7 @@ export const EditShiftStaffForm = ({
                 paddingBottom: '10px',
                 // backgroundColor: '#B4B5BE',
                 border: '1px solid black',
-                width: '370px'
+                width: '400px'
               }}>
     <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
       <Typography variant="h2" component="h2">Edit staff</Typography>

From 4eb5cc0f910267a3be6070f6f2f653a75a3602f6 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <nilesh@Nileshs-Mac-Studio.local>
Date: Wed, 9 Oct 2024 09:29:06 +0100
Subject: [PATCH 32/43] adding summary of selection

---
 src/components/Staff/EditShiftStaffForm.tsx | 26 +++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 997b435..a0c2bc5 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -91,26 +91,26 @@ export const EditShiftStaffForm = ({
       </IconButton>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterMoment}>
+      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Date" value={startDate}
                     onChange={handleStartDateChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
-      <LocalizationProvider dateAdapter={AdapterMoment}>
+      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <TimePicker sx={{backgroundColor: '#FFFFFF', width: '150px'}} label="Start Time"
                     value={startTime} onChange={handleStartTimeChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
-      <LocalizationProvider dateAdapter={AdapterMoment}>
+      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '150px'}} label="End Time"
                     value={endTime} onChange={handleEndTimeChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterMoment}>
+      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
@@ -131,6 +131,24 @@ export const EditShiftStaffForm = ({
         }
       }} onClick={handleSubmitForm}>Save staff updates</Button>
     </Box>
+    <Box sx={{paddingTop: '20px'}}>
+      <Typography variant="h6">Summary of Selections:</Typography>
+      <Typography>
+        <span style={{ fontWeight: 'bold' }}>Start Date: </span>{startDate.format('DD-MM-YYYY')}
+      </Typography>
+      <Box sx={{display:'flex',justifyContent:'flex-start'}}>
+        <Typography>
+          <span style={{ fontWeight: 'bold' }}>Start Time: </span>{startTime.format('HH:mm')}
+        </Typography>
+        <Typography sx={{paddingLeft:'20px'}}>
+          <span style={{ fontWeight: 'bold' }}>End Time: </span>{endTime.format('HH:mm')}
+        </Typography>
+      </Box>
+      <Typography>
+        <span style={{ fontWeight: 'bold' }}>End Date: </span>{endDate.format('DD-MM-YYYY')}
+      </Typography>
+      <Typography><span style={{ fontWeight: 'bold' }}>Staff Number: </span>{staffNumber}</Typography>
+    </Box>
   </Box>
 
 }

From 2c1abdcfacf7b74e34035cec9730f9cd036363e9 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Wed, 9 Oct 2024 15:58:58 +0100
Subject: [PATCH 33/43] date format DD-MM-YYY

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Staff/EditShiftStaffForm.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index a0c2bc5..7c637d0 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -94,6 +94,7 @@ export const EditShiftStaffForm = ({
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Date" value={startDate}
                     onChange={handleStartDateChange}
+                    inputFormat="DD-MM-YYYY"
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
@@ -112,6 +113,7 @@ export const EditShiftStaffForm = ({
     <Box sx={{paddingTop: '10px'}}>
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
+                    inputFormat="DD-MM-YYYY"
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>

From a31cd014e8913b756f5d901186d4e271e9994b82 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Thu, 17 Oct 2024 09:12:16 +0100
Subject: [PATCH 34/43] updating date format and 24 time format for edit form

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Staff/EditShiftStaffForm.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 7c637d0..8ba4a16 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -94,26 +94,29 @@ export const EditShiftStaffForm = ({
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Date" value={startDate}
                     onChange={handleStartDateChange}
-                    inputFormat="DD-MM-YYYY"
+                    format="DD-MM-YYYY"
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <TimePicker sx={{backgroundColor: '#FFFFFF', width: '150px'}} label="Start Time"
-                    value={startTime} onChange={handleStartTimeChange}
+                    value={startTime}
+                    ampm={false}
+                    onChange={handleStartTimeChange}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '150px'}} label="End Time"
                     value={endTime} onChange={handleEndTimeChange}
+                    ampm={false}
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>
     <Box sx={{paddingTop: '10px'}}>
       <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
         <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
-                    inputFormat="DD-MM-YYYY"
+                    format="DD-MM-YYYY"
                     renderInput={(params) => <TextField {...params} />}/>
       </LocalizationProvider>
     </Box>

From 804b439bca79e739088578ff27c838e46f1dd9ab Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Tue, 29 Oct 2024 18:50:41 +0000
Subject: [PATCH 35/43] adding style changes to edit shift form

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 .../Staff/EditShiftStaffForm.stories.tsx      |   1 +
 src/components/Staff/EditShiftStaffForm.tsx   | 306 ++++++++++--------
 2 files changed, 173 insertions(+), 134 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.stories.tsx b/src/components/Staff/EditShiftStaffForm.stories.tsx
index 8d4d485..3cdcb21 100644
--- a/src/components/Staff/EditShiftStaffForm.stories.tsx
+++ b/src/components/Staff/EditShiftStaffForm.stories.tsx
@@ -26,6 +26,7 @@ const essform: IEditShiftStaff = {
 export const EditShiftStaffForm = {
   args: {
     essf: essform,
+    interval: 15,
      handleSubmit: (essf: IEditShiftStaff) => {
       console.log('Submit clicked', essf);
     },
diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 8ba4a16..bb6f3ab 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -1,159 +1,197 @@
 import React, {useState} from "react";
-import {Box, Button, Link, TextField, Typography, Select, MenuItem, IconButton} from "@mui/material";
-import moment,{Moment} from "moment";
+import {Box, Button, IconButton, TextField, Typography} from "@mui/material";
+import moment, {Moment} from "moment";
 import {TimePicker} from '@mui/x-date-pickers/TimePicker';
 import {DatePicker} from '@mui/x-date-pickers/DatePicker';
-// import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import CloseIcon from "@mui/icons-material/Close";
 import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import PeopleIcon from '@mui/icons-material/People';
 
 export type IEditShiftStaff = {
-  startDayAt: Moment,
-  startTimeAt: Moment ,
-  endTimeAt: Moment,
-  endDayAt: Moment,
-  actualStaff: number
+    startDayAt: Moment,
+    startTimeAt: Moment,
+    endTimeAt: Moment,
+    endDayAt: Moment,
+    actualStaff: number
 }
 
 export interface IEditShiftStaffForm {
-  essf: IEditShiftStaff,
-  handleSubmit: (ssf: IEditShiftStaff) => void,
-  cancelHandler: () => void
+    essf: IEditShiftStaff,
+    interval: number,
+    handleSubmit: (ssf: IEditShiftStaff) => void,
+    cancelHandler: () => void
 }
 
 export const EditShiftStaffForm = ({
-                                     essf,
-                                     handleSubmit,
-                                     cancelHandler
+                                       essf,
+                                       interval,
+                                       handleSubmit,
+                                       cancelHandler
                                    }: IEditShiftStaffForm) => {
-  const [startDate, setStartDate] = useState<Moment>(essf.startDayAt);
-  const [startTime, setStartTime] = useState<Moment>(essf.startTimeAt);
-  const [endTime, setEndTime] = useState<Moment>(essf.endTimeAt);
-  const [endDate, setEndDate] = useState<Moment>(essf.endDayAt);
-  const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff);
-  const handleStartDateChange = (date: Moment | null) => {
-    setStartDate(date);
-    setEndDate(date);
-  };
-
-  const handleEndDateChange = (date: Moment | null) => {
-    setEndDate(date);
-  };
+    const [startDate, setStartDate] = useState<Moment>(essf.startDayAt);
+    const [startTime, setStartTime] = useState<Moment>(essf.startTimeAt.startOf('day'));
+    const [endTime, setEndTime] = useState<Moment>(essf.endTimeAt.startOf('day'));
+    const [endDate, setEndDate] = useState<Moment>(essf.endDayAt);
+    const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff);
+    const [error, setError] = useState<string | null>(null);
+    const handleStartDateChange = (date: Moment | null) => {
+        setStartDate(date);
+        setEndDate(date);
+    };
 
-  const handleStartTimeChange = (date: Moment | null) => {
-    setStartTime(date);
-  };
+    const handleEndDateChange = (date: Moment | null) => {
+        setEndDate(date);
+    };
 
-  const handleEndTimeChange = (date: Moment | null) => {
-    setEndTime(date);
-  };
+    const handleStartTimeChange = (date: Moment | null) => {
+        if (date && endTime && date.isAfter(endTime)) {
+            setError("Start time must be less than or equal to end time.");
+            return;
+        }
+        setError(null);
+        setStartTime(date);
+    };
 
-  const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setStaffNumber(event.target.value as number);
-  };
+    const handleEndTimeChange = (date: Moment | null) => {
+        if (date && startTime && date.isBefore(startTime)) {
+            setError("End time must be greater than or equal to start time.");
+            return;
+        }
+        setError(null);
+        setEndTime(date);
+    };
 
-  const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
-    const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
-    console.log("endTime.valueOf", endTime.valueOf())
-    console.log("startTime.valueOf", startTime.valueOf())
-    console.log("selectedDate", startDate.valueOf())
-    console.log("difference", startTime.valueOf() - startDate.valueOf())
-    console.log("staffNumber", staffNumber)
-    const ess: IEditShiftStaff = {
-      startDayAt: startDate,
-      startTimeAt: startTime,
-      endTimeAt: endTime,
-      endDayAt: endDate,
-      actualStaff: staffNumber
+    const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+        setStaffNumber(event.target.value as number);
     };
-    handleSubmit(ess);
-  }
 
+    const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
+        const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
+        console.log("endTime.valueOf", endTime.valueOf())
+        console.log("startTime.valueOf", startTime.valueOf())
+        console.log("selectedDate", startDate.valueOf())
+        console.log("diffInMinutes", diffInMinutes)
+        console.log("staffNumber", staffNumber)
+        const ess: IEditShiftStaff = {
+            startDayAt: startDate,
+            startTimeAt: startTime,
+            endTimeAt: endTime,
+            endDayAt: endDate,
+            actualStaff: staffNumber
+        };
+        handleSubmit(ess);
+    }
+    const duration = moment.duration(endTime.diff(startTime));
+    const hours = Math.floor(duration.asHours());
+    const minutes = duration.minutes();
 
-  return <Box data-testid={`shift-staff-form`}
-              sx={{
-                paddingTop: '10px',
-                paddingLeft: '20px',
-                paddingBottom: '10px',
-                // backgroundColor: '#B4B5BE',
-                border: '1px solid black',
-                width: '400px'
-              }}>
-    <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
-      <Typography variant="h2" component="h2">Edit staff</Typography>
-      <IconButton
-        aria-label="close"
-        color="inherit"
-        size="small"
-        onClick={cancelHandler}>
-        <CloseIcon fontSize="inherit"/>
-      </IconButton>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Date" value={startDate}
-                    onChange={handleStartDateChange}
-                    format="DD-MM-YYYY"
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-    </Box>
-    <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
-      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-        <TimePicker sx={{backgroundColor: '#FFFFFF', width: '150px'}} label="Start Time"
-                    value={startTime}
-                    ampm={false}
-                    onChange={handleStartTimeChange}
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-        <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '150px'}} label="End Time"
-                    value={endTime} onChange={handleEndTimeChange}
-                    ampm={false}
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
-                    format="DD-MM-YYYY"
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <TextField sx={{backgroundColor: '#FFFFFF'}} label="Staff Number"
-                 value={staffNumber}
-                 onChange={handleStaffNumberChange} type="number"/>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <Button sx={{
-        textTransform: 'none',
-        paddingLeft: '10px',
-        color: 'white',
-        backgroundColor: 'primary.main',
-        '&:hover': {
-          backgroundColor: 'primary.dark',
-        }
-      }} onClick={handleSubmitForm}>Save staff updates</Button>
-    </Box>
-    <Box sx={{paddingTop: '20px'}}>
-      <Typography variant="h6">Summary of Selections:</Typography>
-      <Typography>
-        <span style={{ fontWeight: 'bold' }}>Start Date: </span>{startDate.format('DD-MM-YYYY')}
-      </Typography>
-      <Box sx={{display:'flex',justifyContent:'flex-start'}}>
-        <Typography>
-          <span style={{ fontWeight: 'bold' }}>Start Time: </span>{startTime.format('HH:mm')}
-        </Typography>
-        <Typography sx={{paddingLeft:'20px'}}>
-          <span style={{ fontWeight: 'bold' }}>End Time: </span>{endTime.format('HH:mm')}
-        </Typography>
-      </Box>
-      <Typography>
-        <span style={{ fontWeight: 'bold' }}>End Date: </span>{endDate.format('DD-MM-YYYY')}
-      </Typography>
-      <Typography><span style={{ fontWeight: 'bold' }}>Staff Number: </span>{staffNumber}</Typography>
+    return <Box data-testid={`shift-staff-form`}
+                sx={{
+                    paddingTop: '10px',
+                    paddingLeft: '20px',
+                    paddingBottom: '10px',
+                    paddingRight: '20px',
+                    border: '1px solid black',
+                    width: '400px'
+                }}>
+        <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+            <Typography variant="h2" component="h2" fontWeight={"bold"}>Edit staff</Typography>
+            <IconButton
+                aria-label="close"
+                color="inherit"
+                size="small"
+                onClick={cancelHandler}>
+                <CloseIcon fontSize="inherit"/>
+            </IconButton>
+        </Box>
+        <Box sx={{paddingTop: '10px'}}>
+            <Typography variant="h3" component="h3">Date</Typography>
+            <Box sx={{paddingTop: '10px'}}>
+                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+                    <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Start Date" value={startDate}
+                                onChange={handleStartDateChange}
+                                format="DD MMMM YYYY"
+                                renderInput={(params) => <TextField {...params} />}/>
+                </LocalizationProvider>
+            </Box>
+            <Box sx={{paddingTop: '10px'}}>
+                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+                    <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="End Date" value={endDate}
+                                onChange={handleEndDateChange}
+                                format="DD MMMM YYYY"
+                                renderInput={(params) => <TextField {...params} />}/>
+                </LocalizationProvider>
+            </Box>
+        </Box>
+        <Box sx={{paddingTop: '10px'}}>
+            <Typography variant="h3" component="h3">Time</Typography>
+            <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
+                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+                    <TimePicker sx={{backgroundColor: '#FFFFFF', width: '50%'}} label="Start Time"
+                                value={startTime}
+                                ampm={false}
+                                onChange={handleStartTimeChange}
+                                minutesStep={interval}
+                                views={['hours', 'minutes']}
+                                renderInput={(params) => <TextField {...params} />}/>
+                </LocalizationProvider>
+                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+                    <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '50%'}} label="End Time"
+                                value={endTime}
+                                onChange={handleEndTimeChange}
+                                minutesStep={interval}
+                                ampm={false}
+                                views={['hours', 'minutes']}
+                                renderInput={(params) => <TextField {...params} />}/>
+                </LocalizationProvider>
+            </Box>
+        </Box>
+        <Box sx={{paddingTop: '10px', paddingBottom: '10px'}}>
+            <Typography variant="h3" component="h3">Staff</Typography>
+            <TextField sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Staff Number"
+                       value={staffNumber}
+                       onChange={handleStaffNumberChange} type="number"/>
+        </Box>
+        {error && <Typography color="error" sx={{paddingTop: '10px'}}>{error}</Typography>}
+        <Box sx={{paddingTop: '10px', paddingLeft: '10px', paddingRight: '20px', backgroundColor: '#E6E9F1'}}>
+            <Typography variant="h6">Summary of Selections:</Typography>
+            <Box sx={{paddingTop: '10px'}}>
+                <Box sx={{display: 'flex', alignItems: 'center'}}>
+                    <CalendarTodayIcon sx={{marginRight: '5px'}}/>
+                    <span style={{fontWeight: 'bold'}}>{endDate.diff(startDate, 'days')} days</span>
+                </Box>
+                <Typography sx={{paddingLeft:'30px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>
+            </Box>
+            <Box sx={{paddingTop: '10px'}}>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    <AccessTimeIcon sx={{ marginRight: '5px' }} />
+                <span style={{fontWeight: 'bold'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</span>
+                </Box>
+                <Typography sx={{paddingLeft:'30px'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')} </Typography>
+            </Box>
+            <Box sx={{paddingTop: '10px'}}>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    <PeopleIcon sx={{ marginRight: '5px' }} />
+                <span style={{fontWeight: 'bold'}}>Staff</span>
+                </Box>
+                <Typography sx={{paddingLeft:'30px'}}>{staffNumber}</Typography>
+            </Box>
+        </Box>
+        <Box sx={{paddingTop: '10px'}}>
+            <Button sx={{
+                textTransform: 'none',
+                paddingLeft: '10px',
+                color: 'white',
+                width: '100%',
+                backgroundColor: 'primary.main',
+                '&:hover': {
+                    backgroundColor: 'primary.dark',
+                }
+            }} disabled={!!error} onClick={handleSubmitForm}>Save staff updates</Button>
+        </Box>
     </Box>
-  </Box>
 
 }

From 0d3cc8fb8737a8c61a3a5f4d37c8901856b86252 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Wed, 30 Oct 2024 08:16:42 +0000
Subject: [PATCH 36/43] fixing setting date issue

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Staff/EditShiftStaffForm.tsx | 32 ++++++++++++---------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index bb6f3ab..5dc1483 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -47,21 +47,21 @@ export const EditShiftStaffForm = ({
     };
 
     const handleStartTimeChange = (date: Moment | null) => {
+        setStartTime(date);
         if (date && endTime && date.isAfter(endTime)) {
             setError("Start time must be less than or equal to end time.");
             return;
         }
         setError(null);
-        setStartTime(date);
     };
 
     const handleEndTimeChange = (date: Moment | null) => {
+        setEndTime(date);
         if (date && startTime && date.isBefore(startTime)) {
             setError("End time must be greater than or equal to start time.");
             return;
         }
         setError(null);
-        setEndTime(date);
     };
 
     const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
@@ -151,9 +151,11 @@ export const EditShiftStaffForm = ({
         </Box>
         <Box sx={{paddingTop: '10px', paddingBottom: '10px'}}>
             <Typography variant="h3" component="h3">Staff</Typography>
-            <TextField sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Staff Number"
-                       value={staffNumber}
-                       onChange={handleStaffNumberChange} type="number"/>
+            <Box sx={{paddingTop: '10px'}}>
+                <TextField sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Staff Number"
+                           value={staffNumber}
+                           onChange={handleStaffNumberChange} type="number"/>
+            </Box>
         </Box>
         {error && <Typography color="error" sx={{paddingTop: '10px'}}>{error}</Typography>}
         <Box sx={{paddingTop: '10px', paddingLeft: '10px', paddingRight: '20px', backgroundColor: '#E6E9F1'}}>
@@ -163,21 +165,23 @@ export const EditShiftStaffForm = ({
                     <CalendarTodayIcon sx={{marginRight: '5px'}}/>
                     <span style={{fontWeight: 'bold'}}>{endDate.diff(startDate, 'days')} days</span>
                 </Box>
-                <Typography sx={{paddingLeft:'30px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>
+                <Typography
+                    sx={{paddingLeft: '30px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>
             </Box>
             <Box sx={{paddingTop: '10px'}}>
-                <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <AccessTimeIcon sx={{ marginRight: '5px' }} />
-                <span style={{fontWeight: 'bold'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</span>
+                <Box sx={{display: 'flex', alignItems: 'center'}}>
+                    <AccessTimeIcon sx={{marginRight: '5px'}}/>
+                    <span style={{fontWeight: 'bold'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</span>
                 </Box>
-                <Typography sx={{paddingLeft:'30px'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')} </Typography>
+                <Typography
+                    sx={{paddingLeft: '30px'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')} </Typography>
             </Box>
             <Box sx={{paddingTop: '10px'}}>
-                <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <PeopleIcon sx={{ marginRight: '5px' }} />
-                <span style={{fontWeight: 'bold'}}>Staff</span>
+                <Box sx={{display: 'flex', alignItems: 'center'}}>
+                    <PeopleIcon sx={{marginRight: '5px'}}/>
+                    <span style={{fontWeight: 'bold'}}>Staff</span>
                 </Box>
-                <Typography sx={{paddingLeft:'30px'}}>{staffNumber}</Typography>
+                <Typography sx={{paddingLeft: '30px'}}>{staffNumber}</Typography>
             </Box>
         </Box>
         <Box sx={{paddingTop: '10px'}}>

From 4244e3951f0874d5d3f9135041c582bf1365222c Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Mon, 4 Nov 2024 09:29:49 +0000
Subject: [PATCH 37/43] fixing day and remove border

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Staff/EditShiftStaffForm.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 5dc1483..873ebda 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -94,7 +94,6 @@ export const EditShiftStaffForm = ({
                     paddingLeft: '20px',
                     paddingBottom: '10px',
                     paddingRight: '20px',
-                    border: '1px solid black',
                     width: '400px'
                 }}>
         <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
@@ -163,7 +162,7 @@ export const EditShiftStaffForm = ({
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
                     <CalendarTodayIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>{endDate.diff(startDate, 'days')} days</span>
+                    <span style={{fontWeight: 'bold'}}>{endDate.diff(startDate, 'days') + 1} days</span>
                 </Box>
                 <Typography
                     sx={{paddingLeft: '30px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>

From bb0caf822ac3510aa88815c3e3dab61233ff9cf1 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Mon, 4 Nov 2024 09:43:08 +0000
Subject: [PATCH 38/43] moving 2nd line padding by 2 pixel in summary as it is
 lookinn bit left in drt

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Staff/EditShiftStaffForm.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index 873ebda..e88d979 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -165,7 +165,7 @@ export const EditShiftStaffForm = ({
                     <span style={{fontWeight: 'bold'}}>{endDate.diff(startDate, 'days') + 1} days</span>
                 </Box>
                 <Typography
-                    sx={{paddingLeft: '30px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>
+                    sx={{paddingLeft: '32px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>
             </Box>
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
@@ -173,14 +173,14 @@ export const EditShiftStaffForm = ({
                     <span style={{fontWeight: 'bold'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</span>
                 </Box>
                 <Typography
-                    sx={{paddingLeft: '30px'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')} </Typography>
+                    sx={{paddingLeft: '32px'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')} </Typography>
             </Box>
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
                     <PeopleIcon sx={{marginRight: '5px'}}/>
                     <span style={{fontWeight: 'bold'}}>Staff</span>
                 </Box>
-                <Typography sx={{paddingLeft: '30px'}}>{staffNumber}</Typography>
+                <Typography sx={{paddingLeft: '32px'}}>{staffNumber}</Typography>
             </Box>
         </Box>
         <Box sx={{paddingTop: '10px'}}>

From 453a692f5b975fe40f84fbc795d19da970751114 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Tue, 5 Nov 2024 09:13:15 +0000
Subject: [PATCH 39/43] update edit form

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/Staff/EditShiftStaffForm.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/EditShiftStaffForm.tsx
index e88d979..c9cfbd5 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/EditShiftStaffForm.tsx
@@ -162,25 +162,24 @@ export const EditShiftStaffForm = ({
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
                     <CalendarTodayIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>{endDate.diff(startDate, 'days') + 1} days</span>
+                    <span style={{fontWeight: 'bold'}}>{startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')}</span>
                 </Box>
                 <Typography
-                    sx={{paddingLeft: '32px'}}>{startDate.format('DD MMM YYYY')} to {endDate.format('DD MMM YYYY')}</Typography>
+                    sx={{paddingLeft: '32px'}}>{endDate.diff(startDate, 'days') + 1} days</Typography>
             </Box>
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
                     <AccessTimeIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</span>
+                    <span style={{fontWeight: 'bold'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')}</span>
                 </Box>
                 <Typography
-                    sx={{paddingLeft: '32px'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')} </Typography>
+                    sx={{paddingLeft: '32px'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</Typography>
             </Box>
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
                     <PeopleIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>Staff</span>
+                    <span style={{fontWeight: 'bold'}}>{staffNumber} Staff</span>
                 </Box>
-                <Typography sx={{paddingLeft: '32px'}}>{staffNumber}</Typography>
             </Box>
         </Box>
         <Box sx={{paddingTop: '10px'}}>

From fd0ada493c7ffa4476d863dc51908905c6e984fb Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Tue, 5 Nov 2024 13:15:44 +0000
Subject: [PATCH 40/43] removing unused components

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 .../Staff/EditShiftStaffForm.stories.tsx      |  37 -----
 src/components/Staff/MinStaffForm.tsx         |  82 ----------
 .../Staff/MinStaffWarning.stories.tsx         |  19 ---
 src/components/Staff/MinStaffWarning.tsx      |  26 ---
 .../Staff/ShiftStaffForm.stories.tsx          |  39 -----
 src/components/Staff/ShiftStaffForm.tsx       | 152 ------------------
 src/components/Staff/StaffForm.stories.tsx    |  26 ---
 ...ies.tsx => StaffUpdateSuccess.stories.tsx} |   8 +-
 ...taffSuccess.tsx => StaffUpdateSuccess.tsx} |   4 +-
 .../UpdateStaffForTimeRangeForm.stories.tsx   |  36 +++++
 ...rm.tsx => UpdateStaffForTimeRangeForm.tsx} |  43 ++---
 .../Staff/__tests__/MinStaffForm.test.tsx     |  55 -------
 .../Staff/__tests__/MinStaffWarning.test.tsx  |  30 ----
 src/components/Staff/index.ts                 |  14 +-
 src/components/index.ts                       |  11 +-
 15 files changed, 75 insertions(+), 507 deletions(-)
 delete mode 100644 src/components/Staff/EditShiftStaffForm.stories.tsx
 delete mode 100644 src/components/Staff/MinStaffForm.tsx
 delete mode 100644 src/components/Staff/MinStaffWarning.stories.tsx
 delete mode 100644 src/components/Staff/MinStaffWarning.tsx
 delete mode 100644 src/components/Staff/ShiftStaffForm.stories.tsx
 delete mode 100644 src/components/Staff/ShiftStaffForm.tsx
 delete mode 100644 src/components/Staff/StaffForm.stories.tsx
 rename src/components/Staff/{StaffSucess.stories.tsx => StaffUpdateSuccess.stories.tsx} (58%)
 rename src/components/Staff/{StaffSuccess.tsx => StaffUpdateSuccess.tsx} (86%)
 create mode 100644 src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
 rename src/components/Staff/{EditShiftStaffForm.tsx => UpdateStaffForTimeRangeForm.tsx} (85%)
 delete mode 100644 src/components/Staff/__tests__/MinStaffForm.test.tsx
 delete mode 100644 src/components/Staff/__tests__/MinStaffWarning.test.tsx

diff --git a/src/components/Staff/EditShiftStaffForm.stories.tsx b/src/components/Staff/EditShiftStaffForm.stories.tsx
deleted file mode 100644
index 3cdcb21..0000000
--- a/src/components/Staff/EditShiftStaffForm.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import moment from 'moment';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Moment} from "moment/moment";
-import type {IEditShiftStaff, IEditShiftStaffForm} from './EditShiftStaffForm'
-import {EditShiftStaffForm as EditShiftStaffFormComponent} from './EditShiftStaffForm'
-
-const meta: Meta<typeof EditShiftStaffFormComponent> = {
-  title: "DRT Components/EditShiftStaffFormComponent",
-  component: EditShiftStaffFormComponent,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof EditShiftStaffFormComponent>;
-
-const essform: IEditShiftStaff = {
-  actualStaff: 1,
-  startDayAt: moment(),
-  startTimeAt: moment(),
-  endTimeAt: moment().add(1, 'hour'),
-  endDayAt: moment().add(1, 'day')
-}
-
-
-
-export const EditShiftStaffForm = {
-  args: {
-    essf: essform,
-    interval: 15,
-     handleSubmit: (essf: IEditShiftStaff) => {
-      console.log('Submit clicked', essf);
-    },
-    cancelHandler: () => {
-      console.log('Cancel clicked');
-    },
-  }
-};
diff --git a/src/components/Staff/MinStaffForm.tsx b/src/components/Staff/MinStaffForm.tsx
deleted file mode 100644
index cf08219..0000000
--- a/src/components/Staff/MinStaffForm.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, {useState} from "react";
-import {Alert, Box, Button, Link, TextField, Typography} from "@mui/material";
-
-export interface IMinStaffForm {
-  port: string
-  terminal: string
-  message: string
-  minStaffNumber: number | null
-  handleSubmit: (minStaff: number | null) => void
-  cancelHandler: () => void
-}
-
-export const MinStaffForm = ({port, terminal, message, minStaffNumber, handleSubmit, cancelHandler}: IMinStaffForm) => {
-  const [staffNumber, setStaffNumber] = useState<number | null>(minStaffNumber);
-  const [staffNumberFormatError, setStaffNumberFormatError] = useState(false);
-  const [staffNumberErrorText, setStaffNumberErrorText] = useState("");
-  const [submitError, setSubmitError] = useState(false);
-
-  const handleFormSubmit = (event: React.ChangeEvent, minStaff: number | null) => {
-    try {
-      handleSubmit(minStaff);
-      setSubmitError(false);
-    } catch (error) {
-      setSubmitError(true);
-    }
-  }
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setStaffNumber(null);
-    const value = event.target.value;
-
-    if (!isNaN(Number(value)) && value.trim() !== "") {
-      if (Number.isInteger(Number(value))) {
-        if (Number(value) > 0) {
-          setStaffNumber(Number(value));
-          setStaffNumberFormatError(false);
-        } else {
-          setStaffNumberFormatError(true);
-          setStaffNumberErrorText("Please enter a number greater than 0");
-        }
-      } else {
-        setStaffNumberFormatError(true);
-        setStaffNumberErrorText("Please enter a whole number, eg 10");
-      }
-    } else {
-      setStaffNumberFormatError(true);
-      setStaffNumberErrorText("Please enter a valid whole number, eg 10");
-    }
-  }
-
-  return <Box data-testid={`min-staff-form`} sx={{paddingTop: '10px', paddingLeft: '10px'}}>
-    {staffNumberFormatError && (
-      <Alert data-testid={`min-staff-number-error`} severity="error">
-        <Box sx={{marginTop: '-5px',fontWeight: 'bold', fontSize: '18px'}}>There is a problem</Box>
-        <Box sx={{fontWeight: 'bold', fontSize: '12px'}}> {staffNumberErrorText}</Box>
-      </Alert>
-    )}
-    {submitError && (
-      <Alert data-testid={`min-staff-submit-error`} sx={{fontWeight: 'bold'}} severity="error">An error occurred while
-        submitting the form. Please try again or contact us if the problem persists</Alert>
-    )}
-    <Box sx={{paddingTop: '10px'}}>{port} {terminal}</Box>
-    <Typography variant="h2" component="h2">Update minimum PCP staff number</Typography>
-    <Box sx={{paddingTop: '10px'}}>{message}</Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <TextField label="Enter minimum PCP staff number" variant="outlined" sx={{width: '35ch'}}
-                 data-testid={`min-staff-number-input`} onChange={handleInputChange}/>
-      {staffNumberFormatError && (
-        <Alert data-testid={`min-staff-number-error`} sx={{fontWeight: 'bold', fontSize: '12px'}}
-               severity="error">{staffNumberErrorText}</Alert>
-      )}
-    </Box>
-    <Box sx={{display: 'flex', alignItems: 'center'}}>
-      <Button data-testid={`min-staff-form-submit`} sx={{
-      marginTop: '10px', backgroundColor: staffNumberFormatError ? '#BDBDBD' : '#334F96',
-        color: staffNumberFormatError ? '#000' : '#fff',
-        textTransform: 'none', '&:hover': {backgroundColor: staffNumberFormatError ? '#BDBDBD' : '#334F96'}
-    }} onClick={e => handleFormSubmit(e, staffNumber)} disabled={staffNumberFormatError}>Continue</Button>
-      <Link sx={{paddingLeft: '30px', paddingTop: '10px', cursor: 'pointer'}} onClick={cancelHandler}>Cancel</Link>
-    </Box>
-  </Box>
-}
diff --git a/src/components/Staff/MinStaffWarning.stories.tsx b/src/components/Staff/MinStaffWarning.stories.tsx
deleted file mode 100644
index 48d0bea..0000000
--- a/src/components/Staff/MinStaffWarning.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MinStaffWarning as MinStaffWarningComponent } from "./MinStaffWarning";
-
-const meta: Meta<typeof MinStaffWarningComponent> = {
-  title: "DRT Components/MinStaffWarningComponent",
-  component: MinStaffWarningComponent,
-};
-
-export default meta;
-type Story = StoryObj<typeof MinStaffWarningComponent>;
-
-export const MinStaffWarning: Story = {
-  args: {
-    message1: "Your minimum staff cover in DRT is",
-    message2: "You can now more accurately reflect your minimum staff cover in DRT",
-    minStaff: 1,
-    handleClick: () => {console.log("Add min staff clicked")}
-  }
-};
diff --git a/src/components/Staff/MinStaffWarning.tsx b/src/components/Staff/MinStaffWarning.tsx
deleted file mode 100644
index 024e0b8..0000000
--- a/src/components/Staff/MinStaffWarning.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-
-import {Alert, Box, Button} from "@mui/material";
-
-export interface IMinStaffWarning {
-  message1: string,
-  message2: string,
-  minStaff?: number,
-  handleClick: () => void,
-}
-
-export const MinStaffWarning = ({message1, message2, minStaff, handleClick}: IMinStaffWarning) => {
-  return <Alert sx={{color: '#873200', border: '1px solid #873200'}} severity="warning">
-    <Box sx={{fontWeight: 'bold'}}>{message1} {minStaff}</Box>
-    <Box sx={{paddingTop: '10px'}}>{message2}</Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <Button
-        data-testid="mobile-add-min-staff"
-        variant="outlined"
-        id="add-min-staff"
-        onClick={handleClick}
-        sx={{marginLeft: 'auto', backgroundColor: '#334F96', color: '#fff', textTransform: 'none','&:hover': {backgroundColor: '#334F96'}}}
-      >+ Add minimum staff</Button>
-    </Box>
-  </Alert>
-}
diff --git a/src/components/Staff/ShiftStaffForm.stories.tsx b/src/components/Staff/ShiftStaffForm.stories.tsx
deleted file mode 100644
index 0b47186..0000000
--- a/src/components/Staff/ShiftStaffForm.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import moment from 'moment';
-import type {Meta, StoryObj} from '@storybook/react';
-import {IShiftStaffForm, ShiftStaffForm as ShiftStaffFormComponent} from "./ShiftStaffForm";
-import {Moment} from "moment/moment";
-
-const meta: Meta<typeof ShiftStaffFormComponent> = {
-  title: "DRT Components/ShiftStaffFormComponent",
-  component: ShiftStaffFormComponent,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ShiftStaffFormComponent>;
-
-const ssform: IShiftStaffForm = {
-  shiftName: 'Shift 1',
-  port: "Birmingham (BHX)",
-  minimumRosteredStaff: null,
-  terminal: 'Terminal 1',
-  actualStaff: 1,
-  startAt: moment(),
-  periodInMinutes: 30,
-  endAt: moment().add(1, 'hour'),
-  frequency: 'daily',
-  email: 'someone@example.com'
-}
-
-export const ShiftStaffForm = {
-
-  args: {
-    ssf: ssform,
-    handleSubmit: (ssf: IShiftStaffForm) => {
-      console.log('Submit clicked', ssf);
-    },
-    cancelHandler: () => {
-      console.log('Cancel clicked');
-    },
-  }
-};
diff --git a/src/components/Staff/ShiftStaffForm.tsx b/src/components/Staff/ShiftStaffForm.tsx
deleted file mode 100644
index a1fd811..0000000
--- a/src/components/Staff/ShiftStaffForm.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, {useState} from "react";
-import {Box, Button, Link, TextField, Typography, Select, MenuItem} from "@mui/material";
-import {Moment} from "moment";
-import {TimePicker} from '@mui/x-date-pickers/TimePicker';
-import {DatePicker} from '@mui/x-date-pickers/DatePicker';
-import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
-import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
-
-export type IShiftStaffForm = {
-  port: string,
-  terminal: string,
-  shiftName: string,
-  startAt: Moment,
-  periodInMinutes: number,
-  endAt: Moment | null,
-  frequency: string | null,
-  actualStaff: number | null,
-  minimumRosteredStaff: number | null,
-  email: string
-}
-
-export interface ShiftStaffFormData {
-  ssf: IShiftStaffForm | null,
-  handleSubmit: (ssf: IShiftStaffForm) => void,
-  cancelHandler: () => void
-}
-
-export const ShiftStaffForm = ({ssf, handleSubmit, cancelHandler}: ShiftStaffFormData) => {
-  const [newShiftName, setNewShiftName] = useState<string>(ssf?.shiftName);
-  const [selectedDate, setSelectedDate] = useState<Moment>(ssf?.startAt);
-  const [endDate, setEndDate] = useState<Moment | null>(ssf?.endAt);
-  const [startTime, setStartTime] = useState<Moment | null>(null);
-  const [endTime, setEndTime] = useState<Moment | null>(null);
-  const [selectedFrequency, setSelectedFrequency] = useState<string | null>(ssf?.frequency ? ssf?.frequency : 'daily');
-  const [staffNumber, setStaffNumber] = useState<number>(ssf?.actualStaff ? ssf?.actualStaff : 0);
-  const [showEndDatePicker, setShowEndDatePicker] = useState(false);
-
-  const handleEndDateLinkClick = (event) => {
-    event.preventDefault();
-    setShowEndDatePicker(true);
-  };
-
-  const handleEndDateChange = (date) => {
-    setEndDate(date);
-    setShowEndDatePicker(false);
-  };
-
-  const handleDateChange = (date: Moment | null) => {
-    setSelectedDate(date);
-  };
-
-  const handleStartTimeChange = (date: Moment | null) => {
-    setStartTime(date);
-  };
-
-  const handleEndTimeChange = (date: Moment | null) => {
-    setEndTime(date);
-  };
-
-  const handleFrequencyChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setSelectedFrequency(event.target.value as string);
-  };
-
-  const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setStaffNumber(event.target.value as number);
-  };
-
-  const handleShiftNameChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setNewShiftName(event.target.value as string);
-  };
-
-  const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
-    const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
-    console.log("endTime.valueOf", endTime.valueOf())
-    console.log("startTime.valueOf", startTime.valueOf())
-    console.log("selectedDate", selectedDate.valueOf())
-    console.log("difference", startTime.valueOf() - selectedDate.valueOf())
-    const ssform: IShiftStaffForm = {
-      port: ssf.port,
-      terminal: ssf.terminal,
-      shiftName: newShiftName,
-      startAt: selectedDate,
-      periodInMinutes: diffInMinutes,
-      endAt: endDate,
-      frequency: selectedFrequency,
-      actualStaff: staffNumber,
-      minimumRosteredStaff: ssf.minimumRosteredStaff,
-      email: ssf.email
-    };
-    handleSubmit(ssform);
-  }
-
-
-  return <Box data-testid={`shift-staff-form`}
-              sx={{
-                paddingTop: '10px',
-                paddingLeft: '20px',
-                paddingBottom: '10px',
-                backgroundColor: '#B4B5BE',
-                border: '1px solid black'
-              }}>
-    <Typography variant="h2" component="h2">Add Shift</Typography>
-    <TextField sx={{backgroundColor: '#FFFFFF'}} label="Shift name" value={newShiftName}
-               onChange={handleShiftNameChange}/>
-    <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Date" value={selectedDate} onChange={handleDateChange}
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Time"
-                    value={startTime} onChange={handleStartTimeChange}
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF'}} label="End Time"
-                    value={endTime} onChange={handleEndTimeChange}
-                    renderInput={(params) => <TextField {...params} />}/>
-      </LocalizationProvider>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <Select value={selectedFrequency} onChange={handleFrequencyChange}
-              sx={{backgroundColor: '#FFFFFF', width: '150px', paddingTop: '10px'}}>
-        <MenuItem value={'daily'}>Daily</MenuItem>
-        <MenuItem value={'weekly'}>Weekly</MenuItem>
-        <MenuItem value={'monthly'}>Monthly</MenuItem>
-      </Select>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      {showEndDatePicker ? (
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="End Date" value={endDate} onChange={handleEndDateChange}
-                      renderInput={(params) => <TextField {...params} />}/>
-        </LocalizationProvider>
-      ) : (
-        <Link href="#" onClick={handleEndDateLinkClick}>Set End Date</Link>
-      )}
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <TextField sx={{backgroundColor: '#FFFFFF'}} label="Staff Number"
-                 value={staffNumber}
-                 onChange={handleStaffNumberChange} type="number"/>
-    </Box>
-    <Box sx={{paddingTop: '10px'}}>
-      <Button sx={{paddingLeft: '10px'}} onClick={handleSubmitForm}>Add staff</Button>
-      <Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>
-    </Box>
-  </Box>
-
-}
diff --git a/src/components/Staff/StaffForm.stories.tsx b/src/components/Staff/StaffForm.stories.tsx
deleted file mode 100644
index 7988f2d..0000000
--- a/src/components/Staff/StaffForm.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {MinStaffForm as MinStaffFormComponent} from "./MinStaffForm";
-import React from "react";
-
-const meta: Meta<typeof MinStaffFormComponent> = {
-  title: "DRT Components/MinStaffFormComponent",
-  component: MinStaffFormComponent,
-};
-
-export default meta;
-type Story = StoryObj<typeof MinStaffFormComponent>;
-
-export const MinStaffForm: Story = {
-  args: {
-    port: "Birmingham (BHX)",
-    terminal: "Terminal 1",
-    message: "All future dates with the previously entered minimum staff number will be updated.",
-    minStaffNumber: null,
-    handleSubmit: (minStaff: number) => {
-      console.log(minStaff)
-    },
-    cancelHandler : () => {
-      console.log("Cancel clicked")
-    }
-  }
-};
diff --git a/src/components/Staff/StaffSucess.stories.tsx b/src/components/Staff/StaffUpdateSuccess.stories.tsx
similarity index 58%
rename from src/components/Staff/StaffSucess.stories.tsx
rename to src/components/Staff/StaffUpdateSuccess.stories.tsx
index cf4eb1d..cc287c2 100644
--- a/src/components/Staff/StaffSucess.stories.tsx
+++ b/src/components/Staff/StaffUpdateSuccess.stories.tsx
@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { StaffSuccess as StaffSuccessComponent } from "./StaffSuccess";
+import { StaffUpdateSuccess as StaffUpdateSuccessComponent } from "./StaffUpdateSuccess";
 
-const meta: Meta<typeof StaffSuccessComponent> = {
+const meta: Meta<typeof StaffUpdateSuccessComponent> = {
   title: "DRT Components/StaffSuccessComponent",
-  component: StaffSuccessComponent,
+  component: StaffUpdateSuccessComponent,
 };
 
 export default meta;
-type Story = StoryObj<typeof StaffSuccessComponent>;
+type Story = StoryObj<typeof StaffUpdateSuccessComponent>;
 
 export const StaffSuccess: Story = {
   args: {
diff --git a/src/components/Staff/StaffSuccess.tsx b/src/components/Staff/StaffUpdateSuccess.tsx
similarity index 86%
rename from src/components/Staff/StaffSuccess.tsx
rename to src/components/Staff/StaffUpdateSuccess.tsx
index 708748f..a1186d2 100644
--- a/src/components/Staff/StaffSuccess.tsx
+++ b/src/components/Staff/StaffUpdateSuccess.tsx
@@ -3,13 +3,13 @@ import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 
-export interface IStaffSuccess {
+export interface IStaffUpdateSuccess {
   staffNumber: number | null,
   message: string,
   closeHandler: () => void
 }
 
-export const StaffSuccess = ({staffNumber, message, closeHandler}: IStaffSuccess) => {
+export const StaffUpdateSuccess = ({staffNumber, message, closeHandler}: IStaffUpdateSuccess) => {
   return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
     <Alert sx={{color: '#FFFFFF', backgroundColor: '#2E7D32'}} severity="success"
            action={
diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
new file mode 100644
index 0000000..773d1fe
--- /dev/null
+++ b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
@@ -0,0 +1,36 @@
+import moment from 'moment';
+import type {Meta, StoryObj} from '@storybook/react';
+import type {IUpdateStaffForTimeRangeData} from './UpdateStaffForTimeRangeForm'
+import {UpdateStaffForTimeRangeForm as UpdateStaffForTimeRangeFormComponent} from './UpdateStaffForTimeRangeForm'
+
+const meta: Meta<typeof UpdateStaffForTimeRangeFormComponent> = {
+  title: "DRT Components/UpdateStaffForTimeRangeFormComponent",
+  component: UpdateStaffForTimeRangeFormComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UpdateStaffForTimeRangeFormComponent>;
+
+const ustdForm: IUpdateStaffForTimeRangeData = {
+  actualStaff: 1,
+  startDayAt: moment(),
+  startTimeAt: moment(),
+  endTimeAt: moment().add(1, 'hour'),
+  endDayAt: moment().add(1, 'day')
+}
+
+
+
+export const UpdateStaffForTimeRangeForm = {
+  args: {
+    ustd: ustdForm,
+    interval: 15,
+     handleSubmit: (essf: IUpdateStaffForTimeRangeData) => {
+      console.log('Submit clicked', essf);
+    },
+    cancelHandler: () => {
+      console.log('Cancel clicked');
+    },
+  }
+};
diff --git a/src/components/Staff/EditShiftStaffForm.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
similarity index 85%
rename from src/components/Staff/EditShiftStaffForm.tsx
rename to src/components/Staff/UpdateStaffForTimeRangeForm.tsx
index c9cfbd5..7b7dc13 100644
--- a/src/components/Staff/EditShiftStaffForm.tsx
+++ b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
@@ -10,7 +10,7 @@ import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import PeopleIcon from '@mui/icons-material/People';
 
-export type IEditShiftStaff = {
+export type IUpdateStaffForTimeRangeData = {
     startDayAt: Moment,
     startTimeAt: Moment,
     endTimeAt: Moment,
@@ -18,24 +18,24 @@ export type IEditShiftStaff = {
     actualStaff: number
 }
 
-export interface IEditShiftStaffForm {
-    essf: IEditShiftStaff,
+export interface IUpdateStaffForTimeRangeForm {
+    ustd: IUpdateStaffForTimeRangeData,
     interval: number,
-    handleSubmit: (ssf: IEditShiftStaff) => void,
+    handleSubmit: (ssf: IUpdateStaffForTimeRangeData) => void,
     cancelHandler: () => void
 }
 
-export const EditShiftStaffForm = ({
-                                       essf,
-                                       interval,
-                                       handleSubmit,
-                                       cancelHandler
-                                   }: IEditShiftStaffForm) => {
-    const [startDate, setStartDate] = useState<Moment>(essf.startDayAt);
-    const [startTime, setStartTime] = useState<Moment>(essf.startTimeAt.startOf('day'));
-    const [endTime, setEndTime] = useState<Moment>(essf.endTimeAt.startOf('day'));
-    const [endDate, setEndDate] = useState<Moment>(essf.endDayAt);
-    const [staffNumber, setStaffNumber] = useState<number>(essf.actualStaff);
+export const UpdateStaffForTimeRangeForm = ({
+                                                ustd,
+                                                interval,
+                                                handleSubmit,
+                                                cancelHandler
+                                            }: IUpdateStaffForTimeRangeForm) => {
+    const [startDate, setStartDate] = useState<Moment>(ustd.startDayAt);
+    const [startTime, setStartTime] = useState<Moment>(ustd.startTimeAt.startOf('day'));
+    const [endTime, setEndTime] = useState<Moment>(ustd.endTimeAt.startOf('day'));
+    const [endDate, setEndDate] = useState<Moment>(ustd.endDayAt);
+    const [staffNumber, setStaffNumber] = useState<number>(ustd.actualStaff);
     const [error, setError] = useState<string | null>(null);
     const handleStartDateChange = (date: Moment | null) => {
         setStartDate(date);
@@ -75,7 +75,7 @@ export const EditShiftStaffForm = ({
         console.log("selectedDate", startDate.valueOf())
         console.log("diffInMinutes", diffInMinutes)
         console.log("staffNumber", staffNumber)
-        const ess: IEditShiftStaff = {
+        const ess: IUpdateStaffForTimeRangeData = {
             startDayAt: startDate,
             startTimeAt: startTime,
             endTimeAt: endTime,
@@ -157,12 +157,19 @@ export const EditShiftStaffForm = ({
             </Box>
         </Box>
         {error && <Typography color="error" sx={{paddingTop: '10px'}}>{error}</Typography>}
-        <Box sx={{paddingTop: '10px', paddingLeft: '10px', paddingRight: '20px', backgroundColor: '#E6E9F1'}}>
+        <Box sx={{
+            paddingTop: '10px',
+            paddingBottom: '10px',
+            paddingLeft: '10px',
+            paddingRight: '20px',
+            backgroundColor: '#E6E9F1'
+        }}>
             <Typography variant="h6">Summary of Selections:</Typography>
             <Box sx={{paddingTop: '10px'}}>
                 <Box sx={{display: 'flex', alignItems: 'center'}}>
                     <CalendarTodayIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>{startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')}</span>
+                    <span
+                        style={{fontWeight: 'bold'}}>{startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')}</span>
                 </Box>
                 <Typography
                     sx={{paddingLeft: '32px'}}>{endDate.diff(startDate, 'days') + 1} days</Typography>
diff --git a/src/components/Staff/__tests__/MinStaffForm.test.tsx b/src/components/Staff/__tests__/MinStaffForm.test.tsx
deleted file mode 100644
index 6bf0ecc..0000000
--- a/src/components/Staff/__tests__/MinStaffForm.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {render, fireEvent, screen, waitFor, getByLabelText} from "@testing-library/react";
-import { MinStaffForm } from "../MinStaffForm";
-import React from "react";
-
-describe("MinStaffForm", () => {
-  const handleSubmitMock = jest.fn();
-  const cancelHandlerMock = jest.fn();
-  const handleInputChangeMock = jest.fn();
-
-  const props = {
-    port: "Port",
-    terminal: "Terminal",
-    message: "Message",
-    minStaffNumber: 10,
-    handleSubmit: handleSubmitMock,
-    cancelHandler: cancelHandlerMock,
-    handleInputChange: handleInputChangeMock
-
-  };
-
-  it("renders min staff form correctly", () => {
-    const { getByTestId } = render(<MinStaffForm {...props} />);
-    expect(getByTestId('min-staff-form')).toBeInTheDocument();
-  });
-
-  it("handles min staff number submission with valid input", async () => {
-    render(<MinStaffForm {...props} />);
-
-    const input = screen.getByRole('textbox');
-
-    fireEvent.change(input, {target: {value: '20'}});
-
-    fireEvent.click(screen.getByTestId('min-staff-form-submit'));
-
-    await waitFor(() => {
-      expect(handleSubmitMock).toHaveBeenCalledWith(20);
-    });
-  });
-
-  it("shows error when min staff form submission fails", async () => {
-    handleSubmitMock.mockImplementationOnce(() => {
-      throw new Error();
-    });
-
-    const {getByTestId} = render(<MinStaffForm {...props} />);
-    const input = screen.getByRole('textbox');
-
-    fireEvent.change(input, {target: {value: '20'}});
-    fireEvent.click(getByTestId('min-staff-form-submit'));
-
-    await waitFor(() => {
-      expect(getByTestId('min-staff-submit-error')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/components/Staff/__tests__/MinStaffWarning.test.tsx b/src/components/Staff/__tests__/MinStaffWarning.test.tsx
deleted file mode 100644
index e8d2ee6..0000000
--- a/src/components/Staff/__tests__/MinStaffWarning.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render, fireEvent } from "@testing-library/react";
-import { MinStaffWarning } from "../MinStaffWarning";
-import React from "react";
-
-describe("MinStaffWarning", () => {
-  const handleClickMock = jest.fn();
-
-  const props = {
-    message1: "Warning message 1",
-    message2: "Warning message 2",
-    minStaff: 10,
-    handleClick: handleClickMock
-  };
-
-  it("renders correctly", () => {
-    const { getByText } = render(<MinStaffWarning {...props} />);
-    expect(getByText('Warning message 1 10')).toBeInTheDocument();
-    expect(getByText('Warning message 2')).toBeInTheDocument();
-    expect(getByText('+ Add minimum staff')).toBeInTheDocument();
-  });
-
-  it("handles button click", () => {
-    const { getByTestId } = render(<MinStaffWarning {...props} />);
-    const button = getByTestId('mobile-add-min-staff');
-
-    fireEvent.click(button);
-
-    expect(handleClickMock).toHaveBeenCalled();
-  });
-});
diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
index 57e7e07..8d04f16 100644
--- a/src/components/Staff/index.ts
+++ b/src/components/Staff/index.ts
@@ -1,10 +1,4 @@
-export {MinStaffWarning} from './MinStaffWarning'
-export {MinStaffForm} from './MinStaffForm'
-export {StaffSuccess} from './StaffSuccess'
-export type {IStaffSuccess} from './StaffSuccess'
-export type {IMinStaffWarning} from './MinStaffWarning'
-export type {IMinStaffForm} from './MinStaffForm'
-export type {IShiftStaffForm, ShiftStaffFormData} from './ShiftStaffForm'
-export {ShiftStaffForm} from './ShiftStaffForm'
-export type {IEditShiftStaff, IEditShiftStaffForm} from './EditShiftStaffForm'
-export {EditShiftStaffForm} from './EditShiftStaffForm'
+export {StaffUpdateSuccess} from './StaffUpdateSuccess'
+export type {IStaffUpdateSuccess} from './StaffUpdateSuccess'
+export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './UpdateStaffForTimeRangeForm'
+export {UpdateStaffForTimeRangeForm} from './UpdateStaffForTimeRangeForm'
diff --git a/src/components/index.ts b/src/components/index.ts
index c2cd3cc..07249a2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,11 +9,8 @@ export type {IStatusTag} from "./StatusTags";
 export {default as Header} from './Header'
 export type {IHeader, MenuItem} from './Header';
 
-export {StaffSuccess, MinStaffWarning, MinStaffForm} from './Staff'
-export type {IStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'
+export type {IStaffUpdateSuccess} from './Staff'
+export {StaffUpdateSuccess} from './Staff'
 
-export type {IShiftStaffForm, ShiftStaffFormData} from './Staff'
-export {ShiftStaffForm} from './Staff'
-
-export type {IEditShiftStaff, IEditShiftStaffForm} from './Staff'
-export {EditShiftStaffForm} from './Staff'
+export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './Staff'
+export {IUpdateStaffForTimeRangeForm} from './Staff'

From 4be51ba4ca61b0aaf626e54e299290f87dcbcd60 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Tue, 5 Nov 2024 14:20:49 +0000
Subject: [PATCH 41/43] update time range form

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 src/components/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/index.ts b/src/components/index.ts
index 07249a2..22322f5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -13,4 +13,4 @@ export type {IStaffUpdateSuccess} from './Staff'
 export {StaffUpdateSuccess} from './Staff'
 
 export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './Staff'
-export {IUpdateStaffForTimeRangeForm} from './Staff'
+export {UpdateStaffForTimeRangeForm} from './Staff'

From 6d07b6ddced811e1c5500b1ab5350e28ab017e3c Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Tue, 5 Nov 2024 15:10:50 +0000
Subject: [PATCH 42/43] fixing 2 space indent and remove renderInput for date
 picker

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 .../UpdateStaffForTimeRangeForm.stories.tsx   |   4 +-
 .../Staff/UpdateStaffForTimeRangeForm.tsx     | 350 +++++++++---------
 2 files changed, 176 insertions(+), 178 deletions(-)

diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
index 773d1fe..2f98e5f 100644
--- a/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
+++ b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
@@ -20,13 +20,11 @@ const ustdForm: IUpdateStaffForTimeRangeData = {
   endDayAt: moment().add(1, 'day')
 }
 
-
-
 export const UpdateStaffForTimeRangeForm = {
   args: {
     ustd: ustdForm,
     interval: 15,
-     handleSubmit: (essf: IUpdateStaffForTimeRangeData) => {
+    handleSubmit: (essf: IUpdateStaffForTimeRangeData) => {
       console.log('Submit clicked', essf);
     },
     cancelHandler: () => {
diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
index 7b7dc13..fbf2c86 100644
--- a/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
+++ b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {Box, Button, IconButton, TextField, Typography} from "@mui/material";
+import {Box, Button, IconButton, TextField, TextFieldProps, Typography} from "@mui/material";
 import moment, {Moment} from "moment";
 import {TimePicker} from '@mui/x-date-pickers/TimePicker';
 import {DatePicker} from '@mui/x-date-pickers/DatePicker';
@@ -11,196 +11,196 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import PeopleIcon from '@mui/icons-material/People';
 
 export type IUpdateStaffForTimeRangeData = {
-    startDayAt: Moment,
-    startTimeAt: Moment,
-    endTimeAt: Moment,
-    endDayAt: Moment,
-    actualStaff: number
+  startDayAt: Moment,
+  startTimeAt: Moment,
+  endTimeAt: Moment,
+  endDayAt: Moment,
+  actualStaff: number
 }
 
 export interface IUpdateStaffForTimeRangeForm {
-    ustd: IUpdateStaffForTimeRangeData,
-    interval: number,
-    handleSubmit: (ssf: IUpdateStaffForTimeRangeData) => void,
-    cancelHandler: () => void
+  ustd: IUpdateStaffForTimeRangeData,
+  interval: number,
+  handleSubmit: (ssf: IUpdateStaffForTimeRangeData) => void,
+  cancelHandler: () => void
 }
 
 export const UpdateStaffForTimeRangeForm = ({
-                                                ustd,
-                                                interval,
-                                                handleSubmit,
-                                                cancelHandler
+                                              ustd,
+                                              interval,
+                                              handleSubmit,
+                                              cancelHandler
                                             }: IUpdateStaffForTimeRangeForm) => {
-    const [startDate, setStartDate] = useState<Moment>(ustd.startDayAt);
-    const [startTime, setStartTime] = useState<Moment>(ustd.startTimeAt.startOf('day'));
-    const [endTime, setEndTime] = useState<Moment>(ustd.endTimeAt.startOf('day'));
-    const [endDate, setEndDate] = useState<Moment>(ustd.endDayAt);
-    const [staffNumber, setStaffNumber] = useState<number>(ustd.actualStaff);
-    const [error, setError] = useState<string | null>(null);
-    const handleStartDateChange = (date: Moment | null) => {
-        setStartDate(date);
-        setEndDate(date);
-    };
+  const [startDate, setStartDate] = useState<Moment>(ustd.startDayAt);
+  const [startTime, setStartTime] = useState<Moment>(ustd.startTimeAt.startOf('day'));
+  const [endTime, setEndTime] = useState<Moment>(ustd.endTimeAt.startOf('day'));
+  const [endDate, setEndDate] = useState<Moment>(ustd.endDayAt);
+  const [staffNumber, setStaffNumber] = useState<number>(ustd.actualStaff);
+  const [error, setError] = useState<string | null>(null);
+  const handleStartDateChange = (date: Moment | null) => {
+    setStartDate(date?.startOf('day') || moment());
+    setEndDate(date?.startOf('day') || moment());
+  };
 
-    const handleEndDateChange = (date: Moment | null) => {
-        setEndDate(date);
-    };
+  const handleEndDateChange = (date: Moment | null) => {
+    setEndDate(date?.startOf('day') || moment());
+  };
 
-    const handleStartTimeChange = (date: Moment | null) => {
-        setStartTime(date);
-        if (date && endTime && date.isAfter(endTime)) {
-            setError("Start time must be less than or equal to end time.");
-            return;
-        }
-        setError(null);
-    };
+  const handleStartTimeChange = (date: Moment | null) => {
+    setStartTime(date?.startOf('minute') || moment());
+    if (date && endTime && date.isAfter(endTime)) {
+      setError("Start time must be less than or equal to end time.");
+      return;
+    }
+    setError(null);
+  };
 
-    const handleEndTimeChange = (date: Moment | null) => {
-        setEndTime(date);
-        if (date && startTime && date.isBefore(startTime)) {
-            setError("End time must be greater than or equal to start time.");
-            return;
-        }
-        setError(null);
-    };
+  const handleEndTimeChange = (date: Moment | null) => {
+    setEndTime(date?.startOf('minute') || moment());
+    if (date && startTime && date.isBefore(startTime)) {
+      setError("End time must be greater than or equal to start time.");
+      return;
+    }
+    setError(null);
+  };
 
-    const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-        setStaffNumber(event.target.value as number);
-    };
+  const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStaffNumber(event.target.value as number);
+  };
 
-    const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
-        const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
-        console.log("endTime.valueOf", endTime.valueOf())
-        console.log("startTime.valueOf", startTime.valueOf())
-        console.log("selectedDate", startDate.valueOf())
-        console.log("diffInMinutes", diffInMinutes)
-        console.log("staffNumber", staffNumber)
-        const ess: IUpdateStaffForTimeRangeData = {
-            startDayAt: startDate,
-            startTimeAt: startTime,
-            endTimeAt: endTime,
-            endDayAt: endDate,
-            actualStaff: staffNumber
-        };
-        handleSubmit(ess);
-    }
-    const duration = moment.duration(endTime.diff(startTime));
-    const hours = Math.floor(duration.asHours());
-    const minutes = duration.minutes();
+  const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
+    const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
+    console.log("endTime.valueOf", endTime.valueOf())
+    console.log("startTime.valueOf", startTime.valueOf())
+    console.log("selectedDate", startDate.valueOf())
+    console.log("diffInMinutes", diffInMinutes)
+    console.log("staffNumber", staffNumber)
+    const ess: IUpdateStaffForTimeRangeData = {
+      startDayAt: startDate,
+      startTimeAt: startTime,
+      endTimeAt: endTime,
+      endDayAt: endDate,
+      actualStaff: staffNumber
+    };
+    handleSubmit(ess);
+  }
+  const duration = moment.duration(endTime.diff(startTime));
+  const hours = Math.floor(duration.asHours());
+  const minutes = duration.minutes();
 
-    return <Box data-testid={`shift-staff-form`}
-                sx={{
-                    paddingTop: '10px',
-                    paddingLeft: '20px',
-                    paddingBottom: '10px',
-                    paddingRight: '20px',
-                    width: '400px'
-                }}>
-        <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
-            <Typography variant="h2" component="h2" fontWeight={"bold"}>Edit staff</Typography>
-            <IconButton
-                aria-label="close"
-                color="inherit"
-                size="small"
-                onClick={cancelHandler}>
-                <CloseIcon fontSize="inherit"/>
-            </IconButton>
-        </Box>
-        <Box sx={{paddingTop: '10px'}}>
-            <Typography variant="h3" component="h3">Date</Typography>
-            <Box sx={{paddingTop: '10px'}}>
-                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-                    <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Start Date" value={startDate}
-                                onChange={handleStartDateChange}
-                                format="DD MMMM YYYY"
-                                renderInput={(params) => <TextField {...params} />}/>
-                </LocalizationProvider>
-            </Box>
-            <Box sx={{paddingTop: '10px'}}>
-                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-                    <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="End Date" value={endDate}
-                                onChange={handleEndDateChange}
-                                format="DD MMMM YYYY"
-                                renderInput={(params) => <TextField {...params} />}/>
-                </LocalizationProvider>
-            </Box>
-        </Box>
-        <Box sx={{paddingTop: '10px'}}>
-            <Typography variant="h3" component="h3">Time</Typography>
-            <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
-                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-                    <TimePicker sx={{backgroundColor: '#FFFFFF', width: '50%'}} label="Start Time"
-                                value={startTime}
-                                ampm={false}
-                                onChange={handleStartTimeChange}
-                                minutesStep={interval}
-                                views={['hours', 'minutes']}
-                                renderInput={(params) => <TextField {...params} />}/>
-                </LocalizationProvider>
-                <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
-                    <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '50%'}} label="End Time"
-                                value={endTime}
-                                onChange={handleEndTimeChange}
-                                minutesStep={interval}
-                                ampm={false}
-                                views={['hours', 'minutes']}
-                                renderInput={(params) => <TextField {...params} />}/>
-                </LocalizationProvider>
-            </Box>
-        </Box>
-        <Box sx={{paddingTop: '10px', paddingBottom: '10px'}}>
-            <Typography variant="h3" component="h3">Staff</Typography>
-            <Box sx={{paddingTop: '10px'}}>
-                <TextField sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Staff Number"
-                           value={staffNumber}
-                           onChange={handleStaffNumberChange} type="number"/>
-            </Box>
+  return <Box data-testid={`shift-staff-form`}
+              sx={{
+                paddingTop: '10px',
+                paddingLeft: '20px',
+                paddingBottom: '10px',
+                paddingRight: '20px',
+                width: '400px'
+              }}>
+    <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+      <Typography variant="h2" component="h2" fontWeight={"bold"}>Edit staff</Typography>
+      <IconButton
+        aria-label="close"
+        color="inherit"
+        size="small"
+        onClick={cancelHandler}>
+        <CloseIcon fontSize="inherit"/>
+      </IconButton>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Typography variant="h3" component="h3">Date</Typography>
+      <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Start Date" value={startDate}
+                      onChange={handleStartDateChange}
+                      format="DD MMMM YYYY"/>
+        </LocalizationProvider>
+      </Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}}
+                      label="End Date"
+                      value={endDate}
+                      onChange={handleEndDateChange}
+                      format="DD MMMM YYYY"
+          />
+        </LocalizationProvider>
+      </Box>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Typography variant="h3" component="h3">Time</Typography>
+      <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <TimePicker sx={{backgroundColor: '#FFFFFF', width: '50%'}} label="Start Time"
+                      value={startTime}
+                      ampm={false}
+                      onChange={handleStartTimeChange}
+                      minutesStep={interval}
+                      views={['hours', 'minutes']}
+          />
+        </LocalizationProvider>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '50%'}} label="End Time"
+                      value={endTime}
+                      onChange={handleEndTimeChange}
+                      minutesStep={interval}
+                      ampm={false}
+                      views={['hours', 'minutes']}/>
+        </LocalizationProvider>
+      </Box>
+    </Box>
+    <Box sx={{paddingTop: '10px', paddingBottom: '10px'}}>
+      <Typography variant="h3" component="h3">Staff</Typography>
+      <Box sx={{paddingTop: '10px'}}>
+        <TextField sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Staff Number"
+                   value={staffNumber}
+                   onChange={handleStaffNumberChange} type="number"/>
+      </Box>
+    </Box>
+    {error && <Typography color="error" sx={{paddingTop: '10px'}}>{error}</Typography>}
+    <Box sx={{
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      paddingLeft: '10px',
+      paddingRight: '20px',
+      backgroundColor: '#E6E9F1'
+    }}>
+      <Typography variant="h6">Summary of Selections:</Typography>
+      <Box sx={{paddingTop: '10px'}}>
+        <Box sx={{display: 'flex', alignItems: 'center'}}>
+          <CalendarTodayIcon sx={{marginRight: '5px'}}/>
+          <span
+            style={{fontWeight: 'bold'}}>{startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')}</span>
         </Box>
-        {error && <Typography color="error" sx={{paddingTop: '10px'}}>{error}</Typography>}
-        <Box sx={{
-            paddingTop: '10px',
-            paddingBottom: '10px',
-            paddingLeft: '10px',
-            paddingRight: '20px',
-            backgroundColor: '#E6E9F1'
-        }}>
-            <Typography variant="h6">Summary of Selections:</Typography>
-            <Box sx={{paddingTop: '10px'}}>
-                <Box sx={{display: 'flex', alignItems: 'center'}}>
-                    <CalendarTodayIcon sx={{marginRight: '5px'}}/>
-                    <span
-                        style={{fontWeight: 'bold'}}>{startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')}</span>
-                </Box>
-                <Typography
-                    sx={{paddingLeft: '32px'}}>{endDate.diff(startDate, 'days') + 1} days</Typography>
-            </Box>
-            <Box sx={{paddingTop: '10px'}}>
-                <Box sx={{display: 'flex', alignItems: 'center'}}>
-                    <AccessTimeIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')}</span>
-                </Box>
-                <Typography
-                    sx={{paddingLeft: '32px'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</Typography>
-            </Box>
-            <Box sx={{paddingTop: '10px'}}>
-                <Box sx={{display: 'flex', alignItems: 'center'}}>
-                    <PeopleIcon sx={{marginRight: '5px'}}/>
-                    <span style={{fontWeight: 'bold'}}>{staffNumber} Staff</span>
-                </Box>
-            </Box>
+        <Typography
+          sx={{paddingLeft: '32px'}}>{endDate.diff(startDate, 'days') + 1} days</Typography>
+      </Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <Box sx={{display: 'flex', alignItems: 'center'}}>
+          <AccessTimeIcon sx={{marginRight: '5px'}}/>
+          <span style={{fontWeight: 'bold'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')}</span>
         </Box>
-        <Box sx={{paddingTop: '10px'}}>
-            <Button sx={{
-                textTransform: 'none',
-                paddingLeft: '10px',
-                color: 'white',
-                width: '100%',
-                backgroundColor: 'primary.main',
-                '&:hover': {
-                    backgroundColor: 'primary.dark',
-                }
-            }} disabled={!!error} onClick={handleSubmitForm}>Save staff updates</Button>
+        <Typography
+          sx={{paddingLeft: '32px'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</Typography>
+      </Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <Box sx={{display: 'flex', alignItems: 'center'}}>
+          <PeopleIcon sx={{marginRight: '5px'}}/>
+          <span style={{fontWeight: 'bold'}}>{staffNumber} Staff</span>
         </Box>
+      </Box>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Button sx={{
+        textTransform: 'none',
+        paddingLeft: '10px',
+        color: 'white',
+        width: '100%',
+        backgroundColor: 'primary.main',
+        '&:hover': {
+          backgroundColor: 'primary.dark',
+        }
+      }} disabled={!!error} onClick={handleSubmitForm}>Save staff updates</Button>
     </Box>
+  </Box>
 
 }

From 52ac3ce135a13c27820a3e65b529f014e5ce38e5 Mon Sep 17 00:00:00 2001
From: Nilesh Gupta <guptanilesh13@gmail.com>
Date: Wed, 6 Nov 2024 11:09:32 +0000
Subject: [PATCH 43/43] adding slot to datapicker to remove warning

Signed-off-by: Nilesh Gupta <guptanilesh13@gmail.com>
---
 package.json                                         | 2 +-
 src/components/Staff/UpdateStaffForTimeRangeForm.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 76363b6..30a2190 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@drt/drt-react-components",
-  "version": "1.5.4",
+  "version": "1.5.4-branch.0",
   "description": "React components for DRT applications",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
index fbf2c86..aef92ab 100644
--- a/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
+++ b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
@@ -112,7 +112,9 @@ export const UpdateStaffForTimeRangeForm = ({
         <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
           <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Start Date" value={startDate}
                       onChange={handleStartDateChange}
-                      format="DD MMMM YYYY"/>
+                      format="DD MMMM YYYY"
+                      slots={{ textField: (params) => <TextField {...params} /> }}
+          />
         </LocalizationProvider>
       </Box>
       <Box sx={{paddingTop: '10px'}}>
@@ -122,6 +124,7 @@ export const UpdateStaffForTimeRangeForm = ({
                       value={endDate}
                       onChange={handleEndDateChange}
                       format="DD MMMM YYYY"
+                      slots={{ textField: (params) => <TextField {...params} /> }}
           />
         </LocalizationProvider>
       </Box>