now associating a dewar to a slot

logistics/src/components/CountdownTimer.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { Typography } from '@mui/material';
+
+interface CountdownTimerProps {
+    totalSeconds: number;
+}
+
+const CountdownTimer: React.FC<CountdownTimerProps> = ({ totalSeconds }) => {
+    const [timeLeft, setTimeLeft] = useState(totalSeconds);
+
+    useEffect(() => {
+        const timerId = setInterval(() => {
+            setTimeLeft(prev => Math.max(prev - 1, 0));
+        }, 1000);
+
+        return () => clearInterval(timerId);
+    }, []);
+
+    const formatTime = (seconds: number) => {
+        const hrs = Math.floor(seconds / 3600);
+        const min = Math.floor((seconds % 3600) / 60);
+        const sec = seconds % 60;
+        return `${hrs}h ${min}m ${sec}s`;
+    };
+
+    return (
+        <Typography variant="body2" style={{ color: timeLeft < 300 ? 'red' : 'white' }} >  {/* Warn with red color if less than 5 minutes */}
+            {`Time until refill: ${formatTime(timeLeft)}`}
+        </Typography>
+    );
+};
+
+export default CountdownTimer;

logistics/src/components/Slots.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box, Typography } from '@mui/material';
 import styled from 'styled-components';
 import LocalGasStationIcon from '@mui/icons-material/LocalGasStation'; // Icon for refilling indicator.
+import CountdownTimer from './CountdownTimer'; // Import the CountdownTimer component
 
 export interface SlotData {
     id: string;
@@ -12,6 +13,7 @@ export interface SlotData {
     dewar_unique_id?: string; // Optional additional information.
     dewar_name?: string;     // Optional dewar information.
     needs_refill?: boolean;  // Indicator for refill requirement.
+    time_until_refill?: number;  // Time until refill in seconds, optional field
 }
 
 interface SlotProps {
@@ -24,7 +26,7 @@ const StyledSlot = styled(Box)<{ isSelected: boolean; isOccupied: boolean }>`
     padding: 16px;
     margin: 8px;
     width: 150px;           // Increase the width to accommodate more info.
-    height: 150px;          // Increase the height to accommodate more info.
+    height: 200px;          // Increase the height to accommodate more info.
     background-color: ${({ isSelected, isOccupied }) =>
             isSelected ? '#3f51b5' : isOccupied ? '#f44336' : '#4caf50'};
     color: white;
@@ -57,6 +59,10 @@ const Slot: React.FC<SlotProps> = ({ data, isSelected, onSelect }) => {
                 <Typography variant="body2">{`ID: ${data.dewar_unique_id}`}</Typography>
             )}
             {data.needs_refill && <LocalGasStationIcon />}
+            {/* Display countdown timer only for slots that have an associated dewar */}
+            {data.dewar_unique_id && data.time_until_refill !== undefined && (
+                <CountdownTimer totalSeconds={data.time_until_refill} />
+            )}
         </StyledSlot>
     );
 };