Group Fields in adding resource dropdown

[shelcia]

Tech ref: https://mui.com/material-ui/react-select/#grouping

Grouping ref: https://fakerjs.dev/api/

[shelcia]

     <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
        <Select defaultValue="" id="grouped-select" label="Grouping">
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <ListSubheader>Category 1</ListSubheader>
          <MenuItem value={1}>Option 1</MenuItem>
          <MenuItem value={2}>Option 2</MenuItem>
          <ListSubheader>Category 2</ListSubheader>
          <MenuItem value={3}>Option 3</MenuItem>
          <MenuItem value={4}>Option 4</MenuItem>
        </Select>
      </FormControl>

[AbhiPatel10]

Need more clarification on this issue.

[shelcia]

There is a way to group the fields through MUI https://mui.com/material-ui/react-select/#grouping

The grouping needs to be done based on https://fakerjs.dev/api/. (category wise)

[abdullahranginwala]

@AbhiPatel10 Are you working on this? If not, I'd love to take this up

[AbhiPatel10]

Go for it, @shelcia Please assign this issue to @abdullahranginwala

[abdullahranginwala]

Thank you!

[MCoder86A]

@shelcia Can you add codepeak22 label in this issue