Connected frontend new contact, new address and shipments to backend

frontend/src/components/DewarStepper.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material';
+import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
+import StoreIcon from '@mui/icons-material/Store';
+import bottleIcon from '../assets/icons/bottle-svgrepo-com-grey.svg';
+import { Dewar } from "../../openapi";
+
+// Constants
+const ICON_STYLE = { width: 24, height: 24 };
+
+// Define types for icons mapping.
+const ICONS: { [key: number]: React.ReactElement } = {
+    0: <img src={bottleIcon} alt="Bottle Icon" style={ICON_STYLE} />,
+    1: <AirplanemodeActiveIcon style={ICON_STYLE} />,
+    2: <StoreIcon style={ICON_STYLE} />,
+};
+
+// Define StepIconContainer to accept correct props and handle typing better
+interface StepIconContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    color: string;
+}
+
+const StepIconContainer: React.FC<StepIconContainerProps> = ({ color, children, ...rest }) => (
+    <div style={{ color }} {...rest}>
+        {children}
+    </div>
+);
+
+type StepIconComponentProps = {
+    icon: number;
+    dewar: Dewar;
+} & StepIconProps;
+
+const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
+    const { iconIndex, color } = getIconProperties(icon, dewar);
+
+    return (
+        <StepIconContainer color={color} {...props}>
+            {ICONS[iconIndex]}
+        </StepIconContainer>
+    );
+};
+
+// Extracted function to determine icon properties
+const getIconProperties = (icon: number, dewar: Dewar) => {
+    const iconIndex = icon - 1;
+    const color = determineIconColor(dewar, iconIndex);
+    return { iconIndex, color };
+};
+
+// Original determineIconColor function remains unchanged
+const determineIconColor = (dewar: Dewar, index: number) => {
+    let color = 'grey';
+
+    if (index === 0) {
+        if (dewar.status === 'In Preparation') {
+            color = 'blue';
+        } else if (dewar.status === 'Ready for Shipping') {
+            color = 'green';
+        }
+    }
+    if (index === 1) {
+        if (dewar.status === 'Ready for Shipping' && dewar.shippingStatus !== 'shipped') {
+            color = 'blue';
+        } else if (dewar.shippingStatus === 'shipped') {
+            color = 'green';
+        }
+    }
+    if (index === 2) {
+        if (dewar.shippingStatus === 'shipped' && dewar.arrivalStatus !== 'arrived') {
+            color = 'blue';
+        } else if (dewar.arrivalStatus === 'arrived') {
+            color = 'green';
+        }
+    }
+    return color;
+};
+
+// Define your steps
+const steps = ['In Preparation', 'Ready for Shipping', 'Arrived'];
+
+const CustomStepper = ({ dewar }: { dewar: Dewar }) => {
+    // Determine the current active step
+    const activeStep = steps.indexOf(dewar.status) !== -1 ? steps.indexOf(dewar.status) : 0;
+
+    return (
+        <Stepper alternativeLabel activeStep={activeStep}>
+            {steps.map((label, index) => (
+                <Step key={label}>
+                    <StepLabel
+                        StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index + 1} dewar={dewar} />}
+                    >
+                        {label}
+                    </StepLabel>
+                    <Typography variant="body2">
+                        {index === 0 ? dewar.ready_date :
+                            index === 1 ? dewar.shipping_date :
+                                index === 2 ? dewar.arrival_date : ''}
+                    </Typography>
+                </Step>
+            ))}
+        </Stepper>
+    );
+};
+
+export default CustomStepper;