@mui/material#FormLabel JavaScript Examples

render() {
    const { classes, t, settings } = this.props;
    const { snackbar } = this.state;
    return (
      <TableViewContainer
        headline={t("Settings")}
        subtitle={t('settings_sub')}
        href="https://docs.grommunio.com/admin/administration.html#settings"
        snackbar={snackbar}
        onSnackbarClose={() => this.setState({ snackbar: '' })}
      >
        <Paper className={classes.paper} elevation={1}>
          <FormControl className={classes.form}>
            <TextField
              select
              className={classes.input}
              label={t("Language")}
              fullWidth
              value={settings.language || 'en-US'}
              onChange={this.handleLangChange}
            >
              {this.langs.map((lang, key) => (
                <MenuItem key={key} value={lang.ID}>
                  {lang.name}
                </MenuItem>
              ))}
            </TextField>
            <FormControl className={classes.formControl}>
              <FormLabel component="legend">{t('Darkmode')}</FormLabel>
              <Switch
                checked={(window.localStorage.getItem('darkMode') === 'true')}
                onChange={this.handleDarkModeChange}
                color="primary"
              />
            </FormControl>
          </FormControl>
        </Paper>
      </TableViewContainer>
    );
  }

export default function FormGroupCheckbox() {
  const [state, setState] = React.useState({
    gilad: true,
    jason: false,
    antoine: false,
  });

  const handleChange = (name) => (event) => {
    setState({ ...state, [name]: event.target.checked });
  };

  const { gilad, jason, antoine } = state;
  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;

  return (
    <AppButtonRoot>
      <FormControl component="fieldset" className="formControl">
        <FormLabel component="legend">Assign responsibility</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
            label="Gilad Gray"
          />
          <FormControlLabel
            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
            label="Jason Killian"
          />
          <FormControlLabel
            control={
              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
            }
            label="Antoine Llorca"
          />
        </FormGroup>
        <FormHelperText>Be careful</FormHelperText>
      </FormControl>

      <FormControl required error={error} component="fieldset" className="formControl">
        <FormLabel component="legend">Pick two</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
            label="Gilad Gray"
          />
          <FormControlLabel
            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
            label="Jason Killian"
          />
          <FormControlLabel
            control={
              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
            }
            label="Antoine Llorca"
          />
        </FormGroup>

        <FormHelperText>You can display an error</FormHelperText>
      </FormControl>
    </AppButtonRoot>
  );
}

export default function PlacingRadioLabel() {
  const [value, setValue] = React.useState("female");

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">labelPlacement</FormLabel>
      <RadioGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
        <FormControlLabel
          value="top"
          label="Top"
          labelPlacement="top"
          control={<Radio color="primary" />}
        />

        <FormControlLabel
          value="start"
          label="Start"
          labelPlacement="start"
          control={<Radio color="primary" />}
        />

        <FormControlLabel
          value="bottom"
          label="Bottom"
          labelPlacement="bottom"
          control={<Radio color="primary" />}
        />

        <FormControlLabel
          value="end"
          label="End"
          labelPlacement="end"
          control={<Radio color="primary" />}
        />
      </RadioGroup>
    </FormControl>
  );
}

