Connected frontend shipments to backend
This commit is contained in:
GotthardG
@ -217,7 +217,7 @@ const Calendar: React.FC = () => {
|
||||
eventContent={eventContent}
|
||||
height={700}
|
||||
headerToolbar={{
|
||||
left: 'prev,next today',
|
||||
left: 'prev,next',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth',
|
||||
}}
|
||||
|
||||
@ -1,172 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Box, Typography, TextField, Button, Select, MenuItem, Snackbar } from '@mui/material';
|
||||
import QRCode from 'react-qr-code';
|
||||
import { Dewar, ContactPerson, Address } from '../types.ts';
|
||||
|
||||
interface DewarDetailsProps {
|
||||
dewar: Dewar | null;
|
||||
trackingNumber: string;
|
||||
setTrackingNumber: React.Dispatch<React.SetStateAction<string>>;
|
||||
onGenerateQRCode: () => void;
|
||||
contactPersons: ContactPerson[];
|
||||
returnAddresses: Address[];
|
||||
addNewContactPerson: (name: string) => void;
|
||||
addNewReturnAddress: (address: string) => void;
|
||||
ready_date?: string;
|
||||
shipping_date?: string; // Make this optional
|
||||
arrival_date?: string; // Make this optional
|
||||
}
|
||||
|
||||
const DewarDetails: React.FC<DewarDetailsProps> = ({
|
||||
dewar,
|
||||
trackingNumber,
|
||||
setTrackingNumber,
|
||||
onGenerateQRCode,
|
||||
contactPersons,
|
||||
returnAddresses,
|
||||
addNewContactPerson,
|
||||
addNewReturnAddress,
|
||||
}) => {
|
||||
const [selectedContactPerson, setSelectedContactPerson] = React.useState<string>('');
|
||||
const [selectedReturnAddress, setSelectedReturnAddress] = React.useState<string>('');
|
||||
const [newContactPerson, setNewContactPerson] = React.useState<string>('');
|
||||
const [newReturnAddress, setNewReturnAddress] = React.useState<string>('');
|
||||
const [feedbackMessage, setFeedbackMessage] = React.useState<string>('');
|
||||
const [openSnackbar, setOpenSnackbar] = React.useState<boolean>(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (contactPersons.length > 0) {
|
||||
setSelectedContactPerson(contactPersons[0].name); // Default to the first contact person
|
||||
}
|
||||
if (returnAddresses.length > 0) {
|
||||
setSelectedReturnAddress(returnAddresses[0].address); // Default to the first return address
|
||||
}
|
||||
}, [contactPersons, returnAddresses]);
|
||||
|
||||
if (!dewar) {
|
||||
return <Typography>No dewar selected.</Typography>;
|
||||
}
|
||||
|
||||
const handleAddContact = () => {
|
||||
if (newContactPerson.trim() === '') {
|
||||
setFeedbackMessage('Please enter a valid contact person name.');
|
||||
} else {
|
||||
addNewContactPerson(newContactPerson);
|
||||
setNewContactPerson('');
|
||||
setFeedbackMessage('Contact person added successfully.');
|
||||
}
|
||||
setOpenSnackbar(true);
|
||||
};
|
||||
|
||||
const handleAddAddress = () => {
|
||||
if (newReturnAddress.trim() === '') {
|
||||
setFeedbackMessage('Please enter a valid return address.');
|
||||
} else {
|
||||
addNewReturnAddress(newReturnAddress);
|
||||
setNewReturnAddress('');
|
||||
setFeedbackMessage('Return address added successfully.');
|
||||
}
|
||||
setOpenSnackbar(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ marginTop: 2 }}>
|
||||
<Typography variant="h6">Selected Dewar: {dewar.dewar_name}</Typography>
|
||||
|
||||
<TextField
|
||||
label="Tracking Number"
|
||||
value={trackingNumber}
|
||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{ width: '300px', marginBottom: 2 }}
|
||||
/>
|
||||
|
||||
{/* QR Code display */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 2 }}>
|
||||
<Box sx={{ width: 80, height: 80, backgroundColor: '#e0e0e0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
{dewar.qrcode ? (
|
||||
<QRCode value={dewar.qrcode} size={70} />
|
||||
) : (
|
||||
<Typography>No QR code available</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Button variant="contained" onClick={onGenerateQRCode}>
|
||||
Generate QR Code
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body1">Number of Pucks: {dewar.number_of_pucks}</Typography>
|
||||
<Typography variant="body1">Number of Samples: {dewar.number_of_samples}</Typography>
|
||||
|
||||
{/* Dropdown for Contact Person */}
|
||||
<Typography variant="body1">Current Contact Person:</Typography>
|
||||
<Select
|
||||
value={selectedContactPerson}
|
||||
onChange={(e) => setSelectedContactPerson(e.target.value)}
|
||||
displayEmpty
|
||||
fullWidth
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
<MenuItem value="" disabled>Select Contact Person</MenuItem>
|
||||
{contactPersons.map((person) => (
|
||||
<MenuItem key={person.id} value={person.name}>{person.name}</MenuItem>
|
||||
))}
|
||||
<MenuItem value="add">Add New Contact Person</MenuItem>
|
||||
</Select>
|
||||
{selectedContactPerson === "add" && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 2 }}>
|
||||
<TextField
|
||||
label="New Contact Person"
|
||||
value={newContactPerson}
|
||||
onChange={(e) => setNewContactPerson(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{ marginRight: 1, flexGrow: 1 }}
|
||||
/>
|
||||
<Button variant="contained" onClick={handleAddContact}>
|
||||
Add
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Dropdown for Return Address */}
|
||||
<Typography variant="body1">Current Return Address:</Typography>
|
||||
<Select
|
||||
value={selectedReturnAddress}
|
||||
onChange={(e) => setSelectedReturnAddress(e.target.value)}
|
||||
displayEmpty
|
||||
fullWidth
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
<MenuItem value="" disabled>Select Return Address</MenuItem>
|
||||
{returnAddresses.map((address) => (
|
||||
<MenuItem key={address.id} value={address.address}>{address.address}</MenuItem>
|
||||
))}
|
||||
<MenuItem value="add">Add New Return Address</MenuItem>
|
||||
</Select>
|
||||
{selectedReturnAddress === "add" && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 2 }}>
|
||||
<TextField
|
||||
label="New Return Address"
|
||||
value={newReturnAddress}
|
||||
onChange={(e) => setNewReturnAddress(e.target.value)}
|
||||
variant="outlined"
|
||||
sx={{ marginRight: 1, flexGrow: 1 }}
|
||||
/>
|
||||
<Button variant="contained" onClick={handleAddAddress}>
|
||||
Add
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Snackbar for feedback messages */}
|
||||
<Snackbar
|
||||
open={openSnackbar}
|
||||
autoHideDuration={6000}
|
||||
onClose={() => setOpenSnackbar(false)}
|
||||
message={feedbackMessage}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DewarDetails;
|
||||
@ -1,54 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import DewarDetails from './DewarDetails.tsx';
|
||||
import { Shipment, ContactPerson, Address, Dewar } from '../types.ts';
|
||||
import shipmentData from '../../public/shipmentsdb.json'; // Adjust the path to where your JSON file is stored
|
||||
|
||||
const ParentComponent = () => {
|
||||
const [dewars, setDewars] = useState<Dewar[]>([]);
|
||||
const [contactPersons, setContactPersons] = useState<ContactPerson[]>([]);
|
||||
const [returnAddresses, setReturnAddresses] = useState<Address[]>([]);
|
||||
const [selectedShipment, setSelectedShipment] = useState<Shipment | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const firstShipment = shipmentData.shipments[0] as Shipment; // Ensure proper typing
|
||||
setSelectedShipment(firstShipment);
|
||||
setContactPersons(firstShipment.contact_person || []); // Set to array directly
|
||||
if (firstShipment.return_address) {
|
||||
setReturnAddresses(firstShipment.return_address); // Set to array directly
|
||||
}
|
||||
|
||||
const dewarsWithId = firstShipment.dewars.map((dewar, index) => ({
|
||||
...dewar,
|
||||
id: `${firstShipment.shipment_id}-Dewar-${index + 1}`,
|
||||
}));
|
||||
|
||||
setDewars(dewarsWithId);
|
||||
}, []);
|
||||
|
||||
const addNewContactPerson = (name: string) => {
|
||||
const newContact: ContactPerson = { id: `${contactPersons.length + 1}`, name };
|
||||
setContactPersons((prev) => [...prev, newContact]);
|
||||
};
|
||||
|
||||
const addNewReturnAddress = (address: string) => {
|
||||
const newAddress: Address = { id: `${returnAddresses.length + 1}`, address };
|
||||
setReturnAddresses((prev) => [...prev, newAddress]);
|
||||
};
|
||||
|
||||
const selectedDewar = dewars[0]; // Just picking the first dewar for demonstration
|
||||
|
||||
return (
|
||||
<DewarDetails
|
||||
dewar={selectedDewar}
|
||||
trackingNumber={''}
|
||||
setTrackingNumber={() => {}}
|
||||
onGenerateQRCode={() => {}}
|
||||
contactPersons={contactPersons}
|
||||
returnAddresses={returnAddresses}
|
||||
addNewContactPerson={addNewContactPerson}
|
||||
addNewReturnAddress={addNewReturnAddress}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParentComponent;
|
||||
@ -1,9 +0,0 @@
|
||||
// Planning.tsx
|
||||
import React from 'react';
|
||||
import CustomCalendar from './Calendar.tsx';
|
||||
|
||||
const PlanningView: React.FC = () => {
|
||||
return <CustomCalendar />;
|
||||
};
|
||||
|
||||
export default PlanningView;
|
||||
@ -11,36 +11,21 @@ import Container from '@mui/material/Container';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import { Button } from '@mui/material';
|
||||
import { Link } from 'react-router-dom'; // Import Link for navigation
|
||||
import logo from '../assets/icons/psi_01_sn.svg';
|
||||
import '../App.css';
|
||||
import { Shipment, Dewar, ContactPerson, Address, Proposal } from '../types.ts'; // Import types from a single statement
|
||||
import ShipmentView from './ShipmentView.tsx';
|
||||
import PlanningView from './PlanningView.tsx';
|
||||
|
||||
const pages = ['Validator', 'Shipments', 'Samples', 'Planning', 'Experiments', 'Results', 'Docs'];
|
||||
// Page definitions for navigation
|
||||
const pages = [
|
||||
{ name: 'Home', path: '/' },
|
||||
{ name: 'Shipments', path: '/shipments' },
|
||||
{ name: 'Planning', path: '/planning' },
|
||||
{ name: 'Results', path: '/results' }
|
||||
];
|
||||
|
||||
const ResponsiveAppBar: React.FC = () => {
|
||||
const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
|
||||
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
|
||||
const [selectedPage, setSelectedPage] = useState<string>('Shipments');
|
||||
const [newShipment, setNewShipment] = useState<Shipment>({
|
||||
shipment_id: '',
|
||||
shipment_name: '',
|
||||
shipment_status: '',
|
||||
number_of_dewars: 0,
|
||||
shipment_date: '',
|
||||
return_address: [], // Correctly initialize return_address
|
||||
contact_person: null, // Use null
|
||||
dewars: [],
|
||||
});
|
||||
const [isCreatingShipment, setIsCreatingShipment] = useState(false);
|
||||
const [selectedShipment, setSelectedShipment] = useState<Shipment | null>(null);
|
||||
const [selectedDewar, setSelectedDewar] = useState<Dewar | null>(null);
|
||||
|
||||
// Define missing state variables for contacts, addresses, and proposals
|
||||
const [contactPersons, setContactPersons] = useState<ContactPerson[]>([]);
|
||||
const [returnAddresses, setReturnAddresses] = useState<Address[]>([]);
|
||||
const [proposals, setProposals] = useState<Proposal[]>([]);
|
||||
|
||||
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
@ -50,11 +35,6 @@ const ResponsiveAppBar: React.FC = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
const handlePageClick = (page: string) => {
|
||||
setSelectedPage(page);
|
||||
handleCloseNavMenu();
|
||||
};
|
||||
|
||||
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
@ -63,36 +43,15 @@ const ResponsiveAppBar: React.FC = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
// Updated selectShipment to accept Shipment | null
|
||||
const selectShipment = (shipment: Shipment | null) => {
|
||||
setSelectedShipment(shipment);
|
||||
setIsCreatingShipment(false);
|
||||
setSelectedDewar(null);
|
||||
};
|
||||
|
||||
const handleSaveShipment = () => {
|
||||
console.log('Saving shipment:', newShipment);
|
||||
setIsCreatingShipment(false);
|
||||
setNewShipment({
|
||||
shipment_id: '',
|
||||
shipment_name: '',
|
||||
shipment_status: '',
|
||||
number_of_dewars: 0,
|
||||
shipment_date: '',
|
||||
return_address: [], // Add return_address to the reset state
|
||||
contact_person: null, // Use null
|
||||
dewars: [],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AppBar position="static" sx={{ backgroundColor: '#2F4858' }}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<a className="nav" href="">
|
||||
{/* Logo and Title */}
|
||||
<Link to="/" style={{ textDecoration: 'none' }}>
|
||||
<img src={logo} height="50px" alt="PSI logo" />
|
||||
</a>
|
||||
</Link>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
@ -109,6 +68,8 @@ const ResponsiveAppBar: React.FC = () => {
|
||||
>
|
||||
Heidi v2
|
||||
</Typography>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
@ -134,23 +95,30 @@ const ResponsiveAppBar: React.FC = () => {
|
||||
onClose={handleCloseNavMenu}
|
||||
>
|
||||
{pages.map((page) => (
|
||||
<MenuItem key={page} onClick={() => handlePageClick(page)}>
|
||||
{page}
|
||||
<MenuItem key={page.name} onClick={handleCloseNavMenu}>
|
||||
<Link to={page.path} style={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
{page.name}
|
||||
</Link>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
||||
{pages.map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
onClick={() => handlePageClick(page)}
|
||||
key={page.name}
|
||||
component={Link} // Make button a Link
|
||||
to={page.path}
|
||||
sx={{ my: 2, color: 'white', display: 'block', fontSize: '1rem', padding: '12px 24px' }}
|
||||
>
|
||||
{page}
|
||||
{page.name}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* User Settings Menu */}
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Open settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||
@ -180,25 +148,6 @@ const ResponsiveAppBar: React.FC = () => {
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
<Box sx={{ width: '100%', borderRight: '1px solid #ccc', padding: 2 }}>
|
||||
{selectedPage === 'Shipments' && (
|
||||
<ShipmentView
|
||||
newShipment={newShipment}
|
||||
setNewShipment={setNewShipment}
|
||||
isCreatingShipment={isCreatingShipment}
|
||||
setIsCreatingShipment={setIsCreatingShipment}
|
||||
selectedShipment={selectedShipment}
|
||||
selectShipment={selectShipment} // Now accepts Shipment | null
|
||||
selectedDewar={selectedDewar}
|
||||
setSelectedDewar={setSelectedDewar}
|
||||
handleSaveShipment={handleSaveShipment}
|
||||
contactPersons={contactPersons}
|
||||
returnAddresses={returnAddresses}
|
||||
proposals={proposals}
|
||||
/>
|
||||
)}
|
||||
{selectedPage === 'Planning' && <PlanningView />}
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,308 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Button, Stack, TextField } from '@mui/material';
|
||||
import ShipmentForm from './ShipmentForm.tsx';
|
||||
import DewarDetails from './DewarDetails.tsx';
|
||||
import { Shipment, Dewar, ContactPerson, Proposal, Address } from '../types.ts';
|
||||
import { SxProps } from '@mui/system';
|
||||
import QRCode from 'react-qr-code';
|
||||
import bottleGrey from '../assets/icons/bottle-svgrepo-com-grey.svg';
|
||||
import bottleYellow from '../assets/icons/bottle-svgrepo-com-yellow.svg';
|
||||
import bottleGreen from '../assets/icons/bottle-svgrepo-com-green.svg';
|
||||
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
||||
import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive";
|
||||
import StoreIcon from "@mui/icons-material/Store";
|
||||
import DeleteIcon from "@mui/icons-material/Delete"; // Import delete icon
|
||||
|
||||
interface ShipmentDetailsProps {
|
||||
selectedShipment: Shipment | null;
|
||||
setSelectedDewar: React.Dispatch<React.SetStateAction<Dewar | null>>;
|
||||
isCreatingShipment: boolean;
|
||||
newShipment: Shipment;
|
||||
setNewShipment: React.Dispatch<React.SetStateAction<Shipment>>;
|
||||
handleSaveShipment: () => void;
|
||||
contactPersons: ContactPerson[];
|
||||
proposals: Proposal[];
|
||||
returnAddresses: Address[];
|
||||
sx?: SxProps;
|
||||
}
|
||||
|
||||
const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
|
||||
selectedShipment,
|
||||
setSelectedDewar,
|
||||
isCreatingShipment,
|
||||
newShipment,
|
||||
setNewShipment,
|
||||
handleSaveShipment,
|
||||
contactPersons,
|
||||
proposals,
|
||||
returnAddresses,
|
||||
sx = {},
|
||||
}) => {
|
||||
const [localSelectedDewar, setLocalSelectedDewar] = React.useState<Dewar | null>(null);
|
||||
const [trackingNumber, setTrackingNumber] = React.useState<string>('');
|
||||
const [isAddingDewar, setIsAddingDewar] = React.useState<boolean>(false);
|
||||
const [newDewar, setNewDewar] = React.useState<Partial<Dewar>>({
|
||||
dewar_name: '',
|
||||
tracking_number: '',
|
||||
});
|
||||
|
||||
const shippingStatusMap: { [key: string]: string } = {
|
||||
"not shipped": "grey",
|
||||
"shipped": "yellow",
|
||||
"arrived": "green",
|
||||
};
|
||||
|
||||
const arrivalStatusMap: { [key: string]: string } = {
|
||||
"not arrived": "grey",
|
||||
"arrived": "green",
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (localSelectedDewar) {
|
||||
setTrackingNumber(localSelectedDewar.tracking_number);
|
||||
}
|
||||
}, [localSelectedDewar]);
|
||||
|
||||
if (!selectedShipment) {
|
||||
return isCreatingShipment ? (
|
||||
<ShipmentForm
|
||||
newShipment={newShipment}
|
||||
setNewShipment={setNewShipment}
|
||||
handleSaveShipment={handleSaveShipment}
|
||||
contactPersons={contactPersons}
|
||||
proposals={proposals}
|
||||
returnAddresses={returnAddresses}
|
||||
/>
|
||||
) : (
|
||||
<Typography>No shipment selected.</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
// Calculate total pucks and samples
|
||||
const totalPucks = selectedShipment.dewars.reduce((acc, dewar) => acc + (dewar.number_of_pucks || 0), 0);
|
||||
const totalSamples = selectedShipment.dewars.reduce((acc, dewar) => acc + (dewar.number_of_samples || 0), 0);
|
||||
|
||||
// Handle dewar selection
|
||||
const handleDewarSelection = (dewar: Dewar) => {
|
||||
setLocalSelectedDewar(prevDewar => (prevDewar?.tracking_number === dewar.tracking_number ? null : dewar));
|
||||
setSelectedDewar(prevDewar => (prevDewar?.tracking_number === dewar.tracking_number ? null : dewar));
|
||||
};
|
||||
|
||||
// Handle dewar deletion
|
||||
const handleDeleteDewar = () => {
|
||||
if (localSelectedDewar) {
|
||||
const confirmed = window.confirm('Are you sure you want to delete this dewar?');
|
||||
if (confirmed) {
|
||||
const updatedDewars = selectedShipment.dewars.filter(dewar => dewar.tracking_number !== localSelectedDewar.tracking_number);
|
||||
console.log('Updated Dewars:', updatedDewars); // Log or update state as needed
|
||||
setLocalSelectedDewar(null); // Reset selection after deletion
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Handle form input changes for the new dewar
|
||||
const handleNewDewarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setNewDewar((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle adding a new dewar
|
||||
const handleAddDewar = () => {
|
||||
if (selectedShipment && newDewar.dewar_name) {
|
||||
const updatedDewars = [
|
||||
...selectedShipment.dewars,
|
||||
{ ...newDewar, tracking_number: newDewar.tracking_number || `TN-${Date.now()}` } as Dewar,
|
||||
];
|
||||
setNewShipment({
|
||||
...selectedShipment,
|
||||
dewars: updatedDewars,
|
||||
});
|
||||
setIsAddingDewar(false);
|
||||
setNewDewar({ dewar_name: '', number_of_pucks: 0, number_of_samples: 0, tracking_number: '' });
|
||||
} else {
|
||||
alert('Please fill in the Dewar Name');
|
||||
}
|
||||
};
|
||||
|
||||
// Function to generate QR Code (Placeholder)
|
||||
const generateQRCode = () => {
|
||||
console.log('Generate QR Code');
|
||||
};
|
||||
|
||||
// Handle adding new contact person and return address
|
||||
const addNewContactPerson = (name: string) => {
|
||||
// Implementation to add a new contact person
|
||||
console.log('Add new contact person:', name);
|
||||
};
|
||||
|
||||
const addNewReturnAddress = (address: string) => {
|
||||
// Implementation to add a new return address
|
||||
console.log('Add new return address:', address);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ ...sx, padding: 2, textAlign: 'left' }}>
|
||||
{/* Add Dewar Button - only visible if no dewar is selected */}
|
||||
{!localSelectedDewar && !isAddingDewar && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => setIsAddingDewar(true)}
|
||||
sx={{ marginBottom: 2 }}
|
||||
>
|
||||
Add Dewar
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Add Dewar Form */}
|
||||
{isAddingDewar && (
|
||||
<Box sx={{ marginBottom: 2, width: '20%' }}>
|
||||
<Typography variant="h6">Add New Dewar</Typography>
|
||||
<TextField
|
||||
label="Dewar Name"
|
||||
name="dewar_name"
|
||||
value={newDewar.dewar_name}
|
||||
onChange={handleNewDewarChange}
|
||||
fullWidth
|
||||
sx={{ marginBottom: 2 }}
|
||||
/>
|
||||
<Button variant="contained" color="primary" onClick={handleAddDewar} sx={{ marginRight: 2 }}>
|
||||
Save Dewar
|
||||
</Button>
|
||||
<Button variant="outlined" color="secondary" onClick={() => setIsAddingDewar(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
|
||||
<Typography variant="h5">{selectedShipment.shipment_name}</Typography>
|
||||
<Typography variant="body1">Number of Pucks: {totalPucks}</Typography>
|
||||
<Typography variant="body1">Number of Samples: {totalSamples}</Typography>
|
||||
<Typography variant="body1">Shipment Date: {selectedShipment.shipment_date}</Typography>
|
||||
|
||||
<Stack spacing={1}>
|
||||
{/* Render the DewarDetails component only if a dewar is selected */}
|
||||
{localSelectedDewar && (
|
||||
<DewarDetails
|
||||
dewar={localSelectedDewar}
|
||||
trackingNumber={trackingNumber}
|
||||
setTrackingNumber={setTrackingNumber}
|
||||
onGenerateQRCode={generateQRCode}
|
||||
contactPersons={contactPersons} // Pass contact persons
|
||||
returnAddresses={returnAddresses} // Pass return addresses
|
||||
addNewContactPerson={addNewContactPerson} // Pass function to add a new contact person
|
||||
addNewReturnAddress={addNewReturnAddress} // Pass function to add a new return address
|
||||
shipping_date={localSelectedDewar?.shipping_date} // Ensure these are passed
|
||||
arrival_date={localSelectedDewar?.arrival_date}
|
||||
/>
|
||||
)}
|
||||
{selectedShipment.dewars.map((dewar: Dewar) => (
|
||||
<Button
|
||||
key={dewar.tracking_number}
|
||||
onClick={() => handleDewarSelection(dewar)}
|
||||
sx={{
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
backgroundColor: localSelectedDewar?.tracking_number === dewar.tracking_number ? '#d0f0c0' : '#f0f0f0', // Highlight if selected
|
||||
padding: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 2,
|
||||
}}
|
||||
>
|
||||
{dewar.qrcode ? (
|
||||
<QRCode value={dewar.qrcode} size={70} />
|
||||
) : (
|
||||
<Typography variant="body2" color="textSecondary">No QR code available</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1, marginRight: 0 }}>
|
||||
<Typography variant="body1">{dewar.dewar_name}</Typography>
|
||||
<Typography variant="body2">Number of Pucks: {dewar.number_of_pucks || 0}</Typography>
|
||||
<Typography variant="body2">Number of Samples: {dewar.number_of_samples || 0}</Typography>
|
||||
<Typography variant="body2">Tracking Number: {dewar.tracking_number}</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-evenly' }}>
|
||||
{/* Status icons and date information */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<img
|
||||
src={dewar.status === "in preparation" ? bottleYellow : (dewar.status === "ready for shipping" ? bottleGreen : bottleGrey)}
|
||||
alt={`Status: ${dewar.status}`}
|
||||
style={{ width: '40px', height: '40px', marginBottom: '4px' }}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ fontSize: '12px' }} color="textSecondary">
|
||||
{dewar.ready_date ? `Ready: ${new Date(dewar.ready_date).toLocaleDateString()}` : 'N/A'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<ArrowForwardIcon sx={{ margin: '0 8px', fontSize: '40px', alignSelf: 'center' }} />
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<AirplanemodeActiveIcon
|
||||
sx={{
|
||||
color: shippingStatusMap[dewar.shippingStatus || ""] || "grey",
|
||||
fontSize: '40px',
|
||||
marginBottom: '4px'
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ fontSize: '12px' }} color="textSecondary">
|
||||
{dewar.shipping_date ? `Shipped: ${new Date(dewar.shipping_date).toLocaleDateString()}` : 'N/A'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<ArrowForwardIcon sx={{ margin: '0 8px', fontSize: '40px', alignSelf: 'center' }} />
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<StoreIcon
|
||||
sx={{
|
||||
color: arrivalStatusMap[dewar.arrivalStatus || ""] || "grey",
|
||||
fontSize: '40px',
|
||||
marginBottom: '4px'
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ fontSize: '12px' }} color="textSecondary">
|
||||
{dewar.arrival_date ? `Arrived: ${new Date(dewar.arrival_date).toLocaleDateString()}` : 'N/A'}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Delete button if the dewar is selected */}
|
||||
{localSelectedDewar?.tracking_number === dewar.tracking_number && (
|
||||
<Button
|
||||
onClick={handleDeleteDewar}
|
||||
color="error"
|
||||
sx={{
|
||||
minWidth: '40px',
|
||||
height: '40px',
|
||||
marginLeft: 2,
|
||||
padding: 0,
|
||||
alignSelf: 'center'
|
||||
}}
|
||||
title="Delete Dewar"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShipmentDetails;
|
||||
@ -1,232 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Box, Button, TextField, Typography, Select, MenuItem, Stack, FormControl, InputLabel } from '@mui/material';
|
||||
import { SelectChangeEvent } from '@mui/material';
|
||||
import { Shipment, ContactPerson, Proposal, Address } from '../types.ts'; // Adjust import paths as necessary
|
||||
import { SxProps } from '@mui/material';
|
||||
|
||||
interface ShipmentFormProps {
|
||||
newShipment: Shipment;
|
||||
setNewShipment: React.Dispatch<React.SetStateAction<Shipment>>;
|
||||
handleSaveShipment: () => void;
|
||||
contactPersons: ContactPerson[];
|
||||
proposals: Proposal[];
|
||||
returnAddresses: Address[];
|
||||
sx?: SxProps;
|
||||
}
|
||||
|
||||
const ShipmentForm: React.FC<ShipmentFormProps> = ({
|
||||
newShipment,
|
||||
setNewShipment,
|
||||
handleSaveShipment,
|
||||
contactPersons,
|
||||
proposals,
|
||||
returnAddresses,
|
||||
sx = {},
|
||||
}) => {
|
||||
const [isCreatingContactPerson, setIsCreatingContactPerson] = React.useState(false);
|
||||
const [isCreatingReturnAddress, setIsCreatingReturnAddress] = React.useState(false);
|
||||
const [newContactPerson, setNewContactPerson] = React.useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
});
|
||||
const [newReturnAddress, setNewReturnAddress] = React.useState('');
|
||||
|
||||
const handleContactPersonChange = (event: SelectChangeEvent<string>) => {
|
||||
const value = event.target.value;
|
||||
if (value === 'new') {
|
||||
setIsCreatingContactPerson(true);
|
||||
setNewShipment({ ...newShipment, contact_person: [] }); // Set to empty array for new person
|
||||
} else {
|
||||
setIsCreatingContactPerson(false);
|
||||
const selectedPerson = contactPersons.find((person) => person.name === value) || null;
|
||||
if (selectedPerson) {
|
||||
setNewShipment({ ...newShipment, contact_person: [selectedPerson] }); // Wrap in array
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleReturnAddressChange = (event: SelectChangeEvent<string>) => {
|
||||
const value = event.target.value;
|
||||
if (value === 'new') {
|
||||
setIsCreatingReturnAddress(true);
|
||||
setNewShipment({ ...newShipment, return_address: [] }); // Set to empty array for new address
|
||||
} else {
|
||||
setIsCreatingReturnAddress(false);
|
||||
const selectedAddress = returnAddresses.find((address) => address.address === value);
|
||||
if (selectedAddress) {
|
||||
setNewShipment({ ...newShipment, return_address: [selectedAddress] }); // Wrap in array of Address
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setNewShipment((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSaveNewContactPerson = () => {
|
||||
// Add logic to save the new contact person
|
||||
console.log('Saving new contact person:', newContactPerson);
|
||||
setIsCreatingContactPerson(false);
|
||||
setNewContactPerson({ firstName: '', lastName: '', phone: '', email: '' }); // Reset fields
|
||||
};
|
||||
|
||||
const handleSaveNewReturnAddress = () => {
|
||||
// Add logic to save the new return address
|
||||
console.log('Saving new return address:', newReturnAddress);
|
||||
setIsCreatingReturnAddress(false);
|
||||
setNewReturnAddress(''); // Reset field
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
padding: 4,
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '4px',
|
||||
marginBottom: 2,
|
||||
maxWidth: '600px',
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{ marginBottom: 2 }}>
|
||||
Create Shipment
|
||||
</Typography>
|
||||
<Stack spacing={2}>
|
||||
<TextField
|
||||
label="Shipment Name"
|
||||
name="shipment_name"
|
||||
value={newShipment.shipment_name || ''}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Contact Person</InputLabel>
|
||||
<Select
|
||||
value={newShipment.contact_person?.[0]?.name || ''} // Access first contact person
|
||||
onChange={handleContactPersonChange}
|
||||
displayEmpty
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select a Contact Person</em>
|
||||
</MenuItem>
|
||||
{contactPersons.map((person) => (
|
||||
<MenuItem key={person.id} value={person.name}>
|
||||
{person.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
<MenuItem value="new">
|
||||
<em>Create New Contact Person</em>
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{isCreatingContactPerson && (
|
||||
<>
|
||||
<TextField
|
||||
label="First Name"
|
||||
name="firstName"
|
||||
value={newContactPerson.firstName}
|
||||
onChange={(e) => setNewContactPerson({ ...newContactPerson, firstName: e.target.value })}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Last Name"
|
||||
name="lastName"
|
||||
value={newContactPerson.lastName}
|
||||
onChange={(e) => setNewContactPerson({ ...newContactPerson, lastName: e.target.value })}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Phone"
|
||||
name="phone"
|
||||
value={newContactPerson.phone}
|
||||
onChange={(e) => setNewContactPerson({ ...newContactPerson, phone: e.target.value })}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
label="Email"
|
||||
name="email"
|
||||
value={newContactPerson.email}
|
||||
onChange={(e) => setNewContactPerson({ ...newContactPerson, email: e.target.value })}
|
||||
fullWidth
|
||||
/>
|
||||
<Button variant="contained" color="primary" onClick={handleSaveNewContactPerson}>
|
||||
Save New Contact Person
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Proposal Number</InputLabel>
|
||||
<Select
|
||||
value={newShipment.proposal_number || ''}
|
||||
onChange={(e) => setNewShipment({ ...newShipment, proposal_number: e.target.value })}
|
||||
displayEmpty
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select a Proposal Number</em>
|
||||
</MenuItem>
|
||||
{proposals.map((proposal) => (
|
||||
<MenuItem key={proposal.id} value={proposal.number}>
|
||||
{proposal.number}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Return Address</InputLabel>
|
||||
<Select
|
||||
value={newShipment.return_address?.[0]?.address || ''} // Access first return address's address
|
||||
onChange={handleReturnAddressChange}
|
||||
displayEmpty
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select a Return Address</em>
|
||||
</MenuItem>
|
||||
{returnAddresses.map((address) => (
|
||||
<MenuItem key={address.id} value={address.address}>
|
||||
{address.address}
|
||||
</MenuItem>
|
||||
))}
|
||||
<MenuItem value="new">
|
||||
<em>Create New Return Address</em>
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{isCreatingReturnAddress && (
|
||||
<>
|
||||
<TextField
|
||||
label="New Return Address"
|
||||
value={newReturnAddress}
|
||||
onChange={(e) => setNewReturnAddress(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
<Button variant="contained" color="primary" onClick={handleSaveNewReturnAddress}>
|
||||
Save New Return Address
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<TextField
|
||||
label="Comments"
|
||||
name="comments"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
value={newShipment.comments || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={handleSaveShipment}
|
||||
sx={{ alignSelf: 'flex-end' }}
|
||||
>
|
||||
Save Shipment
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShipmentForm;
|
||||
@ -5,12 +5,13 @@ import AddIcon from '@mui/icons-material/Add';
|
||||
import DeleteIcon from '@mui/icons-material/Delete'; // Import delete icon
|
||||
import UploadFileIcon from '@mui/icons-material/UploadFile'; // Import the upload icon
|
||||
import UploadDialog from './UploadDialog.tsx'; // Import the UploadDialog component
|
||||
import { Shipment } from '../types.ts'; // Ensure Shipment type is correctly imported
|
||||
import {Shipment} from '../types.ts'; // Ensure Shipment type is correctly imported
|
||||
import { SxProps } from '@mui/material';
|
||||
import bottleGrey from '../assets/icons/bottle-svgrepo-com-grey.svg';
|
||||
import bottleYellow from '../assets/icons/bottle-svgrepo-com-yellow.svg';
|
||||
import bottleGreen from '../assets/icons/bottle-svgrepo-com-green.svg';
|
||||
import bottleRed from '../assets/icons/bottle-svgrepo-com-red.svg';
|
||||
import {Shipment_Input, DefaultService, OpenAPI} from "../../openapi";
|
||||
|
||||
interface ShipmentPanelProps {
|
||||
selectedPage: string;
|
||||
@ -22,17 +23,16 @@ interface ShipmentPanelProps {
|
||||
}
|
||||
|
||||
const ShipmentPanel: React.FC<ShipmentPanelProps> = ({
|
||||
setIsCreatingShipment,
|
||||
newShipment,
|
||||
setNewShipment,
|
||||
selectedPage,
|
||||
//setIsCreatingShipment,
|
||||
//newShipment,
|
||||
//setNewShipment,
|
||||
//selectedPage,
|
||||
selectShipment,
|
||||
sx,
|
||||
}) => {
|
||||
const [shipments, setShipments] = useState<Shipment[]>([]);
|
||||
const [selectedShipment, setSelectedShipment] = useState<Shipment | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
|
||||
|
||||
const handleOpenUploadDialog = () => {
|
||||
@ -43,6 +43,7 @@ const ShipmentPanel: React.FC<ShipmentPanelProps> = ({
|
||||
setUploadDialogOpen(false);
|
||||
};
|
||||
|
||||
|
||||
// Status icon mapping
|
||||
const statusIconMap: Record<string, string> = {
|
||||
"In Transit": bottleYellow,
|
||||
@ -52,9 +53,13 @@ const ShipmentPanel: React.FC<ShipmentPanelProps> = ({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
OpenAPI.BASE='http://127.0.0.1:8000'
|
||||
const fetchShipments = async () => {
|
||||
console.log('trying to fetch some shipments');
|
||||
try {
|
||||
const response = await fetch('/shipmentsdb.json');
|
||||
DefaultService.getShipmentsShipmentsGet().then((s : Shipment_Input[]) => {
|
||||
setShipments(s);
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
|
||||
const data = await response.json();
|
||||
@ -95,21 +100,21 @@ const ShipmentPanel: React.FC<ShipmentPanelProps> = ({
|
||||
variant="contained"
|
||||
color="primary"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => {
|
||||
setNewShipment({
|
||||
shipment_id: '', // Ensure this matches the Shipment type
|
||||
shipment_name: '',
|
||||
shipment_status: '',
|
||||
number_of_dewars: 0,
|
||||
shipment_date: '',
|
||||
contact_person: null, // Keep this as null to match Shipment type
|
||||
dewars: [],
|
||||
return_address: [], // Make sure return_address is initialized as an array
|
||||
proposal_number: undefined, // Optional property
|
||||
comments: '', // Optional property
|
||||
});
|
||||
setIsCreatingShipment(true);
|
||||
}}
|
||||
//onClick={() => {
|
||||
// setNewShipment({
|
||||
// shipment_id: '', // Ensure this matches the Shipment type
|
||||
// shipment_name: '',
|
||||
// shipment_status: '',
|
||||
// number_of_dewars: 0,
|
||||
// shipment_date: '',
|
||||
// contact_person: null, // Keep this as null to match Shipment type
|
||||
// dewars: [],
|
||||
// return_address: [], // Make sure return_address is initialized as an array
|
||||
// proposal_number: undefined, // Optional property
|
||||
// comments: '', // Optional property
|
||||
// });
|
||||
// setIsCreatingShipment(true);
|
||||
//}}
|
||||
sx={{ marginBottom: 2, padding: '10px 16px' }}
|
||||
>
|
||||
Create Shipment
|
||||
|
||||
@ -1,100 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Grid } from '@mui/material';
|
||||
import ShipmentPanel from './ShipmentPanel.tsx';
|
||||
import ShipmentDetails from './ShipmentDetails.tsx';
|
||||
import ShipmentForm from './ShipmentForm.tsx';
|
||||
import { Shipment, Dewar } from '../types.ts';
|
||||
import { ContactPerson, Address, Proposal } from '../types.ts';
|
||||
|
||||
interface ShipmentProps {
|
||||
newShipment: Shipment;
|
||||
setNewShipment: React.Dispatch<React.SetStateAction<Shipment>>;
|
||||
isCreatingShipment: boolean;
|
||||
setIsCreatingShipment: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
selectedShipment: Shipment | null;
|
||||
selectShipment: (shipment: Shipment | null) => void; // Allow null for deselection
|
||||
selectedDewar: Dewar | null;
|
||||
setSelectedDewar: React.Dispatch<React.SetStateAction<Dewar | null>>;
|
||||
handleSaveShipment: () => void;
|
||||
contactPersons: ContactPerson[];
|
||||
returnAddresses: Address[];
|
||||
proposals: Proposal[];
|
||||
}
|
||||
|
||||
const ShipmentView: React.FC<ShipmentProps> = ({
|
||||
newShipment,
|
||||
setNewShipment,
|
||||
isCreatingShipment,
|
||||
setIsCreatingShipment,
|
||||
selectedShipment,
|
||||
selectShipment,
|
||||
selectedDewar,
|
||||
setSelectedDewar,
|
||||
handleSaveShipment,
|
||||
contactPersons,
|
||||
returnAddresses,
|
||||
proposals,
|
||||
}) => {
|
||||
return (
|
||||
<Grid container spacing={2} sx={{ height: '100vh' }}>
|
||||
{/* Left column: ShipmentPanel */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={3} // Adjust width for left column
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 0, // Do not allow the panel to grow
|
||||
}}
|
||||
>
|
||||
<ShipmentPanel
|
||||
selectedPage="Shipments"
|
||||
setIsCreatingShipment={setIsCreatingShipment}
|
||||
newShipment={newShipment}
|
||||
setNewShipment={setNewShipment}
|
||||
selectShipment={selectShipment} // This now accepts Shipment | null
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* Right column: ShipmentForm or ShipmentDetails */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={9}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{isCreatingShipment ? (
|
||||
<ShipmentForm
|
||||
newShipment={newShipment}
|
||||
setNewShipment={setNewShipment}
|
||||
handleSaveShipment={handleSaveShipment}
|
||||
contactPersons={contactPersons}
|
||||
proposals={proposals}
|
||||
returnAddresses={returnAddresses}
|
||||
sx={{ flexGrow: 1 }} // Allow form to grow and take available space
|
||||
/>
|
||||
) : (
|
||||
<ShipmentDetails
|
||||
selectedShipment={selectedShipment}
|
||||
setSelectedDewar={setSelectedDewar}
|
||||
isCreatingShipment={isCreatingShipment}
|
||||
newShipment={newShipment}
|
||||
setNewShipment={setNewShipment}
|
||||
handleSaveShipment={handleSaveShipment}
|
||||
contactPersons={contactPersons}
|
||||
proposals={proposals}
|
||||
returnAddresses={returnAddresses}
|
||||
sx={{ flexGrow: 1 }} // Allow details to grow and take available space
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShipmentView;
|
||||
@ -130,6 +130,9 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
|
||||
)}
|
||||
{fileSummary && (
|
||||
<Box mt={2}>
|
||||
<Typography color="success.main">
|
||||
File uploaded successfully!
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>File Summary:</strong>
|
||||
</Typography>
|
||||
|
||||
Reference in New Issue
Block a user