Styled Paper - Copy this React, Mui Component to your project

Here's an enhanced and streamlined content for creating the best invoice design: 1. Layout and Spacing Improvements Header & Title: The "Create Invoice" title should be prominent, bold, and placed at the top. Use a deep blue color for this title to align with your color scheme and make it easily identifiable. Organized Grid Layout: Divide the form into clear sections using a three-column grid for "Customer Information," "Invoice Details," and "Items." Each section should be contained within its own area, with subtle borders or shading to visually separate them, improving scan-ability and user experience. 2. Color Scheme and Visual Hierarchy Soft Background Color: Use light gray or white for the background to maintain a clean, uncluttered appearance, allowing the content to stand out. Accentuate important elements with bold blue buttons and labels for a cohesive look. Accent Colors: Primary action buttons like “Save Draft” and “Submit Invoice” should be highlighted using shades of blue, which contrast nicely against the neutral background. For secondary actions (like "Cancel"), opt for a neutral color such as gray to avoid drawing unnecessary attention. Summary Section: To emphasize financial totals (Subtotal, Tax, Total), use a soft green background with bold and readable text, ensuring these critical figures are easily spotted. 3. Items Section Customization Toggleable Columns: Enable users to customize the "Items" section by allowing them to switch between “Items,” “Products,” “Services,” and “Other.” This can be done through toggle buttons or a dropdown menu. Make sure the selected option appears in bold to clearly indicate the user’s choice. Column Customization: Give users the ability to show or hide specific columns such as "Item Name," "Description," "Quantity," "Price," and "Amount." Use checkboxes for easy column visibility adjustments. This can be organized within a floating modal or dropdown to maintain a neat and tidy interface. Example customization options: Items Type: Dropdown to select between "Items (Default)," "Products," "Services," or "Other." Hide Columns: Checkboxes to hide/display specific columns, including "Item Name," "Description," "Units," "Price," and "Amount." 4. Invoice Details Section Intuitive Date Pickers: Incorporate a clean, user-friendly date picker for both the “Invoice Date” and “Due Date” fields. Use subtle borders to highlight the selected date, making the interface intuitive and visually appealing. Optional PO & REF Numbers: Mark the "PO Number" and "REF Number" as optional fields. Display them with smaller font size or lighter background colors to reduce clutter. Add a helpful tooltip explaining when to use them. 5. Notes & Terms Section Expandable Accordion: Use an accordion-style dropdown for the "Notes & Terms" section. By default, the “Terms & Conditions” should be collapsed, expanding only when clicked. This will keep the interface clean while providing flexibility for users to see additional details when needed. Editable Notes: Provide a large, easy-to-edit text box for the “Notes” field. Use a pencil icon next to this field for simple editing. This icon should be visible but not overpower the rest of the invoice layout. 6. Attachments Section Drag-and-Drop Area: The attachment section should feature a large drag-and-drop area with a dashed border. Include clear instructions on the maximum file size (e.g., Max 20MB) and ensure the design allows users to upload multiple files easily. File Upload Button: Use a bold "Upload Files" button that contrasts with the background for visibility. Position this button just below the "Terms & Conditions" section, ensuring a logical flow. 7. Footer and Action Buttons Footer Area: The footer should display any additional business details like phone number, email, or website. Keep this section minimal and easy to read without distracting from the main invoice creation process. Action Buttons: Position the action buttons (like “Save Draft” and “Submit Invoice”) at the bottom, ensuring they are easily accessible at all times. These buttons should be large, visually distinct, and have a clear color contrast to help users easily take action. New Invoice Design Overview 1. Header and Title “Create Invoice” displayed in bold, deep blue. 2. Sections Customer Information: Includes a search bar for easy customer addition and a clear "Add New Customer" button in blue. Invoice Details: Features date pickers for the "Invoice Date" and "Due Date" with a clean, interactive interface. The optional fields like "PO Number" and "REF Number" are visually secondary. 3. Items Section Dynamic, customizable table that allows users to toggle visibility of columns such as "Description," "Quantity," "Price," and "Amount." The summary (Subtotal, Tax, Total) is shown in a soft green box, making it visually prominent. 4. Notes & Terms Section Accordion dropdown for "Terms & Conditions" and a large text box for "Notes," with an easy-to-click edit icon. 5. Attachments Section Large drag-and-drop area for file uploads, with clear limits and easy navigation. 6. Action Buttons Save Draft and Submit Invoice buttons are large and bold, with contrasting colors for clarity. This design approach focuses on clarity, usability, and modern aesthetics, ensuring that users can easily create and customize invoices while maintaining a clean, organized layout. It provides an intuitive flow with easy-to-navigate sections and customizable options, allowing flexibility for different business needs.