https and ssl integration on the backend, frontend and started integration of logistics app as a separate frontend

frontend/fetch-openapi.js

@@ -1,14 +1,16 @@
 // fetch-and-generate-openapi.js
 import fs from 'fs';
-import http from 'http';
+import https from 'https'; // Use https instead of http
 import { exec } from 'child_process';
 import chokidar from 'chokidar';
 import path from 'path';
 import util from 'util';
 
-const OPENAPI_URL = 'http://127.0.0.1:8000/openapi.json';
+const OPENAPI_URL = 'https://127.0.0.1:8000/openapi.json';
 const SCHEMA_PATH = path.resolve('./src/openapi.json');
 const OUTPUT_DIRECTORY = path.resolve('./openapi');
+const SSL_KEY_PATH = path.resolve('../backend/ssl/key.pem');  // Path to SSL key
+const SSL_CERT_PATH = path.resolve('../backend/ssl/cert.pem'); // Path to SSL certificate
 
 console.log(`Using SCHEMA_PATH: ${SCHEMA_PATH}`);
 console.log(`Using OUTPUT_DIRECTORY: ${OUTPUT_DIRECTORY}`);
@@ -38,8 +40,14 @@ async function fetchAndGenerate() {
     console.log("🚀 Fetching OpenAPI schema...");
 
     try {
+        const options = {
+            rejectUnauthorized: false,
+            key: fs.readFileSync(SSL_KEY_PATH),
+            cert: fs.readFileSync(SSL_CERT_PATH),
+        };
+
         const res = await new Promise((resolve, reject) => {
-            http.get(OPENAPI_URL, resolve).on('error', reject);
+            https.get(OPENAPI_URL, options, resolve).on('error', reject);
         });
 
         let data = '';
@@ -97,7 +105,7 @@ const watcher = chokidar.watch(backendDirectory, { persistent: true, ignored: [S
 
 watcher
     .on('add', debounce(fetchAndGenerate, debounceDelay))
-    .on('change', debounce(fetchAndGenerate, debounceDelay))
+    .on('change', debounce(fetchAndGenerate, debounceDelay))  // Corrected typo here
     .on('unlink', debounce(fetchAndGenerate, debounceDelay));
 
 console.log(`👀 Watching for changes in ${backendDirectory}`);

frontend/src/components/DewarDetails.tsx

@@ -99,7 +99,7 @@ const DewarDetails: React.FC<DewarDetailsProps> = ({
     const [knownSerialNumbers, setKnownSerialNumbers] = useState<DewarSerialNumber[]>([]);
     const [selectedSerialNumber, setSelectedSerialNumber] = useState<string>('');
     const [isQRCodeGenerated, setIsQRCodeGenerated] = useState(false);
-    const [qrCodeValue, setQrCodeValue] = useState(dewar.qrcode || '');
+    const [qrCodeValue, setQrCodeValue] = useState(dewar.unique_id || '');
     const qrCodeRef = useRef<HTMLCanvasElement>(null); //
 
     useEffect(() => {
@@ -368,7 +368,6 @@ const DewarDetails: React.FC<DewarDetailsProps> = ({
                 shipping_date: formatDate(dewar.shipping_date),
                 arrival_date: dewar.arrival_date,
                 returning_date: dewar.returning_date,
-                qrcode: dewar.qrcode,
                 return_address_id: parseInt(selectedReturnAddress ?? '', 10),
                 contact_person_id: parseInt(selectedContactPerson ?? '', 10),
             };
@@ -391,13 +390,13 @@ const DewarDetails: React.FC<DewarDetailsProps> = ({
         setChangesMade(true);
     };
 
-    const handleGenerateQRCode = async () => {
+    const handleGenerateQRCode = () => {
         if (!dewar) return;
 
         try {
-            const response = await DewarsService.generateDewarQrcodeDewarsDewarIdGenerateQrcodePost(dewar.id);
-            setQrCodeValue(response.qrcode);  // assuming the backend returns the QR code value
-            setIsQRCodeGenerated(true);  // to track the state if the QR code is generated
+            const newQrCodeValue = dewar.unique_id;  // Using unique_id directly for QR code value
+            setQrCodeValue(newQrCodeValue);
+            setIsQRCodeGenerated(true);
             setFeedbackMessage("QR Code generated successfully");
             setOpenSnackbar(true);
         } catch (error) {
@@ -510,31 +509,29 @@ const DewarDetails: React.FC<DewarDetailsProps> = ({
                 )}
             </FormControl>
 
-            <Box sx={{ marginTop: 2 }}>
-                <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 2 }}>
-                    {qrCodeValue ? (
-                        <Box sx={{ textAlign: 'center', marginBottom: 2 }}>
-                            <QRCode id="qrCodeCanvas" value={qrCodeValue} size={150} />
-                            <Box sx={{ display: 'flex', alignItems: 'center', marginTop: 1 }}>
-                                <Tooltip title="Download Label">
-                                    <IconButton onClick={handleDownloadLabel} sx={{ transform: 'scale(1.5)', margin: 1 }}>
-                                        <DownloadIcon />
-                                    </IconButton>
-                                </Tooltip>
-                                <Typography variant="body2">Label is ready for download</Typography>
-                            </Box>
+            <Box sx={{ textAlign: 'center', marginBottom: 2 }}>
+                {qrCodeValue ? (
+                    <Box>
+                        <QRCode id="qrCodeCanvas" value={qrCodeValue} size={150} />
+                        <Box sx={{ display: 'flex', alignItems: 'center', marginTop: 1 }}>
+                            <Tooltip title="Download Label">
+                                <IconButton onClick={handleDownloadLabel} sx={{ transform: 'scale(1.5)', margin: 1 }}>
+                                    <DownloadIcon />
+                                </IconButton>
+                            </Tooltip>
+                            <Typography variant="body2">Label is ready for download</Typography>
                         </Box>
-                    ) : (
-                        <Typography>No QR code available</Typography>
-                    )}
-                    <Button
-                        variant="contained"
-                        sx={{ marginTop: 1 }}
-                        onClick={handleGenerateQRCode}
-                    >
-                        Generate QR Code
-                    </Button>
-                </Box>
+                    </Box>
+                ) : (
+                    <Typography>No QR code available</Typography>
+                )}
+                <Button
+                    variant="contained"
+                    sx={{ marginTop: 1 }}
+                    onClick={handleGenerateQRCode}
+                >
+                    Generate QR Code
+                </Button>
             </Box>
 
             <Box sx={{ marginTop: 2 }}>

frontend/src/components/ShipmentDetails.tsx

@@ -44,7 +44,6 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
         shipping_date: null,
         arrival_date: null,
         returning_date: null,
-        qrcode: 'N/A',
         contact_person_id: selectedShipment?.contact_person?.id,
         return_address_id: selectedShipment?.return_address?.id,
     };
@@ -275,8 +274,8 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
                             }}
                         >
                             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 2 }}>
-                                {dewar.qrcode ? (
-                                    <QRCode value={dewar.qrcode} size={70} />
+                                {dewar.unique_id ? (
+                                    <QRCode value={dewar.unique_id} size={70} />
                                 ) : (
                                     <Box
                                         sx={{
@@ -338,10 +337,10 @@ const ShipmentDetails: React.FC<ShipmentDetailsProps> = ({
                                 setTrackingNumber={(value) => {
                                     setLocalSelectedDewar((prev) => (prev ? { ...prev, tracking_number: value as string } : prev));
                                 }}
-                                initialContactPersons={localSelectedDewar?.contact_person ? [localSelectedDewar.contact_person] : []} // Focus on dewar contact person
-                                initialReturnAddresses={localSelectedDewar?.return_address ? [localSelectedDewar.return_address] : []} // Focus on dewar return address
-                                defaultContactPerson={localSelectedDewar?.contact_person ?? undefined}  // Use `?? undefined`
-                                defaultReturnAddress={localSelectedDewar?.return_address ?? undefined}  // Use `?? undefined`
+                                initialContactPersons={localSelectedDewar?.contact_person ? [localSelectedDewar.contact_person] : []}
+                                initialReturnAddresses={localSelectedDewar?.return_address ? [localSelectedDewar.return_address] : []}
+                                defaultContactPerson={localSelectedDewar?.contact_person ?? undefined}
+                                defaultReturnAddress={localSelectedDewar?.return_address ?? undefined}
                                 shipmentId={selectedShipment?.id ?? null}
                                 refreshShipments={refreshShipments}
                             />