render() {
    const { classes, t, open, onCancel, owners, domain, folderID } = this.props;
    const { permissions, selected, adding, deleting } = this.state;

    return (
      <Dialog
        onClose={onCancel}
        open={open}
        maxWidth="sm"
        fullWidth
        TransitionProps={{
          onEnter: this.handleEnter,
        }}
      >
        <DialogTitle>{t('Permissions')}</DialogTitle>
        <DialogContent style={{ minWidth: 400 }}>
          {owners.length > 0 ? <List className={classes.list}>
            {owners.map((user, idx) => <Fragment key={idx}>
              <ListItem disablePadding>
                <ListItemButton
                  selected={user.memberID === selected?.memberID}
                  component="a"
                  onClick={this.handleUserSelect(user)}
                >
                  <ListItemText primary={user.username}/>
                </ListItemButton>
              </ListItem> 
              <Divider />
            </Fragment>)}
          </List> : <div className={classes.noOwnersContainer}>
            <em>{t('No owners')}</em>
          </div>}
          <div className={classes.addUserRow}>
            <Button
              onClick={this.handleAdd}
              variant="contained"
              color="primary"
              style={{ marginRight: 8 }}
            >
              {t('Add')}
            </Button>
            <Button
              onClick={this.handleDelete}
              color="secondary"
            >
              {t('Remove')}
            </Button>
          </div>
          <FormControl fullWidth style={{ marginBottom: 4 }}>
            <InputLabel>{t('Profile')}</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              value={permissionProfiles.findIndex(profile => profile.value === permissions) === -1 ? "" : permissions}
              label={t('Profile')}
              onChange={this.handleProfileSelect}
            >
              {permissionProfiles.map((profile, idx) =>
                <MenuItem key={idx} value={profile.value}>
                  {profile.name}
                </MenuItem>
              )}
            </Select>
          </FormControl>
          <Grid container>
            <Grid item xs={6}>
              <FormControl className={classes.form}>
                <FormLabel>Read</FormLabel>
                <RadioGroup defaultValue={0} value={permissions & 1} onChange={this.handlePermissions}>
                  <FormControlLabel
                    value={0x0}
                    control={<Radio size="small" className={classes.radio}/>}
                    label="None"
                  />
                  <FormControlLabel
                    value={0x1}
                    control={<Radio size="small" className={classes.radio}/>}
                    label="Full Details"
                  />
                </RadioGroup>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <FormControl className={classes.form}>
                <FormLabel>Write</FormLabel>
                <FormControlLabel
                  control={
                    <Checkbox
                      value={0x2}
                      checked={Boolean(permissions & 0x2)}
                      onChange={this.handlePermissions}
                      className={classes.radio}
                      color="primary"
                    />
                  }
                  label={t('Create items')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      value={0x80}
                      checked={Boolean(permissions & 0x80)}
                      className={classes.radio}
                      onChange={this.handlePermissions}
                      color="primary"
                    />
                  }
                  label={t('Create subfolders')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={Boolean(permissions & 0x8)}
                      value={0x8}
                      className={classes.radio}
                      onChange={this.handlePermissions}
                      color="primary"
                    />
                  }
                  label={t('Edit own')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      className={classes.radio}
                      checked={Boolean(permissions & 0x20)}
                      value={0x20}
                      onChange={this.handlePermissions}
                      color="primary"
                    />
                  }
                  label={t('Edit all')}
                />
              </FormControl>
            </Grid>
          </Grid>
          <Grid container style={{ marginTop: 16 }}>
            <Grid item xs={6}>
              <FormControl className={classes.form}>
                <FormLabel>Delete items</FormLabel>
                <RadioGroup
                  value={(permissions & 0x50) || true /* This is a bit janky */}
                  defaultValue={true}
                  onChange={this.handleRadioPermissions}
                >
                  <FormControlLabel
                    value={(permissions & 0x50) === 0} // Has explicit handling
                    control={<Radio size="small" className={classes.radio}/>}
                    label="None" />
                  <FormControlLabel
                    value={0x10}
                    control={<Radio size="small" className={classes.radio}/>}
                    label="Own"
                  />
                  <FormControlLabel
                    value={0x50}
                    control={<Radio size="small" className={classes.radio}/>}
                    label="All"
                  />
                </RadioGroup>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <FormControl className={classes.form}>
                <FormLabel>Other</FormLabel>
                <FormControlLabel
                  control={
                    <Checkbox
                      className={classes.radio}
                      checked={Boolean(permissions & 0x100)}
                      value={0x100}
                      onChange={this.handlePermissions}
                      color="primary"
                    />
                  }
                  label={t('Folder owner')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      className={classes.radio}
                      checked={Boolean(permissions & 0x200)}
                      onChange={this.handlePermissions}
                      color="primary"
                      value={0x200}
                    />
                  }
                  label={t('Folder contact')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      className={classes.radio}
                      checked={Boolean(permissions & 0x400)}
                      onChange={this.handlePermissions}
                      color="primary"
                      value={0x400}
                    />
                  }
                  label={t('Folder visible')}
                />
              </FormControl>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={onCancel}
            color="secondary"
          >
            {t('Close')}
          </Button>
          <Button
            onClick={this.handleSave}
            variant="contained"
            color="primary"
            disabled={owners.length === 0 || !selected}
          >
            {t('Save')}
          </Button>
        </DialogActions>
        <AddOwner
          open={adding}
          onSuccess={this.handleAddingSuccess}
          onError={this.handleAddingError}
          onCancel={this.handleAddingCancel}
          domain={domain}
          folderID={folderID}
        />
        {selected && <RemoveOwner
          open={deleting}
          onSuccess={this.handleDeleteSuccess}
          onError={this.handleDeleteError}
          onClose={this.handleDeleteClose}
          ownerName={selected.username}
          domainID={domain.ID}
          folderID={folderID}
          memberID={selected.memberID}
        />}
      </Dialog>
    );
  }

