Drawer Width - Copy this React, Mui Component to your project

Create a graphical user interface using React.js and Material UI (MUI) to manage diagnostic forms in a hospital system. The interface should include: Main View: Form Management Dashboard A dashboard layout with: An AppBar showing the system name, a dropdown menu to select departments, and a login/logout button. A side menu (Drawer) with options: Form Management. Reports. Users. Settings. A main container displaying cards that represent available forms for the selected department. Each card should include: Form name. Brief description. Creation date. "Edit" button. "Open" button to fill out the form. Form Creation/Editing View A dynamic form to define: Form name (TextField). Brief description (TextField). Form fields (dynamic list): Each field should allow selecting: Field name (TextField). Field type (Select with options like text, number, date, dropdown, etc.). Options (if dropdown, an additional field to input values separated by commas). Checkbox to mark the field as required. "Add Field" button. "Save Form" button. Form Response View Render a dynamic form based on the stored structure. Display: Form title. List of fields with corresponding controls (TextField, Select, etc.). "Save Progress" button. "Submit" button to finalize the form. Validate required fields upon submission. Reports View A table displaying submitted form responses. Columns: Hospital name, department, form name, submission date, status (validated/approved/rejected). Filters by: Department. Report status. Date range. "Download PDF" button for each report. Styling and Responsiveness Use MUI’s Grid system to ensure responsive layout. Ensure all components have a consistent look using MUI's default theme or a custom theme. Add relevant icons using @mui/icons material. Additional Features: When clicking "Submit" on a form, show a confirmation dialog (Dialog). Notifications (Snackbar) to indicate successful actions or errors (e.g., "Form saved successfully"). Configurable dark mode available in the Settings view. React Project Structure: Use functional components and hooks like useState, useEffect, and useContext for state management. Organize the project into folders like: components/ for reusable components. pages/ for main views (Dashboard, Create Form, Fill Form, etc.). context/ for global state management (theme, authenticated user). services/ for API calls (e.g., save forms, fetch data). Complementary Technologies: React Router: For navigation between views. Axios or Fetch: For backend API interactions. Formik and Yup: For form validation.