Add option to change the dewar status

frontend/src/components/DewarStepper.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material';
+import { Stepper, Step, StepLabel, StepIconProps, Typography, Menu, MenuItem } from '@mui/material';
 import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
 import StoreIcon from '@mui/icons-material/Store';
 import RecycleIcon from '@mui/icons-material/Restore';
-import { Dewar } from "../../openapi";
+import { Dewar, DewarsService } from "../../openapi";
+import { STATUS_TO_STEP, DewarStatus, getStatusStepIndex, determineIconColor } from './statusUtils'; // Utilities moved to a new file
 
 const ICON_STYLE = { width: 24, height: 24 };
 
-// Define the possible statuses
-type DewarStatus = 'In Preparation' | 'Ready for Shipping' | 'Shipped' | 'Not Arrived' | 'Arrived' | 'Returned' | 'Delayed';
-
 // Inline SVG Component
 const BottleIcon: React.FC<{ fill: string }> = ({ fill }) => (
     <svg fill={fill} height="24px" width="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.777 276.777">
@@ -17,21 +15,15 @@ const BottleIcon: React.FC<{ fill: string }> = ({ fill }) => (
     </svg>
 );
 
-// Define types for icons mapping.
 const ICONS: { [key: number]: React.ReactElement } = {
     0: <BottleIcon fill="grey" />,
-    1: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'blue' }} />,  // 'Ready for Shipping' -> Active
+    1: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'blue' }} />,
-    2: <StoreIcon style={ICON_STYLE} />,  // 'Not Arrived'
+    2: <StoreIcon style={ICON_STYLE} />,
-    3: <RecycleIcon style={ICON_STYLE} />,  // 'Returned'
+    3: <RecycleIcon style={ICON_STYLE} />,
-    4: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'green' }} />, // 'Shipped' - Active
+    4: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'green' }} />,
-    5: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'orange' }} />, // 'Delayed'
+    5: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'orange' }} />,
 };
 
