MF
Mohammed Faruk

Prompt: I want to migrate the Assets.js page from Ant Design to Material UI (MUI), preserving all existing features. Here's a summary of the requirements: Table Display: Use Material UI’s Table to display columns like Hostname, Device Type, Make, Model ID, IP Address, Asset Tag, Serial Number, Ticket Number, Status, AD ID, Assigned To, Email, etc. Implement pagination using TablePagination with 10 rows per page by default. Add column visibility control using Checkbox and a Settings icon to toggle columns. Ensure full responsiveness with horizontal scrolling on smaller screens. Search Functionality: Use TextField for a dynamic search input that filters table rows based on any column value. Column Visibility Control: Implement a Settings icon that triggers column visibility toggle using Checkbox components. Export Functionality: Add a CSV export button using Button and SaveAlt icon to export visible, filtered data. Asset Details Modal: Use Dialog to display asset details in a modal, with Tabs to show General Info (e.g., Hostname, Device Type), Assigned Info (e.g., AD ID, Assigned To), and Additional Info (e.g., Date, Remarks). Ensure the modal is responsive. Edit Asset Modal: Add an edit button that opens a modal for updating fields like Ticket Number, AD ID, Assigned To, and Remarks. Use TextField for inputs, with form validation and axios.put for backend updates. Pagination: Implement TablePagination to manage row display and page navigation. Responsiveness: Ensure the UI, including the table, search input, and modals, is fully responsive across devices. Loading & Error Handling: Display a loading indicator while fetching data and handle errors with Snackbar or Alert. Data Fetching: Use axios for fetching data with token based authentication from localStorage, and refresh data after updates. Icons: Replace Ant Design icons with MUI icons (Info, Edit, Settings, SaveAlt, Search). Make sure to preserve all functionality and improve the UI with Material UI components and responsiveness.

Prompt
Component Preview

About

No description provided...

Share

Last updated 1 month ago