render() {
    const { classes, t, syncPolicy, handleChange, handleRadio,
      handleSlider, handleCheckbox } = this.props;
    const { allowbluetooth, allowbrowser, allowcam, allowconsumeremail, allowdesktopsync,
      allowhtmlemail, allowinternetsharing, allowirda, allowpopimapemail, allowremotedesk,
      allowsimpledevpw, allowsmimeencalgneg, allowsmimesoftcerts, allowstoragecard,
      allowtextmessaging, allowunsignedapps, allowunsigninstallpacks, allowwifi, alphanumpwreq,
      approvedapplist, attenabled, devencenabled, devpwenabled, devpwexpiration, devpwhistory,
      maxattsize, maxcalagefilter, maxdevpwfailedattempts, maxemailagefilter, maxemailbodytruncsize,
      maxemailhtmlbodytruncsize, maxinacttimedevlock, mindevcomplexchars, mindevpwlenngth,
      pwrecoveryenabled, reqdevenc, reqencsmimealgorithm, reqencsmimemessages, reqmansyncroam,
      reqsignedsmimealgorithm, reqsignedsmimemessages, unapprovedinromapplist } = syncPolicy;
    return (
      <FormControl className={classes.form}>
        <Typography variant="h6" className={classes.header}>{t('Apps and devices')}</Typography>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Allow Bluetooth')}</FormLabel>
          <RadioGroup
            row
            value={syncPolicy.allowbluetooth !== undefined ? syncPolicy.allowbluetooth :
              allowbluetooth === undefined ? '' : allowbluetooth}
            onChange={handleRadio('allowbluetooth')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Disabled')} />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('Allow only HFP')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('Allow')} />
          </RadioGroup>
        </FormControl>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowbrowser}
                onChange={handleCheckbox('allowbrowser')}
                color="primary"
              />
            }
            label={t('Allow browser')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowcam}
                onChange={handleCheckbox('allowcam')}
                color="primary"
              />
            }
            label={t('Allow cam')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowtextmessaging}
                onChange={handleCheckbox('allowtextmessaging')}
                color="primary"
              />
            }
            label={t('Allow text messaging')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowunsignedapps}
                onChange={handleCheckbox('allowunsignedapps')}
                color="primary"
              />
            }
            label={t('Allow unsigned apps')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowunsigninstallpacks}
                onChange={handleCheckbox('allowunsigninstallpacks')}
                color="primary"
              />
            }
            label={t('Allow unsigned install packs')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowinternetsharing}
                onChange={handleCheckbox('allowinternetsharing')}
                color="primary"
              />
            }
            label={t('Allow internet sharing')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowirda}
                onChange={handleCheckbox('allowirda')}
                color="primary"
              />
            }
            label={t('Allow IrDA')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowstoragecard}
                onChange={handleCheckbox('allowstoragecard')}
                color="primary"
              />
            }
            label={t('Allow storage card')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowwifi}
                onChange={handleCheckbox('allowwifi')}
                color="primary"
              />
            }
            label={t('Allow WiFi')}
          />
        </Grid>
        <Grid container>
          <TextField
            className={classes.gridTf}
            label={t("Approved in-ROM applications")}
            helperText="app1,app2,app3,..."
            color="primary"
            value={approvedapplist}
            onChange={handleChange("approvedapplist")}
          />
          <TextField
            className={classes.gridTf}
            label={t("Not approved in-ROM applications")}
            helperText="app1,app2,app3,..."
            color="primary"
            value={unapprovedinromapplist}
            onChange={handleChange("unapprovedinromapplist")}
          />
          <TextField
            className={classes.gridTf}
            label={t("Inactivity (seconds) before device locks itself")}
            color="primary"
            value={maxinacttimedevlock}
            onChange={handleChange("maxinacttimedevlock")}
          />
        </Grid>


        <Typography variant="h6" className={classes.header}>{t('Passwords')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!alphanumpwreq}
                onChange={handleCheckbox('alphanumpwreq')}
                color="primary"
              />
            }
            label={t('Requires alphanumeric password')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!devpwenabled}
                onChange={handleCheckbox('devpwenabled')}
                color="primary"
              />
            }
            label={t('Device password required')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowsimpledevpw}
                onChange={handleCheckbox('allowsimpledevpw')}
                color="primary"
              />
            }
            label={t('Allow simple passwords')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!pwrecoveryenabled}
                onChange={handleCheckbox('pwrecoveryenabled')}
                color="primary"
              />
            }
            label={t('Password recovery enabled')}
          />
        </Grid>
        <Grid container>
          <TextField
            className={classes.gridTf}
            label={t("Min number of passwords to store")}
            color="primary"
            value={devpwhistory}
            onChange={handleChange("devpwhistory")}
          />
          <TextField
            className={classes.gridTf}
            label={t('Device password history')}
            color="primary"
            value={devpwexpiration}
            onChange={handleChange("devpwexpiration")}
          />
        </Grid>
        <div>
          <Typography gutterBottom>
            {t('Max failed password attempts')}
          </Typography>
          <Slider
            className={classes.slider}
            value={maxdevpwfailedattempts || 8}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={4}
            max={16}
            onChange={handleSlider("maxdevpwfailedattempts")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Minumim device password length')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevpwlenngth || 4}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={16}
            onChange={handleSlider("mindevpwlenngth")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Minumim password character classes')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevcomplexchars || 3}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={4}
            onChange={handleSlider("mindevcomplexchars")}
          />
        </div>




        <Typography variant="h6" className={classes.header}>{t('Encryption and signing')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowsmimesoftcerts}
                onChange={handleCheckbox('allowsmimesoftcerts')}
                color="primary"
              />
            }
            label={t('Allow soft certificates')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqdevenc}
                onChange={handleCheckbox('allowcam')}
                color="primary"
              />
            }
            label={t('Device encryption')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqencsmimemessages}
                onChange={handleCheckbox('reqencsmimemessages')}
                color="primary"
              />
            }
            label={t('Requires encrypted messages')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!devencenabled}
                onChange={handleCheckbox('devencenabled')}
                color="primary"
              />
            }
            label={t('Enable device encryption (Deprecated)')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqsignedsmimemessages}
                onChange={handleCheckbox('reqsignedsmimemessages')}
                color="primary"
              />
            }
            label={t('Requires message signing')}
          />
        </Grid>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Encrypt algorithm')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={reqencsmimealgorithm === undefined ? '' : reqencsmimealgorithm}
            onChange={handleRadio('reqencsmimealgorithm')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label="TripleDES" />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label="DES" />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label="RC2128bit" />
            <FormControlLabel value={3} control={<Radio color="primary"/>} label="RC264bit" />
            <FormControlLabel value={4} control={<Radio color="primary"/>} label="RC240bit" />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Allow encrypt algorithm negotiation')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={allowsmimeencalgneg === undefined ? '' : allowsmimeencalgneg}
            onChange={handleRadio('allowsmimeencalgneg')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Not allow')} />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('Only strong')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('Any')} />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Message signing algorithm')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={reqsignedsmimealgorithm === undefined ? '' : reqsignedsmimealgorithm}
            onChange={handleRadio('reqsignedsmimealgorithm')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label="SHA1" />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label="MD5" />
          </RadioGroup>
        </FormControl>




        <Typography variant="h6" className={classes.header}>{t('E-Mail')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowhtmlemail}
                onChange={handleCheckbox('allowhtmlemail')}
                color="primary"
              />
            }
            label={t('Allow html E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowconsumeremail}
                onChange={handleCheckbox('allowconsumeremail')}
                color="primary"
              />
            }
            label={t('Allow consumer E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowpopimapemail}
                onChange={handleCheckbox('allowpopimapemail')}
                color="primary"
              />
            }
            label={t('Allow POP/IMAP E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!attenabled}
                onChange={handleCheckbox('attenabled')}
                color="primary"
              />
            }
            label={t('Enable attachments')}
          />
        </Grid>
        <TextField
          className={classes.slider}
          label={t("Max attachment size")}
          color="primary"
          value={maxattsize}
          onChange={handleChange("maxattsize")}
          InputProps={{
            endAdornment: 'MB',
          }}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Truncation size for plain-text E-Mails")}
          helperText="(-1=unlimited, 0=header only, >0=truncate to size)"
          color="primary"
          value={maxemailbodytruncsize}
          onChange={handleChange("maxemailbodytruncsize")}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Truncation size for HTML E-Mails")}
          helperText="(-1=unlimited, 0=header only, >0=truncate to size)"
          color="primary"
          value={maxemailhtmlbodytruncsize}
          onChange={handleChange("maxemailhtmlbodytruncsize")}
          variant="standard"
        />


        <Typography variant="h6" className={classes.header}>{t('Synchronisation')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowremotedesk}
                onChange={handleCheckbox('allowremotedesk')}
                color="primary"
              />
            }
            label={t('Allow remote desk')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqmansyncroam}
                onChange={handleCheckbox('reqmansyncroam')}
                color="primary"
              />
            }
            label={t('Requires manual synchronization')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowdesktopsync}
                onChange={handleCheckbox('allowdesktopsync')}
                color="primary"
              />
            }
            label={t('Allow desktop sync')}
          />
        </Grid>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Max calendar age')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={maxcalagefilter === undefined ? '' : maxcalagefilter}
            onChange={handleRadio('maxcalagefilter')}
          >
            <FormControlLabel value={4} control={<Radio color="primary"/>} label={t('2 weeks')} />
            <FormControlLabel value={5} control={<Radio color="primary"/>} label={t('1 month')} />
            <FormControlLabel value={6} control={<Radio color="primary"/>} label={t('3 months')} />
            <FormControlLabel value={7} control={<Radio color="primary"/>} label={t('6 months')} />
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Unlimited')} />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio} style={{ marginBottom: 8 }}>
          <FormLabel component="legend">{t('Max E-Mail age')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={maxemailagefilter === undefined ? '' : maxemailagefilter}
            onChange={handleRadio('maxemailagefilter')}
          >
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('1 day')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('3 days')} />
            <FormControlLabel value={3} control={<Radio color="primary"/>} label={t('1 week')} />
            <FormControlLabel value={4} control={<Radio color="primary"/>} label={t('2 weeks')} />
            <FormControlLabel value={5} control={<Radio color="primary"/>} label={t('1 month')} />
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('All')} />
          </RadioGroup>
        </FormControl>
      </FormControl>
    );
  }

