various bugs fixing

logistics/src/components/Modal.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Modal as MuiModal, Box, Typography, IconButton } from '@mui/material';
+import { Close } from '@mui/icons-material';
+import styled from 'styled-components';
+
+const ModalContent = styled(Box)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  width: 80%;
+  max-width: 600px;
+`;
+
+const ModalHeader = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ open, onClose, title, children }) => {
+  return (
+    <MuiModal open={open} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>
+          <Typography variant="h6">{title}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </ModalHeader>
+        {children}
+      </ModalContent>
+    </MuiModal>
+  );
+};
+
+export default Modal;