Styled Paper - Copy this React, Mui Component to your project
Design a responsive admin dashboard in React with a clean, minimalistic UI, divided into three main components to efficiently manage driver operations. The layout should include the following sections: Driver List Section: Fetch and display a list of all existing drivers from the API endpoint localhost:5000/api/driver/. For each driver, display key details such as name, license number, assigned vehicle type (if any), phone number, status (e.g., 'available,' 'busy'), and requestStatus (e.g., 'approved,' 'pending'). Each driver card should have a simple hover effect to enhance interactivity. Driver Request Management: Add a section for managing driver requests, with a toggle button to show or hide a list of pending requests. When visible, each request should appear as a card displaying the driver’s name, license number, phone number, and request submission date. Include 'Approve' and 'Reject' buttons on each card to update the driver’s request status, with appropriate success or error messages shown upon action. Driver Deletion Panel: Create a deletion interface where each driver card has a 'Delete' button to remove the driver. Upon clicking, send a request with the driver’s ID either in the parameters or request body to the delete endpoint. Confirm driver deletion with a success or error message and update the displayed list of drivers accordingly. Include a notifications icon in the dashboard header that toggles a panel displaying relevant alerts or updates when clicked. Use clear class names to style each section, ensuring ease of customization and consistent design across components. The layout should be organized to present all three sections clearly, prioritizing readability and easy navigation for the admin. Generate code with a clean, modular structure, and style each component with subtle animations or transitions to give the dashboard a refined, professional feel.
