gotthard_g/aaredb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjusted stepper for shipment tracking

Browse Source
This commit is contained in:
GotthardG 2024-10-31 10:25:46 +01:00
parent 930d551464
commit d6d7e7c919
12 changed files with 959 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
backend/main.py
View File

@ -1,12 +1,10 @@
from fastapi import FastAPI from fastapi import FastAPI, HTTPException, status
from fastapi.middleware.cors import CORSMiddleware from fastapi.middleware.cors import CORSMiddleware
from fastapi import HTTPException, status
from pydantic import BaseModel from pydantic import BaseModel
from typing import List, Optional from typing import List, Optional
import logging import logging
import uuid import uuid
logging.basicConfig(level=logging.INFO) logging.basicConfig(level=logging.INFO)
app = FastAPI() app = FastAPI()
@ -21,7 +19,7 @@ app.add_middleware(
class ContactPerson(BaseModel): class ContactPerson(BaseModel):
id: int id: Optional[int] = None # Make id optional
firstname: str firstname: str
lastname: str lastname: str
phone_number: str phone_number: str
@ -29,16 +27,18 @@ class ContactPerson(BaseModel):
class Address(BaseModel): class Address(BaseModel):
id: int id: Optional[int] = None # Make id optional
street: str street: str
city: str city: str
zipcode: str zipcode: str
country: str country: str
class Proposal(BaseModel): class Proposal(BaseModel):
id: int id: Optional[int]
number: str number: str
class Dewar(BaseModel): class Dewar(BaseModel):
id: Optional[str] = None id: Optional[str] = None
dewar_name: str dewar_name: str
@ -51,8 +51,7 @@ class Dewar(BaseModel):
ready_date: Optional[str] = None ready_date: Optional[str] = None
shipping_date: Optional[str] = None shipping_date: Optional[str] = None
arrival_date: Optional[str] = None arrival_date: Optional[str] = None
shippingStatus: str returning_date: Optional[str] = None
arrivalStatus: str
qrcode: str qrcode: str
@ -85,8 +84,10 @@ class Shipment(BaseModel):
# Example data for contacts # Example data for contacts
contacts = [ contacts = [
ContactPerson(id=1, firstname="Frodo", lastname="Baggins", phone_number="123-456-7890", email="frodo.baggins@lotr.com"), ContactPerson(id=1, firstname="Frodo", lastname="Baggins", phone_number="123-456-7890",
ContactPerson(id=2, firstname="Samwise", lastname="Gamgee", phone_number="987-654-3210", email="samwise.gamgee@lotr.com"), email="frodo.baggins@lotr.com"),
ContactPerson(id=2, firstname="Samwise", lastname="Gamgee", phone_number="987-654-3210",
email="samwise.gamgee@lotr.com"),
ContactPerson(id=3, firstname="Aragorn", lastname="Elessar", phone_number="123-333-4444", ContactPerson(id=3, firstname="Aragorn", lastname="Elessar", phone_number="123-333-4444",
email="aragorn.elessar@lotr.com"), email="aragorn.elessar@lotr.com"),
ContactPerson(id=4, firstname="Legolas", lastname="Greenleaf", phone_number="555-666-7777", ContactPerson(id=4, firstname="Legolas", lastname="Greenleaf", phone_number="555-666-7777",
@ -102,7 +103,7 @@ contacts = [
ContactPerson(id=9, firstname="Elrond", lastname="Half-elven", phone_number="777-888-9999", ContactPerson(id=9, firstname="Elrond", lastname="Half-elven", phone_number="777-888-9999",
email="elrond.halfelven@lotr.com"), email="elrond.halfelven@lotr.com"),
ContactPerson(id=10, firstname="Eowyn", lastname="Shieldmaiden of Rohan", phone_number="000-111-2222", ContactPerson(id=10, firstname="Eowyn", lastname="Shieldmaiden of Rohan", phone_number="000-111-2222",
email="eowyn.rohan@lotr.com") email="eowyn.rohan@lotr.com"),
] ]
# Example data for return addresses # Example data for return addresses
@ -121,12 +122,11 @@ dewars = [
number_of_samples=70, number_of_samples=70,
return_address=[return_addresses[0]], return_address=[return_addresses[0]],
contact_person=[contacts[0]], contact_person=[contacts[0]],
status='Ready', status='Ready for Shipping',
ready_date='2023-09-30', ready_date='2023-09-30',
shipping_date='2023-10-01', shipping_date='',
arrival_date='2023-10-02', arrival_date='',
shippingStatus='Shipped', returning_date='',
arrivalStatus='Arrived',
qrcode='QR123DEWAR001' qrcode='QR123DEWAR001'
), ),
Dewar( Dewar(
@ -138,11 +138,10 @@ dewars = [
return_address=[return_addresses[1]], return_address=[return_addresses[1]],
contact_person=[contacts[1]], contact_person=[contacts[1]],
status='In Preparation', status='In Preparation',
ready_date='2023-10-01', ready_date='',
shipping_date='2023-10-02', shipping_date='',
arrival_date='2023-10-04', arrival_date='',
shippingStatus='not shipped', returning_date='',
arrivalStatus='not arrived',
qrcode='QR123DEWAR002' qrcode='QR123DEWAR002'
), ),
Dewar( Dewar(
@ -153,9 +152,11 @@ dewars = [
number_of_samples=47, number_of_samples=47,
return_address=[return_addresses[0]], return_address=[return_addresses[0]],
contact_person=[contacts[2]], contact_person=[contacts[2]],
status='Pending', status='Not Shipped',
shippingStatus='Ready for Shipping', ready_date='2024.01.01',
arrivalStatus='Pending', shipping_date='',
arrival_date='',
returning_date='',
qrcode='QR123DEWAR003' qrcode='QR123DEWAR003'
), ),
Dewar( Dewar(
@ -166,9 +167,11 @@ dewars = [
number_of_samples=47, number_of_samples=47,
return_address=[return_addresses[0]], return_address=[return_addresses[0]],
contact_person=[contacts[2]], contact_person=[contacts[2]],
status='In Preparation', status='Delayed',
shippingStatus='not shipped', ready_date='2024.01.01',
arrivalStatus='not arrived', shipping_date='2024.01.02',
arrival_date='',
returning_date='',
qrcode='QR123DEWAR003' qrcode='QR123DEWAR003'
), ),
Dewar( Dewar(
@ -179,9 +182,11 @@ dewars = [
number_of_samples=47, number_of_samples=47,
return_address=[return_addresses[0]], return_address=[return_addresses[0]],
contact_person=[contacts[2]], contact_person=[contacts[2]],
status='Ready for Shipping', status='Returned',
shippingStatus='shipped', ready_date='2024.01.01',
arrivalStatus='not arrived', shipping_date='2024.01.02',
arrival_date='2024.01.03',
returning_date='2024.01.07',
qrcode='QR123DEWAR003' qrcode='QR123DEWAR003'
), ),
] ]
@ -206,7 +211,6 @@ specific_dewars1 = [dewar for dewar in dewars if dewar.id in specific_dewar_ids1
specific_dewars2 = [dewar for dewar in dewars if dewar.id in specific_dewar_ids2] specific_dewars2 = [dewar for dewar in dewars if dewar.id in specific_dewar_ids2]
specific_dewars3 = [dewar for dewar in dewars if dewar.id in specific_dewar_ids3] specific_dewars3 = [dewar for dewar in dewars if dewar.id in specific_dewar_ids3]
# Define shipments with the selected Dewars # Define shipments with the selected Dewars
shipments = [ shipments = [
Shipment( Shipment(
@ -242,17 +246,19 @@ shipments = [
comments='Contains the one ring', comments='Contains the one ring',
dewars=specific_dewars3 dewars=specific_dewars3
) )
] ]
@app.get("/contacts", response_model=List[ContactPerson]) @app.get("/contacts", response_model=List[ContactPerson])
async def get_contacts(): async def get_contacts():
return contacts return contacts
@app.get("/return_addresses", response_model=List[Address]) @app.get("/return_addresses", response_model=List[Address])
async def get_return_addresses(): async def get_return_addresses():
return return_addresses return return_addresses
@app.get("/proposals", response_model=List[Proposal]) @app.get("/proposals", response_model=List[Proposal])
async def get_proposals(): async def get_proposals():
return proposals return proposals
@ -262,29 +268,55 @@ async def get_proposals():
async def get_shipments(): async def get_shipments():
return shipments return shipments
@app.delete("/shipments/{shipment_id}", status_code=status.HTTP_204_NO_CONTENT) @app.delete("/shipments/{shipment_id}", status_code=status.HTTP_204_NO_CONTENT)
async def delete_shipment(shipment_id: str): async def delete_shipment(shipment_id: str):
global shipments # Use global variable to access the shipments list global shipments # Use global variable to access the shipments list
shipments = [shipment for shipment in shipments if shipment.shipment_id != shipment_id] shipments = [shipment for shipment in shipments if shipment.shipment_id != shipment_id]
@app.post("/shipments/{shipment_id}/add_dewar", response_model=Shipment)
async def add_dewar_to_shipment(shipment_id: str, dewar_id: str):
# Log received parameters for debugging
logging.info(f"Received request to add dewar {dewar_id} to shipment {shipment_id}")
# Find the shipment by id
shipment = next((sh for sh in shipments if sh.shipment_id == shipment_id), None)
if not shipment:
logging.error("Shipment not found")
raise HTTPException(status_code=404, detail="Shipment not found")
# Find the dewar by id
dewar = next((dw for dw in dewars if dw.id == dewar_id), None)
if not dewar:
logging.error("Dewar not found")
raise HTTPException(status_code=404, detail="Dewar not found")
# Add the dewar to the shipment
if dewar not in shipment.dewars:
shipment.dewars.append(dewar)
return shipment
@app.get("/dewars", response_model=List[Dewar]) @app.get("/dewars", response_model=List[Dewar])
async def get_dewars(): async def get_dewars():
return dewars return dewars
@app.post("/dewars", response_model=List[Dewar], status_code=status.HTTP_201_CREATED)
async def create_dewar(shipment: Dewar):
dewar_id = f'SHIP-{uuid.uuid4().hex[:8].upper()}' # Generates a unique shipment ID
shipment.id = dewar_id # Set the generated ID on the shipment object
dewars.append(shipment) # Add the modified shipment object to the list @app.post("/dewars", response_model=Dewar, status_code=status.HTTP_201_CREATED)
async def create_dewar(dewar: Dewar) -> Dewar:
dewar_id = f'DEWAR-{uuid.uuid4().hex[:8].upper()}' # Generates a unique dewar ID
dewar.id = dewar_id # Set the generated ID on the dewar object
dewars.append(dewar) # Add the modified dewar object to the list
return dewar # Return the newly created dewar
return dewars # Return the list of all dewars
@app.get("/shipment_contact_persons") @app.get("/shipment_contact_persons")
async def get_shipment_contact_persons(): async def get_shipment_contact_persons():
return [{"shipment_id": shipment.shipment_id, "contact_person": shipment.get_shipment_contact_persons()} for shipment in return [{"shipment_id": shipment.shipment_id, "contact_person": shipment.get_shipment_contact_persons()} for
shipments] shipment in shipments]
@app.post("/shipments", response_model=Shipment, status_code=status.HTTP_201_CREATED) @app.post("/shipments", response_model=Shipment, status_code=status.HTTP_201_CREATED)
@ -297,6 +329,7 @@ async def create_shipment(shipment: Shipment):
shipments.append(shipment) shipments.append(shipment)
return shipment return shipment
# Creation of a new contact # Creation of a new contact
@app.post("/contacts", response_model=ContactPerson, status_code=status.HTTP_201_CREATED) @app.post("/contacts", response_model=ContactPerson, status_code=status.HTTP_201_CREATED)
async def create_contact(contact: ContactPerson): async def create_contact(contact: ContactPerson):
@ -305,16 +338,24 @@ async def create_contact(contact: ContactPerson):
if any(c.email == contact.email for c in contacts): if any(c.email == contact.email for c in contacts):
raise HTTPException( raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST, status_code=status.HTTP_400_BAD_REQUEST,
detail="Contact with this email already exists." detail="This contact already exists."
) )
# Find the next available id
if contacts:
max_id = max(c.id for c in contacts)
contact.id = max_id + 1 if contact.id is None else contact.id
else:
contact.id = 1 if contact.id is None else contact.id
contacts.append(contact) contacts.append(contact)
return contact return contact
# Creation of a return address # Creation of a return address
@app.post("/return_addresses", response_model=Address, status_code=status.HTTP_201_CREATED) @app.post("/return_addresses", response_model=Address, status_code=status.HTTP_201_CREATED)
async def create_return_address(address: Address): async def create_return_address(address: Address):
logging.info(f"Received contact creation request: {address}") logging.info(f"Received address creation request: {address}")
# Check for duplicate address by city # Check for duplicate address by city
if any(a.city == address.city for a in return_addresses): if any(a.city == address.city for a in return_addresses):
raise HTTPException( raise HTTPException(
@ -322,5 +363,12 @@ async def create_return_address(address: Address):
detail="Address in this city already exists." detail="Address in this city already exists."
) )
# Find the next available id
if return_addresses:
max_id = max(a.id for a in return_addresses)
address.id = max_id + 1 if address.id is None else address.id
else:
address.id = 1 if address.id is None else address.id
return_addresses.append(address) return_addresses.append(address)
return address return address

41
frontend/fetch-openapi.js Normal file
View File

@ -0,0 +1,41 @@
// fetch-openapi.js
const fs = require('fs');
const https = require('https');
const { exec } = require('child_process');
// FastAPI server URL (make sure your server is running locally at this address)
const OPENAPI_URL = 'http://127.0.0.1:8000/openapi.json';
// Path to save the OpenAPI schema file and TypeScript types
const SCHEMA_PATH = './src/schema/openapi.json';
const TYPES_PATH = './src/types/api-types.ts';
// Fetch OpenAPI JSON
https.get(OPENAPI_URL, (res) => {
let data = '';
res.on('data', chunk => {
data += chunk;
});
res.on('end', () => {
// Save the fetched OpenAPI JSON to a file
fs.writeFileSync(SCHEMA_PATH, data, 'utf8');
console.log(`✅ OpenAPI schema saved to ${SCHEMA_PATH}`);
// Run openapi-typescript to generate TypeScript types
exec(`npx openapi-typescript ${SCHEMA_PATH} --output ${TYPES_PATH}`, (error, stdout, stderr) => {
if (error) {
console.error(`❌ Error generating types: ${error}`);
return;
}
if (stderr) {
console.error(`⚠️ stderr: ${stderr}`);
return;
}
console.log(`✅ TypeScript types generated at ${TYPES_PATH}`);
});
});
}).on("error", (err) => {
console.error("Error fetching OpenAPI schema: " + err.message);
});

801
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
frontend/package.json
View File

@ -7,7 +7,9 @@
"dev": "node_modules/.bin/vite", "dev": "node_modules/.bin/vite",
"build": "node_modules/.bin/tsc -b && vite build", "build": "node_modules/.bin/tsc -b && vite build",
"lint": "node_modules/.bin/eslint .", "lint": "node_modules/.bin/eslint .",
"preview": "node_modules/.bin/vite preview" "preview": "node_modules/.bin/vite preview",
"fetch:types": "node fetch-openapi.js"
}, },
"dependencies": { "dependencies": {
"@aldabil/react-scheduler": "^2.9.5", "@aldabil/react-scheduler": "^2.9.5",
@ -21,7 +23,6 @@
"@fullcalendar/react": "^6.1.15", "@fullcalendar/react": "^6.1.15",
"@fullcalendar/timegrid": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15",
"@mui/icons-material": "^6.1.5", "@mui/icons-material": "^6.1.5",
"@mui/lab": "^6.0.0-beta.13",
"@mui/material": "^6.1.5", "@mui/material": "^6.1.5",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"openapi-typescript-codegen": "^0.29.0", "openapi-typescript-codegen": "^0.29.0",
@ -41,8 +42,10 @@
"eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12", "eslint-plugin-react-refresh": "^0.4.12",
"globals": "^15.9.0", "globals": "^15.9.0",
"openapi-typescript": "^7.4.2",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.7.0", "typescript-eslint": "^8.7.0",
"vite": "^5.4.8" "vite": "^5.4.8",
"vite-plugin-svgr": "^4.2.0"
} }
} }

8
frontend/src/components/DewarDetails.tsx
View File

@ -11,6 +11,7 @@ interface DewarDetailsProps {
returnAddresses: Address[]; returnAddresses: Address[];
} }
const DewarDetails: React.FC<DewarDetailsProps> = ({ const DewarDetails: React.FC<DewarDetailsProps> = ({
dewar, dewar,
trackingNumber, trackingNumber,
@ -23,7 +24,9 @@ const DewarDetails: React.FC<DewarDetailsProps> = ({
const updateSelectedDetails = (contactPerson?: { firstname: string }, returnAddress?: Address) => { const updateSelectedDetails = (contactPerson?: { firstname: string }, returnAddress?: Address) => {
if (contactPerson) setSelectedContactPerson(contactPerson.firstname); if (contactPerson) setSelectedContactPerson(contactPerson.firstname);
if (returnAddress) setSelectedReturnAddress(returnAddress.id.toString()); if (returnAddress?.id != null) {
setSelectedReturnAddress(returnAddress.id.toString());
};
}; };
React.useEffect(() => { React.useEffect(() => {
@ -132,7 +135,8 @@ const DewarDetails: React.FC<DewarDetailsProps> = ({
> >
<MenuItem value="" disabled>Select Return Address</MenuItem> <MenuItem value="" disabled>Select Return Address</MenuItem>
{returnAddresses.map((address) => ( {returnAddresses.map((address) => (
<MenuItem key={address.id} value={address.id.toString()}>{address.street}</MenuItem> <MenuItem key={address.id ?? 'unknown'} value={address.id?.toString() ?? 'unknown'}>
{address.street} </MenuItem>
))} ))}
<MenuItem value="add">Add New Return Address</MenuItem> <MenuItem value="add">Add New Return Address</MenuItem>
</Select> </Select>

92
frontend/src/components/DewarStepper.tsx
View File

@ -2,20 +2,32 @@ import React from 'react';
import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material'; import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material';
import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
import StoreIcon from '@mui/icons-material/Store'; import StoreIcon from '@mui/icons-material/Store';
import bottleIcon from '../assets/icons/bottle-svgrepo-com-grey.svg'; import RecycleIcon from '@mui/icons-material/Restore';
import { Dewar } from "../../openapi"; import { Dewar } from "../../openapi";
// Constants
const ICON_STYLE = { width: 24, height: 24 }; 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">
<path d="M190.886,82.273c-3.23-2.586-7.525-7.643-7.525-21.639V43h8.027V0h-106v43h8.027v17.635c0,11.66-1.891,17.93-6.524,21.639 c-21.813,17.459-31.121,36.748-31.121,64.5v100.088c0,16.496,13.42,29.916,29.916,29.916h105.405 c16.496,0,29.916-13.42,29.916-29.916V146.773C221.007,121.103,210.029,97.594,190.886,82.273z M191.007,246.777H85.77V146.773 c0-18.589,5.199-29.339,19.867-41.078c15.758-12.612,17.778-30.706,17.778-45.061V43h29.945v17.635 c0,19.927,6.318,35.087,18.779,45.061c11.99,9.597,18.867,24.568,18.867,41.078V246.777z"/>
</svg>
);
// Define types for icons mapping. // Define types for icons mapping.
const ICONS: { [key: number]: React.ReactElement } = { const ICONS: { [key: number]: React.ReactElement } = {
0: <img src={bottleIcon} alt="Bottle Icon" style={ICON_STYLE} />, 0: <BottleIcon fill="grey" />,
1: <AirplanemodeActiveIcon style={ICON_STYLE} />, 1: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'blue' }} />, // 'Ready for Shipping' -> Active
2: <StoreIcon style={ICON_STYLE} />, 2: <StoreIcon style={ICON_STYLE} />, // 'Not Arrived'
3: <RecycleIcon style={ICON_STYLE} />, // 'Returned'
4: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'green' }} />, // 'Shipped' - Active
5: <AirplanemodeActiveIcon style={{ ...ICON_STYLE, color: 'yellow' }} />, // 'Delayed'
}; };
// Define StepIconContainer to accept correct props and handle typing better // Define StepIconContainer to accept correct props and handle typing better.
interface StepIconContainerProps extends React.HTMLAttributes<HTMLDivElement> { interface StepIconContainerProps extends React.HTMLAttributes<HTMLDivElement> {
color: string; color: string;
} }
@ -32,70 +44,72 @@ type StepIconComponentProps = {
} & StepIconProps; } & StepIconProps;
const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => { const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
const { iconIndex, color } = getIconProperties(icon, dewar); const { iconIndex, color, fill } = getIconProperties(icon, dewar);
// Adjust icon color for the bottle especially since it's an SVG element
const IconComponent = ICONS[iconIndex];
const iconProps = iconIndex === 0 ? { fill: color } : {};
return ( return (
<StepIconContainer color={color} {...props}> <StepIconContainer color={color} {...props}>
{ICONS[iconIndex]} {IconComponent
? React.cloneElement(IconComponent, iconProps)
: <Typography variant="body2" color="error">Invalid icon</Typography>
}
</StepIconContainer> </StepIconContainer>
); );
}; };
// Extracted function to determine icon properties // Extracted function to determine icon properties
const getIconProperties = (icon: number, dewar: Dewar) => { const getIconProperties = (icon: number, dewar: Dewar) => {
const iconIndex = icon - 1; const status = dewar.status as DewarStatus;
const color = determineIconColor(dewar, iconIndex); const iconIndex = status === 'Delayed' && icon === 1 ? 5 : icon;
return { iconIndex, color }; const color = determineIconColor(icon, status);
const fill = status === 'In Preparation' ? color : undefined;
return { iconIndex, color, fill };
}; };
// Original determineIconColor function remains unchanged const STATUS_TO_STEP: Record<DewarStatus, number> = {
const determineIconColor = (dewar: Dewar, index: number) => { 'In Preparation': 0,
let color = 'grey'; 'Ready for Shipping': 1,
'Shipped': 1,
'Delayed': 1,
'Not Arrived': 2,
'Arrived': 2,
'Returned': 3
};
if (index === 0) { const getStatusStepIndex = (status: DewarStatus): number => STATUS_TO_STEP[status];
if (dewar.status === 'In Preparation') {
color = 'blue'; const determineIconColor = (iconIndex: number, status: DewarStatus): string => {
} else if (dewar.status === 'Ready for Shipping') { const statusIndex = getStatusStepIndex(status);
color = 'green'; if (status === 'Delayed' && iconIndex === 1) {
} return 'yellow';
} }
if (index === 1) { return iconIndex <= statusIndex ? (iconIndex === statusIndex ? (status === 'Shipped' ? 'green' : 'blue') : 'green') : 'grey';
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 // Define your steps
const steps = ['In Preparation', 'Ready for Shipping', 'Arrived']; const steps = ['In-House', 'Transit', 'At SLS', 'Returned'];
const CustomStepper = ({ dewar }: { dewar: Dewar }) => { const CustomStepper = ({ dewar }: { dewar: Dewar }) => {
// Determine the current active step // Determine the current active step
const activeStep = steps.indexOf(dewar.status) !== -1 ? steps.indexOf(dewar.status) : 0; const activeStep = getStatusStepIndex(dewar.status as DewarStatus);
return ( return (
<Stepper alternativeLabel activeStep={activeStep}> <Stepper alternativeLabel activeStep={activeStep}>
{steps.map((label, index) => ( {steps.map((label, index) => (
<Step key={label}> <Step key={label}>
<StepLabel <StepLabel
StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index + 1} dewar={dewar} />} StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index} dewar={dewar} />}
> >
{label} {label}
</StepLabel> </StepLabel>
<Typography variant="body2"> <Typography variant="body2">
{index === 0 ? dewar.ready_date : {index === 0 ? dewar.ready_date :
index === 1 ? dewar.shipping_date : index === 1 ? dewar.shipping_date :
index === 2 ? dewar.arrival_date : ''} index === 2 ? dewar.arrival_date :
index === 3 ? dewar.returning_date : null}
</Typography> </Typography>
</Step> </Step>
))} ))}

83
frontend/src/components/ShipmentDetails.tsx
View File

@ -1,25 +1,25 @@
import React from 'react'; import React from 'react';
import {Box, Typography, Button, Stack, TextField} from '@mui/material'; import { Box, Typography, Button, Stack, TextField } from '@mui/material';
import QRCode from 'react-qr-code'; import QRCode from 'react-qr-code';
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import {Dewar, Shipment_Input, DefaultService} from "../../openapi"; import { Dewar, Shipment_Input, DefaultService } from "../../openapi";
import {SxProps} from "@mui/system"; import { SxProps } from "@mui/system";
import CustomStepper from "./DewarStepper"; import CustomStepper from "./DewarStepper";
import DewarDetails from './DewarDetails'; import DewarDetails from './DewarDetails';
interface ShipmentDetailsProps { interface ShipmentDetailsProps {
isCreatingShipment: boolean; isCreatingShipment: boolean;
selectedShipment: Shipment_Input; selectedShipment: Shipment_Input;
selectedDewar: Dewar | null; selectedDewar: Dewar | null;
setSelectedDewar: React.Dispatch<React.SetStateAction<Dewar | null>>; setSelectedDewar: React.Dispatch<React.SetStateAction<Dewar | null>>;
setSelectedShipment: React.Dispatch<React.SetStateAction<Shipment_Input>>;
sx?: SxProps; sx?: SxProps;
} }
const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
selectedShipment, selectedShipment,
setSelectedDewar, setSelectedDewar,
setSelectedShipment,
sx = {}, sx = {},
}) => { }) => {
const [localSelectedDewar, setLocalSelectedDewar] = React.useState<Dewar | null>(null); const [localSelectedDewar, setLocalSelectedDewar] = React.useState<Dewar | null>(null);
@ -33,11 +33,9 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
const totalSamples = selectedShipment.dewars.reduce((acc, dewar) => acc + (dewar.number_of_samples || 0), 0); const totalSamples = selectedShipment.dewars.reduce((acc, dewar) => acc + (dewar.number_of_samples || 0), 0);
const handleDewarSelection = (dewar: Dewar) => { const handleDewarSelection = (dewar: Dewar) => {
if (setSelectedDewar) { const newSelection = localSelectedDewar?.id === dewar.id ? null : dewar;
const newSelection = localSelectedDewar?.id === dewar.id ? null : dewar; setLocalSelectedDewar(newSelection);
setLocalSelectedDewar(newSelection); setSelectedDewar(newSelection);
setSelectedDewar(newSelection);
}
}; };
const handleDeleteDewar = () => { const handleDeleteDewar = () => {
@ -45,41 +43,72 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
const confirmed = window.confirm('Are you sure you want to delete this dewar?'); const confirmed = window.confirm('Are you sure you want to delete this dewar?');
if (confirmed) { if (confirmed) {
const updatedDewars = selectedShipment.dewars.filter(dewar => dewar.tracking_number !== localSelectedDewar.tracking_number); const updatedDewars = selectedShipment.dewars.filter(dewar => dewar.tracking_number !== localSelectedDewar.tracking_number);
console.log('Updated Dewars:', updatedDewars); setSelectedShipment((prev) => ({ ...prev, dewars: updatedDewars }));
setLocalSelectedDewar(null); setLocalSelectedDewar(null);
} }
} }
}; };
const handleNewDewarChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleNewDewarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const {name, value} = e.target; const { name, value } = e.target;
setNewDewar((prev) => ({ setNewDewar((prev) => ({
...prev, ...prev,
[name]: value, [name]: value,
})); }));
}; };
const addDewarToList = (currentDewars: Array<Dewar>, newDewar: Dewar): Array<Dewar> => {
return [...currentDewars, newDewar];
};
const updateDewarsState = (prev: Shipment_Input, createdDewar: Dewar): Shipment_Input => {
const updatedDewars = addDewarToList(prev.dewars, createdDewar);
return { ...prev, dewars: updatedDewars };
};
const handleAddDewar = async () => { const handleAddDewar = async () => {
if (selectedShipment && newDewar.dewar_name) { if (selectedShipment && newDewar.dewar_name) {
try { try {
const newDewarToPost: Dewar = { const newDewarToPost: Dewar = {
...newDewar as Dewar,
dewar_name: newDewar.dewar_name.trim() || 'Unnamed Dewar', dewar_name: newDewar.dewar_name.trim() || 'Unnamed Dewar',
number_of_pucks: newDewar.number_of_pucks ?? 0, number_of_pucks: newDewar.number_of_pucks ?? 0,
number_of_samples: newDewar.number_of_samples ?? 0, number_of_samples: newDewar.number_of_samples ?? 0,
return_address: selectedShipment.return_address, return_address: selectedShipment.return_address,
contact_person: selectedShipment.contact_person, contact_person: selectedShipment.contact_person,
status: 'In preparation', status: 'In preparation',
shippingStatus: 'not shipped',
arrivalStatus: 'not arrived',
qrcode: newDewar.qrcode || 'N/A', qrcode: newDewar.qrcode || 'N/A',
}; };
await DefaultService.createDewarDewarsPost(newDewarToPost); // Create a new dewar
const createdDewar = await DefaultService.createDewarDewarsPost(newDewarToPost);
console.log('Created Dewar:', createdDewar);
// Check IDs before calling backend
console.log('Adding dewar to shipment:', {
shipment_id: selectedShipment.shipment_id,
dewar_id: createdDewar.id,
});
// Make an API call to associate the dewar with the shipment
const updatedShipment = await DefaultService.addDewarToShipmentShipmentsShipmentIdAddDewarPost(
selectedShipment.shipment_id,
createdDewar.id
);
if (updatedShipment) {
setSelectedShipment(updatedShipment);
} else {
throw new Error("Failed to update shipment with new dewar");
}
setIsAddingDewar(false); setIsAddingDewar(false);
setNewDewar({dewar_name: '', tracking_number: ''}); setNewDewar({ dewar_name: '', tracking_number: '' });
} catch (error) { } catch (error) {
alert("Failed to add dewar. Please try again."); alert("Failed to add dewar or update shipment. Please try again.");
console.error("Error adding dewar:", error); console.error("Error adding dewar or updating shipment:", error);
} }
} else { } else {
alert('Please fill in the Dewar Name'); alert('Please fill in the Dewar Name');
@ -87,19 +116,19 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
}; };
return ( return (
<Box sx={{...sx, padding: 2, textAlign: 'left'}}> <Box sx={{ ...sx, padding: 2, textAlign: 'left' }}>
{!localSelectedDewar && !isAddingDewar && ( {!localSelectedDewar && !isAddingDewar && (
<Button <Button
variant="contained" variant="contained"
onClick={() => setIsAddingDewar(true)} onClick={() => setIsAddingDewar(true)}
sx={{marginBottom: 2}} sx={{ marginBottom: 2 }}
> >
Add Dewar Add Dewar
</Button> </Button>
)} )}
{isAddingDewar && ( {isAddingDewar && (
<Box sx={{marginBottom: 2, width: '20%'}}> <Box sx={{ marginBottom: 2, width: '20%' }}>
<Typography variant="h6">Add New Dewar</Typography> <Typography variant="h6">Add New Dewar</Typography>
<TextField <TextField
label="Dewar Name" label="Dewar Name"
@ -107,9 +136,9 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
value={newDewar.dewar_name} value={newDewar.dewar_name}
onChange={handleNewDewarChange} onChange={handleNewDewarChange}
fullWidth fullWidth
sx={{marginBottom: 2}} sx={{ marginBottom: 2 }}
/> />
<Button variant="contained" color="primary" onClick={handleAddDewar} sx={{marginRight: 2}}> <Button variant="contained" color="primary" onClick={handleAddDewar} sx={{ marginRight: 2 }}>
Save Dewar Save Dewar
</Button> </Button>
<Button variant="outlined" color="secondary" onClick={() => setIsAddingDewar(false)}> <Button variant="outlined" color="secondary" onClick={() => setIsAddingDewar(false)}>
@ -129,7 +158,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
dewar={localSelectedDewar} dewar={localSelectedDewar}
trackingNumber={localSelectedDewar.tracking_number || ''} trackingNumber={localSelectedDewar.tracking_number || ''}
setTrackingNumber={(value) => { setTrackingNumber={(value) => {
setLocalSelectedDewar((prev) => prev ? {...prev, tracking_number: value} : prev); setLocalSelectedDewar((prev) => prev ? { ...prev, tracking_number: value as string } : prev);
}} }}
contactPersons={selectedShipment.contact_person} contactPersons={selectedShipment.contact_person}
returnAddresses={selectedShipment.return_address} returnAddresses={selectedShipment.return_address}
@ -161,7 +190,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
}} }}
> >
{dewar.qrcode ? ( {dewar.qrcode ? (
<QRCode value={dewar.qrcode} size={70}/> <QRCode value={dewar.qrcode} size={70} />
) : ( ) : (
<Box <Box
sx={{ sx={{
@ -180,7 +209,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
)} )}
</Box> </Box>
<Box sx={{flexGrow: 1, marginRight: 0}}> <Box sx={{ flexGrow: 1, marginRight: 0 }}>
<Typography variant="body1">{dewar.dewar_name}</Typography> <Typography variant="body1">{dewar.dewar_name}</Typography>
<Typography variant="body2">Number of Pucks: {dewar.number_of_pucks || 0}</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">Number of Samples: {dewar.number_of_samples || 0}</Typography>
@ -207,7 +236,7 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
alignSelf: 'center', alignSelf: 'center',
}} }}
> >
<DeleteIcon/> <DeleteIcon />
</Button> </Button>
)} )}
</Box> </Box>

15
frontend/src/components/ShipmentForm.tsx
View File

@ -30,7 +30,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
street: '', street: '',
city: '', city: '',
zipcode: '', zipcode: '',
country: '', country: ''
}); });
const [newShipment, setNewShipment] = React.useState<Shipment_Input>({ const [newShipment, setNewShipment] = React.useState<Shipment_Input>({
@ -54,7 +54,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
try { try {
const c: ContactPerson[] = await DefaultService.getContactsContactsGet(); const c: ContactPerson[] = await DefaultService.getContactsContactsGet();
setContactPersons(c); setContactPersons(c);
} catch (err) { } catch {
setErrorMessage('Failed to load contact persons. Please try again later.'); setErrorMessage('Failed to load contact persons. Please try again later.');
} }
}; };
@ -63,7 +63,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
try { try {
const a: Address[] = await DefaultService.getReturnAddressesReturnAddressesGet(); const a: Address[] = await DefaultService.getReturnAddressesReturnAddressesGet();
setReturnAddresses(a); setReturnAddresses(a);
} catch (err) { } catch {
setErrorMessage('Failed to load return addresses. Please try again later.'); setErrorMessage('Failed to load return addresses. Please try again later.');
} }
}; };
@ -72,7 +72,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
try { try {
const p: Proposal[] = await DefaultService.getProposalsProposalsGet(); const p: Proposal[] = await DefaultService.getProposalsProposalsGet();
setProposals(p); setProposals(p);
} catch (err) { } catch {
setErrorMessage('Failed to load proposals. Please try again later.'); setErrorMessage('Failed to load proposals. Please try again later.');
} }
}; };
@ -155,6 +155,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
number: newShipment.proposal_number number: newShipment.proposal_number
}] : [], }] : [],
return_address: newShipment.return_address ? newShipment.return_address.map(address => ({ return_address: newShipment.return_address ? newShipment.return_address.map(address => ({
id: address.id,
street: address.street, street: address.street,
city: address.city, city: address.city,
zipcode: address.zipcode, zipcode: address.zipcode,
@ -168,7 +169,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
await DefaultService.createShipmentShipmentsPost(payload); await DefaultService.createShipmentShipmentsPost(payload);
setErrorMessage(null); setErrorMessage(null);
onCancel(); // close the form after saving onCancel(); // close the form after saving
} catch (error) { } catch {
setErrorMessage('Failed to save shipment. Please try again.'); setErrorMessage('Failed to save shipment. Please try again.');
} }
}; };
@ -224,7 +225,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
const c: ContactPerson = await DefaultService.createContactContactsPost(payload); const c: ContactPerson = await DefaultService.createContactContactsPost(payload);
setContactPersons([...contactPersons, c]); setContactPersons([...contactPersons, c]);
setErrorMessage(null); setErrorMessage(null);
} catch (err) { } catch {
setErrorMessage('Failed to create a new contact person. Please try again later.'); setErrorMessage('Failed to create a new contact person. Please try again later.');
} }
@ -250,7 +251,7 @@ const ShipmentForm: React.FC<ShipmentFormProps> = ({
const a: Address = await DefaultService.createReturnAddressReturnAddressesPost(payload); const a: Address = await DefaultService.createReturnAddressReturnAddressesPost(payload);
setReturnAddresses([...returnAddresses, a]); setReturnAddresses([...returnAddresses, a]);
setErrorMessage(null); setErrorMessage(null);
} catch (err) { } catch {
setErrorMessage('Failed to create a new return address. Please try again later.'); setErrorMessage('Failed to create a new return address. Please try again later.');
} }

1
frontend/src/pages/ShipmentView.tsx
View File

@ -33,6 +33,7 @@ const ShipmentView: React.FC<ShipmentViewProps> = () => {
selectedShipment={selectedShipment} selectedShipment={selectedShipment}
selectedDewar={selectedDewar} selectedDewar={selectedDewar}
setSelectedDewar={setSelectedDewar} setSelectedDewar={setSelectedDewar}
setSelectedShipment={setSelectedShipment}
/> />
); );
} }

2
frontend/src/tsconfig.json
View File

@ -6,7 +6,7 @@
"strict": true, "strict": true,
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "skipLibCheck": true,
"forceConsistentCasingInFileNames": true "forceConsistentCasingInFileNames": true,
}, },
"include": [ "include": [
"src" "src"

2
frontend/tsconfig.json
View File

@ -3,5 +3,5 @@
"references": [ "references": [
{ "path": "./tsconfig.app.json"}, { "path": "./tsconfig.app.json"},
{ "path": "./tsconfig.node.json"} { "path": "./tsconfig.node.json"}
] ],
} }

12
frontend/vite.config.ts
View File

@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [
}) react(),
],
});