Styled Paper - Copy this React, Mui Component to your project
Create a new shipment with the following features: Sender and Receiver Information: Two forms to input sender and receiver details, including fields: Name, Address, Phone Number, and Email. Provide the functionality to select an address from an Address Book for both the sender and receiver. When an address is selected from the Address Book, the corresponding fields should be auto filled. Package Information: A form to input package details with fields: Quantity, Weight (kg), Length (cm), Width (cm), and Height (cm). Users should be able to add or remove packages. Display a list of the entered packages. Shipment Cost Calculation: After the user fills in the package information, the page should display the total shipment cost based on the number and dimensions of the packages. You can use a simple formula to calculate the cost, for example: based on the total weight or total volume of the packages. User friendly and Responsive Design: Ensure the design is user friendly, with buttons like "Add Package," "Remove Package," "Create Shipment," and "Cancel." Ensure the page is responsive and works well on mobile devices. Optional Requirements (if applicable): Integrate a front end library such as React or Vue. Use localStorage or a simple backend API to save Address Book information and shipment data.
