Upgrade MUI Core packages to v7 (including X packages Data Grid & Date Picker)

[SAUMILDHANKAR]

Issue written with OpenAI help

Overview

We need to upgrade the core Material-UI (MUI) dependencies from v5 to v7 because it is required to align the codebase with the latest MUI major version, improve long-term maintainability, and enable usage of the newest UI components and APIs

⚠️ Important workflow note:
This work should be done on a dedicated feature branch (e.g. feature/mui-v7-upgrade) and must not be merged directly into develop or main until all related UI refactor and validation issues in the epic are complete.

---

Details

This includes updating the following packages in the project’s package.json:

• @mui/material
• @mui/system
• @mui/icons-material
• @mui/x-data-grid v7
• @mui/x-date-pickers v7

This issue aims to ensure that the application builds and runs on MUI v7 with a focus on platform compatibility. Actual UI refactors required for visual correctness will be covered in separate issues. This is part of the larger MUI Upgrade epic (#2626).

• Update the project’s dependencies to use MUI packages at v7.x versions.
• Verify licensing of upgraded MUI packages: Ensure only MIT-licensed MUI Community packages are used (e.g., no Pro or Premium MUI X packages such as @mui/x-data-grid-pro or @mui/x-data-grid-premium) and confirm no new paid or incompatible licenses are introduced as part of the MUI v7 upgrade.
  npm info @mui/x-data-grid license
npm info @mui/x-date-pickers license
• After committing the MUI v7 upgrade, may run npm install and npm start (in client folder) to surface build/runtime errors, document them, and link or update the relevant sub-issues under Epic Epic Feature: Upgrade MUI from v5 → v7 (including Data Grid & Date Picker) #2626 based on the impacted components or features.
• Should update and resolve any necessary peer dependencies related to MUI.
• Should address any compilation or runtime errors caused by breaking changes in MUI v7.
• Should update global theme and provider configuration as needed to support v7 (only to the extent required for compilation).
• Should not perform component-level refactors or UI adjustments beyond what’s essential to make the app build and run successfully.
• If helpful, document any major breaking changes encountered and how they were resolved.

Packages to update:

• @mui/material
• @mui/system
• @mui/icons-material
• @mui/x-data-grid v7
• @mui/x-date-pickers v7

Expected outcomes:

• Application compiles without errors after dependency update.
• App starts and runs at least to the login/home screen.
• Theme provider does not crash due to API changes.

Sample errors expected after first npm install and npm start:

Error: The following dependencies are imported but could not be resolved:

  @mui/lab/LoadingButton (imported by G:/Saumil 2026/saumil food oasis/food-oasis/client/src/components/Account/ConfirmEmail.tsx)
  @mui/material/Unstable_Grid2 (imported by G:/Saumil 2026/saumil food oasis/food-oasis/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx)
  @mui/material/Unstable_Grid2/Grid2 (imported by G:/Saumil 2026/saumil food oasis/food-oasis/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.jsx)

Are they installed?
    at file:///G:/Saumil%202026/saumil%20food%20oasis/food-oasis/client/node_modules/vite/dist/node/chunks/dep-D4NMHUTW.js:14849:15
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async file:///G:/Saumil%202026/saumil%20food%20oasis/food-oasis/client/node_modules/vite/dist/node/chunks/dep-D4NMHUTW.js:47014:28
6:19:40 AM [vite] (client) Pre-transform error: Failed to resolve import "@mui/material/Unstable_Grid2" from "src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx". Does the file exist?
  Plugin: vite:import-analysis
  File: G:/Saumil 2026/saumil food oasis/food-oasis/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx:8:18
  23 |  import AccordionDetails from "@mui/material/AccordionDetails";
  24 |  import AccordionSummary from "@mui/material/AccordionSummary";
  25 |  import Grid2 from "@mui/material/Unstable_Grid2";
     |                     ^
  26 |  import InternalLink from "components/UI/InternalLink";
  27 |  import {

suggested changes for above error:

Old | New
@mui/lab/LoadingButton | @mui/material
Unstable_Grid2 | Grid2
then run npm install and npm start to find more errors and fix accordingly

---

Action Items

[PLEASE ADD ACTION ITEMS (developer will add)]

---

Notes / Resources

• This work is part of the MUI Upgrade Epic: Epic Feature: Upgrade MUI from v5 → v7 (including Data Grid & Date Picker) #2626
• UI refactor work (Admin, FoodSeeker, Layout, etc.) should be tracked in separate issues once the upgrade baseline is ready.
• All work for this issue should remain isolated in the MUI v7 feature branch until the epic is complete.

---