MUI: Upgrade from v5 to v7 (including Data Grid & Date Picker)

[SAUMILDHANKAR]

Overview

We want to upgrade Material UI (MUI) from v5 to v7 because it improves security, compatibility, and long-term maintainability across the application.

Details

Upgrade Material UI (MUI) from version 5 to version 7 to improve security, compatibility, and long-term maintainability across the entire application. This is a major version upgrade and is expected to introduce breaking changes. Any resulting refactors or UI updates should be considered part of the intended scope of this work rather than regressions.

This upgrade should include all MUI core and MUI X packages, including the MUI Data Grid and MUI Date Picker, to ensure version consistency across the codebase. Many components throughout the client application rely on MUI, so this effort may impact a large number of files. Admin-facing components such as VerificationAdminGridMui.jsx are known examples, but the scope is not limited to those files.

The project currently relies on MUI v5, which is no longer the latest major release and will increasingly fall behind in terms of security updates, browser compatibility, and ecosystem support. Remaining on an older major version increases technical debt and makes future upgrades more costly and risky.

Upgrading to MUI v7 aligns the project with the actively supported MUI ecosystem, reduces dependency-related security risks, and improves long-term maintainability. Performing the upgrade in a single coordinated effort helps avoid version skew between MUI core and MUI X packages (such as Data Grid and Date Picker), which can otherwise cause runtime errors, styling inconsistencies, or broken UI behavior.

In addition to the points above, this work is expected to include:

• Upgrading all MUI core packages (e.g. @mui/material, @mui/icons-material, @mui/system, and @mui/styles if present) to v7
• Upgrading MUI X packages (@mui/x-data-grid, @mui/x-date-pickers, and any related Pro or Premium packages) to versions compatible with MUI v7
• Refactoring components affected by breaking API changes, deprecated props, renamed imports, or changed default behaviors
• Reviewing and updating Date Picker adapters (e.g. Day.js, date-fns, Luxon) and ensuring correct imports and configuration
• Verifying Data Grid functionality such as date filtering, sorting, editing, pagination, and column configuration
• Validating that custom theming, style overrides, and sx usage continue to function correctly
• Performing manual QA across both user-facing and admin-facing flows to catch visual or functional regressions

Action Items

[PLEASE ADD ACTION ITEMS (Dev lead/developer will add)]

Resources

• MUI v7 migration overview: https://mui.com/material-ui/migration/
• MUI X Data Grid migration guide: https://mui.com/x/migration/migration-data-grid/
• MUI X Date Pickers migration guide: https://mui.com/x/migration/migration-pickers/
• Example impacted file:
  

  food-oasis/client/src/components/Admin/VerificationAdminGridMui.jsx

  Line 5 in 5a356d5

  import { DataGrid } from "@mui/x-data-grid";

---

[SAUMILDHANKAR]

Saumil will assign June once this is cleaned up.