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

Design a professional and user friendly Exam Management Page for the admin dashboard of a teaching jobs portal. This page allows administrators to manage all aspects of exams, including creating, viewing, editing, and deleting exams. The page should be designed with CRUD (Create, Read, Update, Delete) functionality and should integrate the following fields from the Exam model: name, description, subject, level, class category, total marks, duration, and timestamps (created_at and updated_at). The design should ensure clarity, efficiency, and responsiveness while presenting relevant exam data and actions in a clean layout. 1. Header Section Page Title: Manage Exams. Subtitle: "Add, edit, or delete exams and organize them by subject, level, and class category." Action Button: Add New Exam button with a "+" icon to open a form or modal for creating a new exam. 2. Exams Table Section Display a dynamic table that lists all exams with the following columns: ID: Auto generated identifier. Name: Name of the exam (e.g., Math Midterm, Science Final). Subject: The subject associated with the exam (e.g., Mathematics, Science). Level: The difficulty level (e.g., Beginner, Intermediate, Advanced). Class Category: The associated class range (e.g., 6 to 8). Total Marks: The maximum score achievable. Duration: Duration in minutes. Actions: View: Eye icon to view detailed information about the exam. Edit: Pencil icon to update exam details. Delete: Trash icon to remove the exam (with a confirmation modal). Features: Search Bar: To filter exams by name, subject, or class category. Filters: Dropdowns for filtering by subject, level, and class category. Pagination: For managing a large number of exams. 3. Add/Edit Exam Modal A modal or dedicated section for adding or editing an exam. Include: Form Fields: Name: Input field for the exam name. Description: Text area for additional details (optional). Subject: Dropdown to select from available subjects. Level: Dropdown for selecting the difficulty level. Class Category: Dropdown for selecting the associated class range. Total Marks: Input field for the maximum marks. Duration: Input field for duration in minutes. Buttons: Save: To create or update the exam. Cancel: To close the modal without saving changes. Validation: Ensure all required fields are filled and values are valid. 4. View Exam Details Modal A modal that shows detailed information about the exam, including: Name. Description. Subject. Level. Class Category. Total Marks. Duration. Created At and Updated At timestamps. Include a close button to exit the modal. 5. Delete Confirmation Modal Modal Content: "Are you sure you want to delete this exam? This action cannot be undone." Buttons: Confirm: Executes the delete operation. Cancel: Closes the modal without deleting. 6. Analytics Section (Optional) Include basic analytics to give the admin insights, such as: Total number of exams. Exams grouped by subject, level, or class category (displayed as charts or graphs). 7. Responsive Design Optimize the layout for smaller screens: Replace the table with a collapsible list view for exams. Ensure action buttons (e.g., Add, Edit, Delete) are touch friendly. 8. Notifications and Error Handling Show toast notifications for: Successful actions (e.g., "Exam added successfully!"). Errors (e.g., "Failed to delete exam. Please try again."). 9. Footer Section Quick links for navigation to related pages like: Manage Subjects. Manage Class Categories. Manage Levels. This Exam Management Page should provide an intuitive interface for handling exams, ensuring data integrity, and improving administrative efficiency.