Layout1Customizer = ({ settings, handleChange, handleControlChange }) => {
  return (
    <Fragment>
      <Box mb="16px" mx="12px">
        <ThemeName>Sidebar theme</ThemeName>
        <ToolbarContainer>
          {mainSidebarThemes.map((color, i) => (
            <Tooltip key={i} title={color} placement="top">
              <ToolbarContent
                color={color}
                onClick={() => handleChange('layout1Settings.leftSidebar.theme', color)}
              >
                {settings.layout1Settings.leftSidebar.theme === color && <Icon>done</Icon>}
                <div className={settings.themes[color].palette.type}></div>
              </ToolbarContent>
            </Tooltip>
          ))}
        </ToolbarContainer>
      </Box>

      <Box mb="32px" mx="12px">
        <ThemeName>Sidebar theme</ThemeName>
        <ToolbarContainer>
          {topbarThemes.map((color, i) => (
            <Tooltip key={i} title={color} placement="top">
              <ToolbarContent
                color={color}
                onClick={() => handleChange('layout1Settings.topbar.theme', color)}
              >
                {settings.layout1Settings.topbar.theme === color && <Icon>done</Icon>}
                <div className={settings.themes[color].palette.type}></div>
              </ToolbarContent>
            </Tooltip>
          ))}
        </ToolbarContainer>
      </Box>

      <Box mb="18px" mx="12px">
        <FormControl component="fieldset">
          <FormLabel component="legend">Sidebar mode</FormLabel>
          <RadioGroup
            aria-label="Sidebar"
            name="leftSidebar"
            value={settings.layout1Settings.leftSidebar.mode}
            onChange={handleControlChange('layout1Settings.leftSidebar.mode')}
          >
            <FormControlLabel value="full" control={<Radio />} label="Full" />
            <FormControlLabel value="close" control={<Radio />} label="Close" />
            <FormControlLabel value="compact" control={<Radio />} label="Compact" />
          </RadioGroup>
        </FormControl>
      </Box>

      <Box mb="32px" mx="12px">
        <ThemeName sx={{ mb: 4 }}>Sidebar background image</ThemeName>
        <div>
          <Grid container spacing={3}>
            {sidebarBG.map((bg, i) => (
              <Grid item xs={4} key={i}>
                <BadgeSelected
                  color="primary"
                  badgeContent={<Icon>done</Icon>}
                  invisible={settings.layout1Settings.leftSidebar.bgImgURL !== bg}
                  sx={{ width: '100%', height: '100%', cursor: 'pointer' }}
                >
                  <Paper onClick={() => handleChange('layout1Settings.leftSidebar.bgImgURL', bg)}>
                    <IMG src={bg} alt="" />
                  </Paper>
                </BadgeSelected>
              </Grid>
            ))}
          </Grid>
        </div>
      </Box>

      <Box mb="24px" mx="12px">
        <FormControl component="fieldset">
          <FormLabel component="legend">Topbar</FormLabel>
          <FormGroup>
            <FormControlLabel
              control={
                <Switch
                  checked={get(settings.layout1Settings.topbar, 'show')}
                  onChange={handleControlChange('layout1Settings.topbar.show')}
                />
              }
              label="Show"
            />

            <FormControlLabel
              control={
                <Switch
                  checked={get(settings.layout1Settings.topbar, 'fixed')}
                  onChange={handleControlChange('layout1Settings.topbar.fixed')}
                />
              }
              label="Fixed"
            />
          </FormGroup>
        </FormControl>
      </Box>
    </Fragment>
  );
}