-// 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}
@@ -41,26 +33,83 @@ const StepIconContainer: React.FC<StepIconContainerProps> = ({ color, children,
 type StepIconComponentProps = {
     icon: number;
     dewar: Dewar;
+    isSelected: boolean;
 } & StepIconProps;
 
-const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
+const StepIconComponent = ({ icon, dewar, isSelected, ...props }: StepIconComponentProps) => {
-    const { iconIndex, color} = getIconProperties(icon, dewar);
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const handleIconEnter = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (isSelected && icon === 0) {
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    const handleIconLeave = () => {
+        setAnchorEl(null);
+    };
 
-    // Adjust icon color for the bottle especially since it's an SVG element
+    const handleStatusChange = async (status: DewarStatus) => {
+        try {
+            const today = new Date().toISOString().split('T')[0];
+            const payload = {
+                dewar_id: dewar.id,
+                dewar_name: dewar.dewar_name,
+                tracking_number: dewar.tracking_number,
+                number_of_pucks: dewar.number_of_pucks,
+                number_of_samples: dewar.number_of_samples,
+                status: status,
+                ready_date: status === 'Ready for Shipping' ? today : dewar.ready_date,
+                shipping_date: dewar.shipping_date,
+                arrival_date: dewar.arrival_date,
+                returning_date: dewar.returning_date,
+                qrcode: dewar.qrcode,
+                return_address_id: dewar.return_address_id,
+                contact_person_id: dewar.contact_person_id,
+            };
+
+            await DewarsService.updateDewarDewarsDewarIdPut(dewar.id || '', payload);
+            setAnchorEl(null);
+        } catch (error) {
+            console.error('Failed to update dewar status:', error);
+            alert('Failed to update dewar status. Please try again.');
+        }
+    };
+
+    const { iconIndex, color } = getIconProperties(icon, dewar);
     const IconComponent = ICONS[iconIndex];
     const iconProps = iconIndex === 0 ? { fill: color } : {};
 
     return (
-        <StepIconContainer color={color} {...props}>
+        <div
-            {IconComponent
+            onMouseEnter={handleIconEnter}
-                ? React.cloneElement(IconComponent, iconProps)
+            onMouseLeave={handleIconLeave}
-                : <Typography variant="body2" color="error">Invalid icon</Typography>
+            style={{ position: 'relative' }}
-            }
+        >
-        </StepIconContainer>
+            <StepIconContainer color={color} {...props}>
+                {IconComponent
+                    ? React.cloneElement(IconComponent, iconProps)
+                    : <Typography variant="body2" color="error">Invalid icon</Typography>
+                }
+            </StepIconContainer>
+
+            <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleIconLeave}
+                MenuListProps={{
+                    onMouseEnter: () => setAnchorEl(anchorEl),
+                    onMouseLeave: handleIconLeave,
+                }}
+            >
+                {['Ready for Shipping'].map((status) => (
+                    <MenuItem key={status} onClick={() => handleStatusChange(status as DewarStatus)}>
+                        {status}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </div>
     );
 };
 
-// Extracted function to determine icon properties
 const getIconProperties = (icon: number, dewar: Dewar) => {
     const status = dewar.status as DewarStatus;
     const iconIndex = status === 'Delayed' && icon === 1 ? 5 : icon;
@@ -69,40 +118,24 @@ const getIconProperties = (icon: number, dewar: Dewar) => {
     return { iconIndex, color, fill };
 };
 
-const STATUS_TO_STEP: Record<DewarStatus, number> = {
-    'In Preparation': 0,
-    'Ready for Shipping': 1,
-    'Shipped': 1,
-    'Delayed': 1,
-    'Not Arrived': 2,
-    'Arrived': 2,
-    'Returned': 3
-};
-
-const getStatusStepIndex = (status: DewarStatus): number => STATUS_TO_STEP[status];
-
-const determineIconColor = (iconIndex: number, status: DewarStatus): string => {
-    const statusIndex = getStatusStepIndex(status);
-    if (status === 'Delayed' && iconIndex === 1) {
-        return 'orange';
-    }
-    return iconIndex <= statusIndex ? (iconIndex === statusIndex ? (status === 'Shipped' ? 'green' : 'blue') : 'green') : 'grey';
-};
-
-// Define your steps
 const steps = ['In-House', 'Transit', 'At SLS', 'Returned'];
 
-const CustomStepper = ({ dewar }: { dewar: Dewar }) => {
+type CustomStepperProps = {
-    // Determine the current active step
+    dewar: Dewar;
+    selectedDewarId: string | null;
+}
+
+const CustomStepper = ({ dewar, selectedDewarId }: CustomStepperProps) => {
     const activeStep = getStatusStepIndex(dewar.status as DewarStatus);
+    const isSelected = dewar.id === selectedDewarId;
 
     return (
-        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' /* Or any other preferred width */, maxWidth: '600px', margin: '0 auto' }}>
+        <div style={{ display: 'flex', justifyContent: 'center', width: '100%', maxWidth: '600px', margin: '0 auto' }}>
             <Stepper alternativeLabel activeStep={activeStep} style={{ width: '100%' }}>
                 {steps.map((label, index) => (
                     <Step key={label}>
                         <StepLabel
-                            StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index} dewar={dewar} />}
+                            StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index} dewar={dewar} isSelected={isSelected} />}
                         >
                             {label}
                         </StepLabel>

frontend/src/components/ShipmentDetails.tsx

@@ -311,7 +311,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
                                 flexDirection: 'row',
                                 justifyContent: 'space-between'
                             }}>
-                                <CustomStepper dewar={dewar} />
+                                <CustomStepper dewar={dewar} selectedDewarId={localSelectedDewar?.id} />
 
                             </Box>
 

frontend/src/components/statusUtils.ts

@@ -0,0 +1,24 @@
+// statusUtils.ts
+// Utility functions to handle dewar statuses and icon colors
+
+export type DewarStatus = 'In Preparation' | 'Ready for Shipping' | 'Shipped' | 'Not Arrived' | 'Arrived' | 'Returned' | 'Delayed';
+
+export const STATUS_TO_STEP: Record<DewarStatus, number> = {
+    'In Preparation': 0,
+    'Ready for Shipping': 1,
+    'Shipped': 1,
+    'Delayed': 1,
+    'Not Arrived': 2,
+    'Arrived': 2,
+    'Returned': 3
+};
+
+export const getStatusStepIndex = (status: DewarStatus): number => STATUS_TO_STEP[status];
+
+export const determineIconColor = (iconIndex: number, status: DewarStatus): string => {
+    const statusIndex = getStatusStepIndex(status);
+    if (status === 'Delayed' && iconIndex === 1) {
+        return 'orange';
+    }
+    return iconIndex <= statusIndex ? (iconIndex === statusIndex ? (status === 'Shipped' ? 'green' : 'blue') : 'green') : 'grey';
+};