Refactor Admin components for MUI v7 compatibility

[SAUMILDHANKAR]

This issue written with ChatGPT models' help

Overview

We want to upgrade the components/Admin/ folder to MUI v7 so our code base is up to date and secure.

Details

⚠️ 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.

The components/Admin/ directory contains many MUI-dependent components including dialogs, forms, tables, alerts, buttons, icons, autocomplete inputs, and Data Grid usage. Since the project is upgrading MUI incrementally folder-by-folder, the Admin folder should be treated as a dedicated migration sub-issue under the larger MUI v7 upgrade effort.

This work should focus on identifying and refactoring all MUI usage within the components/Admin/ folder so that the codebase is compatible with MUI v7 and related MUI X package updates.

The Admin area is expected to be one of the more complex migration targets because it contains:

• Form-heavy workflows
• Dialog and modal interactions
• Data Grid usage
• Date Picker usage
• Custom styling and layout overrides
• Mixed .jsx and .tsx component usage

This migration may require:

• Updating deprecated or renamed MUI imports
• Refactoring components affected by breaking API or prop changes
• Updating MUI X Data Grid usage to match newer APIs
• Updating Date Picker adapters/imports if present
• Reviewing sx, theme overrides, styling behavior, spacing, and layout consistency
• Verifying dialogs, alerts, forms, buttons, autocomplete inputs, and table interactions continue to function correctly
• Resolving TypeScript typing issues introduced by newer MUI definitions
• Performing manual QA to identify visual regressions or interaction issues
• Please consider adding critical tests and validations (optional)
• Note: As of May 9, 2026, typescript feature branch isn't merged yet, so some of the jsx files written in this issue could have become tsx by the time developer is assigned so please keep that in mind.

Known files and folders in scope include (non-exhaustive):

• components/Admin/ImportOrganizations/
• components/Admin/OrganizationEdit/
• components/Admin/ui/
• components/Admin/AccountAutocomplete.tsx
• components/Admin/Announcements.jsx
• components/Admin/AssignDialog.tsx
• components/Admin/LocationAutocomplete.jsx
• components/Admin/OpenTimeForm.jsx
• components/Admin/SearchCriteria.jsx
• components/Admin/SearchCriteriaDisplay.jsx
• components/Admin/Suggestions.jsx
• components/Admin/TagAdmin.jsx
• components/Admin/VerificationAdmin.jsx
• components/Admin/VerificationAdminGridMui.jsx
• components/Admin/VerificationDashboard.jsx

Particular attention should be given to:

• VerificationAdminGridMui.jsx
• Dialog-related components
• Autocomplete components
• Any component using MUI X packages such as Data Grid or Date Pickers

Because MUI v7 introduces breaking changes across core components and MUI X packages, developers should review the migration documentation while working through this folder migration.

Action Items

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

Resources

• Parent issue: [MUI upgrade parent issue (#2626)](https://github.com/hackforla/food-oasis/issues/2626?utm_source=chatgpt.com)
• [MUI migration overview (v5 → newer versions)](https://mui.com/material-ui/migration/?utm_source=chatgpt.com)
• [MUI breaking changes and migration guides](https://mui.com/material-ui/migration/upgrade-to-v6/?utm_source=chatgpt.com)
• [MUI X Data Grid migration guide](https://mui.com/x/migration/migration-data-grid/?utm_source=chatgpt.com)
• [MUI X Date Pickers migration guide](https://mui.com/x/migration/migration-pickers/?utm_source=chatgpt.com)
• [VerificationAdminGridMui.jsx](https://github.com/hackforla/food-oasis/blob/5a356d5f70375b32751b4b17f3e05b1107b4f1dc/client/src/components/Admin/VerificationAdminGridMui.jsx?utm_source=chatgpt.com)