Styled Table Cell - Copy this React, Mui Component to your project
Overview: I want a detailed and visually enhanced design for an "Audit Log" system in a web application dashboard. The design should focus on making it easier for users (such as system administrators) to view asset changes with a user friendly interface, using color coded comparisons for "Old" and "New" values. Requirements: Audit Log Table View: The table should display a list of audit logs, with columns such as: User: The person who made the changes. Table: The database table where the change occurred. Object ID: The ID of the record in the table. Serial Number: The asset's serial number. Timestamp: When the change was made. Actions: A button that says "View Changes." Each row should have a clear visual hierarchy, with alternating row colors to make it easy to differentiate rows. Change Comparison Modal: When the "View Changes" button is clicked, a Modal should appear. In the modal, list the Old and New values for each field that was changed, using a side by side comparison: The Old value should be in red to indicate the outdated value. The New value should be in green to indicate the updated value. Use a structured layout like a table or description list to present the changes clearly. View Full Asset Details: In addition to the modal, provide an option (e.g., a Drawer on the right side) to show the full asset details. The drawer should include fields such as Hostname, Device Type, Make, Model ID, Status, and any changes made to the asset. Include color coded statuses (green for approved, red for pending). Design Elements: Use modern UI components like Material UI (MUI) or Ant Design to provide a sleek and responsive design. Ensure proper padding, margin, and typography for better readability. The design should be professional, optimized for desktop users (administrators), and provide a clean, user friendly experience.
