@material-ui/core#Table JavaScript Examples

render() {
        return (
            <TableContainer component={Paper}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Nr</TableCell>
                            <TableCell>Label</TableCell>
                            <TableCell align="right">Text</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody component={DroppableComponent(this.onDragEnd)}>
                        {this.state.items.map((item, index) => (
                            <TableRow component={DraggableComponent(item.id, index)} key={item.id} >
                                <TableCell scope="row">{index + 1}</TableCell>
                                <TableCell>{item.primary}</TableCell>
                                <TableCell align="right">{item.secondary}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        )
    }

render() {
		return (
			<Dialog
				onEntered={helpers.genOnback(this.props.onClose)}
				disableBackdropClick={false}
				open={true}
				onClose={this.onClose}
			>
				<DialogTitle>Leaderboard</DialogTitle>
				<DialogContent>
					<TableContainer component={Paper}>
						<Table>
							<TableBody>
								{this.state.userStats.map((userStat, idx) => {
									return this.makeRow(
										idx + 1,
										userStat.Properties.User
									);
								})}
							</TableBody>
						</Table>
					</TableContainer>
				</DialogContent>
				<DialogActions>
					<Button onClick={this.onClose} color="primary">
						Close
					</Button>
				</DialogActions>
			</Dialog>
		);
	}

TableContainerGenerator = ({
  pagination,
  tableTitles,
  tableItems,
  count
}) => {
  const { SMALL_SIZE, DEFAULT_SIZE } = config.tableSizes;
  const dense = useSelector(selectTableDense);

  return (
    <>
      <TableContainer component={Paper}>
        <Table size={dense ? SMALL_SIZE : DEFAULT_SIZE}>
          <TableContainerHead titles={tableTitles} />
          <TableBody id='table-body'>{tableItems}</TableBody>
        </Table>
      </TableContainer>
      {pagination && count > maxItemsPerPage && <TablePaginator />}
    </>
  );
}

OrderHistoryTable = ({ items }) => {
  const styles = useStyles();
  const { t } = useTranslation();

  return (
    <>
      <Divider variant='fullWidth' />
      <Table>
        <TableHead>
          <TableRow classes={{ root: styles.tableHeader }}>
            <TableCell style={{ width: '22%' }} className={styles.tableCell}>
              {t('common.product')}
            </TableCell>
            <TableCell style={{ width: '25%' }} className={styles.tableCell} />
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.size')}
            </TableCell>
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.price')}
            </TableCell>
            <TableCell style={{ width: '12%' }} className={styles.tableCell}>
              {t('common.quantity')}
            </TableCell>
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.total')}
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{items}</TableBody>
      </Table>
    </>
  );
}

function ContentPropertiesLayout(props) {
    const {
        classes,
        rows,
    } = props;
    return (
        <Table className={classes.table}>
            <TableBody>
                {rows.map(row => {
                    let contentPropertiesRowClassName = 'contentpropertiesrow';
                    if (typeof row.cssClassName !== 'undefined') {
                        contentPropertiesRowClassName += ' ' + row.cssClassName;
                    }
                    let displayValue = row.value;
                    if (typeof row.fullValue !== 'undefined') {
                        displayValue = (
                            <Tooltip
                                title={row.fullValue}
                                classes={{ tooltip: classes.tooltip }}
                                placement="top"
                            >
                                <span>{row.value}</span>
                            </Tooltip>
                        );
                    }
                    return (
                        <TableRow className={contentPropertiesRowClassName} key={row.label}>
                            <TableCell className="contentpropertieslabel">{row.label}</TableCell>
                            <TableCell className="contentpropertiesvalue">
                                {displayValue}
                            </TableCell>
                        </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
}

export default function OrderService() {
  const classes = useStyles();
  const serviceContext = useServiceContext();
  React.useEffect(() => {
    serviceContext.setService({ title: 'Orders' });
  }, []);
  return (
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <Typography component="h1" variant="h6" color="primary" gutterBottom>
              Orders
            </Typography>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>Date</TableCell>
                  <TableCell>Name</TableCell>
                  <TableCell>Ship To</TableCell>
                  <TableCell>Payment Method</TableCell>
                  <TableCell align="right">Sale Amount</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {orders.map(order => (
                  <OrderRow order={order} key={order.id} />
                ))}
              </TableBody>
            </Table>
          </Paper>
        </Grid>
      </Container>
    </main>
  );
}

export default function TableComponent({ data }) {
  const classes = useStyles();
  var keys = Object.keys(data[0]).map(i => i.toUpperCase());
  keys.shift(); // delete "id" key

  return (
    <Table className="mb-0">
      <TableHead>
        <TableRow>
          {keys.map(key => (
            <TableCell key={key}>{key}</TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map(({ id, name, email, product, price, date, city, status }) => (
          <TableRow key={id}>
            <TableCell className="pl-3 fw-normal">{name}</TableCell>
            <TableCell>{email}</TableCell>
            <TableCell>{product}</TableCell>
            <TableCell>{price}</TableCell>
            <TableCell>{date}</TableCell>
            <TableCell>{city}</TableCell>
            <TableCell>
              <Chip label={status} classes={{root: classes[states[status.toLowerCase()]]}}/>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

CertificateTable = ({ items }) => {
  const styles = useStyles();
  const { t } = useTranslation();

  const certificateItems = useMemo(
    () =>
      [...items]
        .sort((a, b) => new Date(b.dateStart) - new Date(a.dateStart))
        .map((item) => <CertificateItem item={item} key={item._id} />),
    [items]
  );

  const headerItems = useMemo(
    () => ROW_FIELDS.map((item) => <TableCell key={item}>{t(`certificate.${item}`)}</TableCell>),
    [ROW_FIELDS, t]
  );

  return (
    <div className={styles.root}>
      <h2 className={styles.titleWrapper}>{t('certificate.title')}</h2>
      <div className={styles.table}>
        <Table>
          <TableHead>
            <TableRow className={styles.tableHeader}>{headerItems}</TableRow>
          </TableHead>
          <TableBody>{certificateItems}</TableBody>
        </Table>
      </div>
    </div>
  );
}

export default function DataPreview() {
  const { state } = useState();
  const classes = useStyles();

  if (state.sample_dataset == null) {
    return null;
  }
  const metadata = datasetMetadata[state.sample_dataset];
  function getFormatted(label, index) {
    if (metadata.units) {
      return label + " (" + metadata.units[index] + ")";
    }
    return label;
  }

  return (
    <Grid direction="column" container className={classes.noPadding}>
      {/* Data Attributes */}
      <Grid item>
        <div className={classes.root}>
          {chipData(state).map((data, index) => {
            return (
              <li key={index}>
                <Chip label={data} color="primary" className={classes.chip} />
              </li>
            );
          })}
        </div>
      </Grid>
      {/* Table */}
      <Grid item className={classes.fullWidth}>
        <TableContainer component={Paper} className={classes.table}>
          <Table size="small" aria-label="a dense table">
            <TableHead>
              <TableRow>
                {metadata.columns.map((column, index) => (
                  <TableCell key={index}>
                    {getFormatted(
                      metadata.columnsMap
                        ? metadata.columnsMap[column]
                        : column,
                      index
                    )}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {metadata.data.slice(0, 5).map((row, index) => (
                <TableRow key={index}>
                  {metadata.columns.map((column, index) => (
                    <TableCell key={index} component="th" scope="row">
                      {row[column]}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
    </Grid>
  );
}

function TableView({
  searchResults,
  nowPlaying,
  setNowPlaying,
  queue,
  setQueue,
  setSearchTableViewMode,
}) {
  return (
    <Box
      mt={4}
      id="video-grid"
      style={{ maxWidth: "1200px", margin: "0 auto 200px auto" }}
    >
      <Box m={2}>
        <Typography>
          Search Results for <i>{searchResults.searchTerm}</i>
        </Typography>
        <IconButton
          edge="end"
          title="toggle light/dark theme"
          onClick={() => setSearchTableViewMode(false)}
          target="_blank"
        >
          <GridOnIcon />
        </IconButton>
      </Box>
      <Grid container justify="center" alignItems="center">
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell align="center">Play</TableCell>
                <TableCell align="center">Queue</TableCell>
                <TableCell>Name</TableCell>
                <TableCell>Author</TableCell>
                <TableCell>View Count</TableCell>
                <TableCell align="center">Thumbnail</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {searchResults.results.map((video) => {
                return (
                  <VideoRow
                    key={video.videoId}
                    video={video}
                    nowPlaying={nowPlaying}
                    setNowPlaying={setNowPlaying}
                    queue={queue}
                    setQueue={setQueue}
                  />
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
    </Box>
  );
}

AuditorsModal = ({ provider, onClose }) => {
  const classes = useStyles();
  const { auditors } = useAkash();

  const onWebsiteClick = (event, website) => {
    event.preventDefault();
    event.stopPropagation();

    window.electron.openUrl(website);
  };

  return (
    <Dialog maxWidth="sm" open={true} onClose={onClose} fullWidth>
      <DialogTitle>Audited Attributes</DialogTitle>
      <DialogContent dividers className={classes.content}>
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell className={classes.tableHead}>Key</TableCell>
                <TableCell className={classes.tableHead}>Value</TableCell>
                <TableCell className={classes.tableHead}>Auditors</TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {provider.attributes.map((a) => {
                return (
                  <TableRow key={a.key}>
                    <TableCell component="th" scope="row">
                      {a.key}
                    </TableCell>
                    <TableCell>{a.value}</TableCell>
                    <TableCell>
                      {a.auditedBy
                        .filter((x) => auditors.some((y) => y.address === x))
                        .map((x) => {
                          const auditor = auditors.find((y) => y.address === x);
                          return (
                            <div key={x}>
                              <Tooltip
                                classes={{ tooltip: classes.tooltip }}
                                arrow
                                interactive
                                title={
                                  <div>
                                    <LinkTo onClick={(event) => onWebsiteClick(event, auditor.website)} className={classes.websiteLink}>
                                      {auditor.website}
                                    </LinkTo>
                                    <Address address={auditor.address} isCopyable />
                                  </div>
                                }
                              >
                                <Chip label={auditor.name} size="small" className={classes.auditorChip} />
                              </Tooltip>
                            </div>
                          );
                        })}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button autoFocus variant="contained" onClick={onClose} color="primary" size="small">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

SystemStatus = ({ name, loading, error, data }) => {
    const [isExpanded, setIsExpanded] = React.useState(false);

    if (loading) {
        return (
            <Paper>
                <h2>{name}</h2>
            </Paper>
        );
    }

    if (error) {
        return (
            <Paper>
                <Box display="flex" justifyContent="space-between">
                    <div>{name}</div>
                    <div>
                        <i className="fa fa-caret-down" />
                    </div>
                </Box>
                <Collapse in={isExpanded} timeout="auto">
                    <Typography>
                        Could not get service status. This might be because the
                        service is not set up properly or that you have no
                        internet connection.
                    </Typography>
                </Collapse>
            </Paper>
        );
    }

    return (
        <Paper>
            <Box
                display="flex"
                justifyContent="space-between"
                bgcolor={data.color + '.main'}
                onClick={() => setIsExpanded(!isExpanded)}
            >
                <div>{name}</div>
                <div>
                    <i className="fa fa-caret-down" />
                </div>
            </Box>
            <Collapse in={isExpanded}>
                <Table>
                    <TableHead>
                        <tr>
                            <th width={35} />
                            <th>Subservice name</th>
                            <th>Status</th>
                            <th>Parameters</th>
                        </tr>
                    </TableHead>
                    <TableBody>
                        {data.systems.map((s, index) => (
                            <TableRow key={index}>
                                <TableCell className={'bg-' + s.color} />
                                <TableCell>{s.name}</TableCell>
                                <TableCell>{s.statusMessage}</TableCell>
                                <TableCell>
                                    {s.parameters &&
                                        Object.entries(s.parameters).map(
                                            ([key, value]) => (
                                                <div>
                                                    <strong>{key}: </strong>
                                                    {value}
                                                </div>
                                            )
                                        )}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </Collapse>
        </Paper>
    );
}

render() {
    const { name, profitLevels } = this.props;

    const standard = profitLevels.filter(pL => !pL.aged);
    const aged = profitLevels.filter(pL => pL.aged);
    const hasAged = aged.length > 0;

    return (
      <Tooltip
        title={<Table size="small" className="freshness-table">
          <TableHead>
            <TableRow>
              <TableCell colSpan={hasAged ? 4 : 2} align="center" className={`freshness ${name}`}>
                {name} Packs
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {hasAged &&
            <TableRow>
              <TableCell colSpan={2} align="center">Regular</TableCell>
              <TableCell colSpan={2} align="center">Aged</TableCell>
            </TableRow>}
            {standard.map((standardPL, i) => {
              const agedPL = aged[i];
              return (
                <TableRow key={`profit-${name}-${standardPL.name}`} className="profit-row">
                  <TableCell>
                    {standardPL.name} Profit
                  </TableCell>
                  <TableCell>
                    {percentModifier(standardPL.modifier)} {standardPL.time}
                  </TableCell>
                  {hasAged && agedPL &&
                  <>
                    <TableCell>
                      {agedPL.name} Profit
                    </TableCell>
                    <TableCell>
                      {percentModifier(agedPL.modifier)} {agedPL.time}
                    </TableCell>
                  </>}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>}
        classes={{ tooltip: 'freshness-tip-container' }}
      >
        <Typography variant="overline" className="freshness-tip">
          <span className={`blip freshness ${name}`} /> {name}
        </Typography>
      </Tooltip>
    );
  }

/**
 * 
 * @param {{container: Component, size: number, headers: string[], rows: Object[]}} props
 */
export default function BorderedTable({ container, size, headers, rows }) {
  const classes = useStyles();

  return (
    <TableContainer component={container}>
      <Table size={size}>
        {headers && (
          <TableHead>
            <TableRow>
              {headers.map((header) => {
                return (
                  <TableCell key={`table-header-cell-${header}`} className={classes.borderedCell}>
                    {header}
                  </TableCell>
                );
              })}
            </TableRow>
          </TableHead>
        )}

        <TableBody>
          {rows.map((row) => {
            return (
              <TableRow key={`table-row-${row[0]}`}>
                {row.map((col) => {
                  return (
                    <TableCell className={classes.borderedCell} key={`table-cell-${col}`}>
                      {col}
                    </TableCell>
                  );
                })}
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

SortableTable = (props) => {
  const classes = useStyles();
  const theme = useTheme();
  const squish = useMediaQuery(theme.breakpoints.down('xs'));
  const {columns, rows, defaultSortColumn} = props;

  const [orderingBy, setOrderingBy] = React.useState(defaultSortColumn);
  const [direction, setDirection] = React.useState(orderingBy.defaultDirection);

  const sortFn = (a, b) =>
      compareStable(
          a, b, orderingBy.key, columns, direction === orderingBy.defaultDirection);
  const sorted = [...rows].sort((a, b) =>
      direction === 'asc' ? sortFn(a, b) : sortFn(b, a));

  const createUpdateSort = (column) => () => {
    setOrderingBy(column);
    setDirection(
        orderingBy === column
            ? opposite(direction) : column.defaultDirection);
  };

  return (
    <Table size="small" className={squish ? classes.squishText : ''}>
      <TableHead>
        <TableRow>
          {columns.map((column) =>
            <TableCell key={column.key}>
              <TableSortLabel
                  active={orderingBy.key === column.key}
                  direction={
                    orderingBy === column ? direction : column.defaultDirection}
                  hideSortIcon={squish}
                  onClick={createUpdateSort(column)}
              >
                {squish ? column.shortLabel || column.label : column.label}
              </TableSortLabel>
            </TableCell>
          )}
        </TableRow>
      </TableHead>
      <TableBody>
        {sorted.map((row) =>
          <TableRow key={row.id}>
            {columns.map(({key, contextKey, renderShortNumber}) =>
              <TableCell key={key}>
                {render(row[key], renderShortNumber)}
                {row[contextKey] && ` (${row[contextKey]})`}
              </TableCell>
            )}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

OrderTable = ({ items, user, cartOperations, promoCode }) => {
  const { t, i18n } = useTranslation();
  const language = i18n.language === 'ua' ? 0 : 1;
  const styles = useStyles();

  const [removeOneModalVisibility, setRemoveOneModalVisibility] = useState(false);
  const [modalItem, setModalItem] = useState({});
  const { removeFromCart } = cartOperations;

  const cartItems = items.map((item) => (
    <CartItem
      key={item.id}
      item={item}
      language={language}
      user={user}
      setModalVisibility={setRemoveOneModalVisibility}
      setModalItem={setModalItem}
      cartOperations={cartOperations}
      promoCode={promoCode}
    />
  ));

  const onRemoveOneModalAction = (action) => {
    if (action) {
      removeFromCart(modalItem);
    }

    setRemoveOneModalVisibility(false);
  };

  return (
    <div className={styles.root}>
      {removeOneModalVisibility && (
        <>
          <Modal
            message={t('cart.deleteItem')}
            isOpen={removeOneModalVisibility}
            onAction={onRemoveOneModalAction}
            isCartModal
          />
        </>
      )}
      <h2 className={styles.titleWrapper}>{t('cart.titleFilled')} </h2>
      <div className={styles.table}>
        <Table>
          <TableHead>
            <TableRow
              classes={{
                root: styles.tableHeader
              }}
            >
              <TableCell>{t('cart.product')}</TableCell>
              <TableCell>{t('cart.size')}</TableCell>
              <TableCell>{t('cart.price')}</TableCell>
              <TableCell>{t('cart.quantity')}</TableCell>
              <TableCell>{t('cart.toPay')}</TableCell>
              <TableCell>{t('cart.actions')}</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>{cartItems}</TableBody>
        </Table>
      </div>
    </div>
  );
}

Positions = props => {
  return (
    <Row>
      <Col sm={{span:12}}>
        <Card>
          <CardContent>
          <Typography variant="h6" display="block" gutterBottom>
            Positions
          </Typography>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>TYPE</TableCell>
                  <TableCell>QTY</TableCell>
                  <TableCell>MARK</TableCell>
                  <TableCell>STRIKE</TableCell>
                  <TableCell>EXPIRY</TableCell>
                  <TableCell>IMP VOL</TableCell>
                  <TableCell>VEGA</TableCell>
                  <TableCell>THETA</TableCell>
                  <TableCell>DELTA</TableCell>
                  <TableCell>GAMMA</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {props.positions.map((option) => (
                  <TableRow>
                    <TableCell>
                      <Chip label={option.option_type} color={chipStyle(option.option_type)}/>
                    </TableCell>
                    <TableCell>{option.quantity}</TableCell>
                    <TableCell>{(option.bid + option.ask)/2}</TableCell>
                    <TableCell>{option.strike}</TableCell>
                    <TableCell>{expiry(option.expiration_date)}</TableCell>
                    <TableCell>{roundOne(option.greeks.smv_vol*100)}%</TableCell>
                    <TableCell>{option.greeks.vega}</TableCell>
                    <TableCell>{option.greeks.theta}</TableCell>
                    <TableCell>{option.greeks.delta}</TableCell>
                    <TableCell>{option.greeks.gamma}</TableCell>
                  </TableRow>
                ))}
                {(props.quantity && props.quantity !== 0) ? 
                  <TableRow>
                    <TableCell>
                      <Chip label={"shares"} />
                    </TableCell>
                    <TableCell>{props.quantity}</TableCell>
                    <TableCell>{(props.quote.ask + props.quote.bid)/2}</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>{props.quantity}</TableCell>
                    <TableCell>--</TableCell>
                  </TableRow>
                : ""
                }
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </Col>
    </Row>
  )
}

function Events() {
    const classes = useStyles()
    const [ Events, setEvents] = useState([]);
    const [ upcomingEvents, setUpcomingEvents ] = useState([])
    const [ isLoading, setLoading ] = useState(false)
    const URL = "https://dscbppimt-cms.herokuapp.com/files/"
    useEffect(() => {
        const today = new Date()
        const todayDate = today.toISOString()
        console.log(todayDate)
        // 2020-10-11T09:10:30.698Z
        setLoading(true);
        Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_gte=${todayDate}&_sort=Date:desc&_limit=2`).then(res => {
          console.log(res.data);
          setUpcomingEvents(res.data);
          setLoading(false)
        });
        Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_lt=${todayDate}&_sort=Date:desc`).then(res => {
            console.log(res.data);
            setEvents(res.data);
            setLoading(false)
          });
    },[])
    return (
        <Layout>
            <Box>
                <Container style={{marginBottom : '4em'}}>
                    <Typography variant="h4" style={{fontWeight : '500', margin : '1em 0px'}}>Our Events</Typography>
                    <Grid container spacing={2}>
                    {isLoading ? <Skeleton variant="rect" width="100%" height="150px"/> : upcomingEvents.length !== 0 ? upcomingEvents.map(event => (
                        <Grid item xs={12} sm={6} md={12} key={event._id}>
                        <EventCard 
                        Image={URL+(event.Image.formats.thumbnail.url)}
                        title={event.Title} 
                        speaker={event.Speaker === 'None' ? null : event.Speaker } 
                        description={event.Description} 
                        date={event.Date}
                        data={event.Image}
                        register={event.Register}
                        learn={event.Learn}
                        />
                        </Grid>
                    )) : <Container style={{width: '100%', textAlign: 'center', margin: '4em 0'}}><Typography align="center" >No Upcoming Events</Typography></Container>}
                    </Grid>
                </Container>
            </Box>
            <Container style={{padding : '2em'}}>
                <Box style={{display : 'flex', justifyContent : 'space-between'}}>
                    <Typography variant="h6">Past Events</Typography>
                </Box>
                <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="center">Event</TableCell>
            <TableCell align="center">Speaker</TableCell>
            <TableCell align="center">Date</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {Events.map((row) => (
            <TableRow key={row.Title}>
              <TableCell component="th" scope="row" align="center">{row.Title}</TableCell>
              <TableCell align="center">{row.Speaker}</TableCell>
              <TableCell align="center">{row.Date}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
            </Container>

        </Layout>
    )
}

HospitalList = () => {
  const [requests, setRequests] = useState([]);

  const getData = () => {
    fetch(`${apiUrl}/resources`)
      .then((x) => x.json())
      .then((x) => x.list.filter((a) => a.name))
      .then((x) => {
        setRequests([...x]);
      });
  };

  const [showAppModal, handleAppModal] = useState(false);
  const [requestId, setRequestId] = useState(null);

  const toggleModal = () => {
    handleAppModal(!showAppModal);
  };

  const init = useRef(false);
  useEffect(() => {
    if (!init.current) {
      getData();
      init.current = true;
    }
  }, [init]);

  return (
    <Paper elevation={2}>
      <TableFilter />
      <Table>
        <TableHead>
          <TableRow>
            {columns.map((col) => (
              <TableCell key={col.label}>{col.label}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {requests.map((data) => (
            <TableRow key={data.id}>
              <TableCell>{data.beneficiary.name}</TableCell>
              <TableCell>{data.name}</TableCell>
              <TableCell>{data.quantity}</TableCell>
              <TableCell>{data.deadline}</TableCell>
              <TableCell>
                <PersonCell person={data.contactPerson} />
              </TableCell>
              <TableCell>
                <Button
                  color="secondary"
                  variant="contained"
                  onClick={() => {
                    setRequestId(data.id);
                    toggleModal(true);
                  }}
                >
                  Apply
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <VolunteerJoin open={showAppModal} id={requestId} onClose={toggleModal} />
    </Paper>
  );
}

Home = ({
    onGoToDetails,
    loading,
    applications,
    refetchApplications,
}) => {
    const [createNew, setCreateNew] = React.useState(false);

    return (
        <Container maxWidth={false}>
            <Grid component={Box} container paddingY={2}>
                <Grid item>
                    <Breadcrumbs aria-label="breadcrumb">
                        <Link to="/">Edlib admin</Link>
                        <Link to="/settings">Settings</Link>
                        <Typography color="textPrimary">
                            External applications
                        </Typography>
                    </Breadcrumbs>
                </Grid>
            </Grid>
            <Grid container component={Box} paddingBottom={2}>
                <Grid item md={12}>
                    <Typography variant="h2">External applications</Typography>
                </Grid>
            </Grid>
            <Grid container>
                <Grid item md={12}>
                    <Paper>
                        <Box padding={2}>
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={() => setCreateNew(true)}
                            >
                                Create new
                            </Button>
                        </Box>
                        {loading && <CircularProgress />}
                        {!loading && (
                            <Table>
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Id</TableCell>
                                        <TableCell>Name</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {applications.map(({ id, name }) => (
                                        <TableRow
                                            key={id}
                                            hover
                                            onClick={() => onGoToDetails(id)}
                                        >
                                            <TableCell width={260}>
                                                {id}
                                            </TableCell>
                                            <TableCell>{name}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </Paper>
                </Grid>
            </Grid>
            <CreateExternalApplication
                isOpen={createNew}
                onClose={() => setCreateNew(false)}
                onAdded={() => {
                    setCreateNew(false);
                    refetchApplications();
                }}
            />
        </Container>
    );
}

export function UserIndex() {
  const users = useSelector(state => state.users.items);
  const loading = useSelector(state => state.users.loading);
  const dispatch = useDispatch();
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState(-1);

  useEffect(() => {
    dispatch(userActions.index());
  }, [])

  const deleteBtnClick = (userId) => {
    setSelectedUserId(userId)
    setDeleteModalOpen(true);
  }

  const deleteUser = () => {
    if(selectedUserId <= 0) return;
    dispatch(userActions.unregistByAdmin(selectedUserId));
  }

  return (
    <Container>
      <PageTitle text={"담당자 관리"} align="left" />
      <ActionDialog action={deleteUser} open={deleteModalOpen} setOpen={setDeleteModalOpen} titleText="사용자 탈퇴" actionText="삭제" cancelText="취소">
        정말 사용자를 탈퇴 시키시겠습니까?
      </ActionDialog>
      <TableContainer component={Paper}>
        <Table aria-label="custom pagination table">
          <TableHead>
            <TableRow>
              <TableCell align="center">id</TableCell>
              <TableCell align="center">Group</TableCell>
              <TableCell align="center">로그인ID</TableCell>
              <TableCell align="center">Email</TableCell>
              <TableCell align="center">권한</TableCell>
              <TableCell align="center">가입일</TableCell>
              <TableCell/>
            </TableRow>
          </TableHead>
          <TableBody>
            { loading &&
              <TableLodingProgress colSpan={6}/>
            }
            { !loading && users.length <= 0 &&
              <TableEmptyRow colSpan={6} text={`관리가 가능한 사용자가 없습니다.`}/>
            }
            { !loading && users.length > 0 && users.map( user => {
              return (
                <TableRow key={`users-index-table-row-${user.id}`}>
                  <TableCell align="center">{user.id}</TableCell>
                  <TableCell align="center">{user.group}</TableCell>
                  <TableCell align="center">{user.username}</TableCell>
                  <TableCell align="center">{user.email}</TableCell>
                  <TableCell align="center">{user.role}</TableCell>
                  <TableCell align="center">{user.createdAt}</TableCell>
                  <TableCell align="center">
                    <Button variant="outlined" size="small" color="primary" component={Link} to={{ pathname: `/users/${user.id}`, state: {user: user}}}>상세보기</Button>
                    <Button variant="outlined" size="small" color="secondary" onClick={() => deleteBtnClick(user.id)}>삭제</Button>
                  </TableCell>
                </TableRow>
              )
            })}
            
          </TableBody>
        </Table>
      </TableContainer>
      <Box mt={4} alignItems="center" flexWrap="wrap" style={{textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center"}}>
        <Pagination count={100}  showFirstButton showLastButton variant="outlined" shape="rounded" size="large" page={Number(1)}/>
      </Box>
      <Grid container direction="column" justify="flex-end" alignItems="flex-end">
        <Grid item>
          <Button variant="outlined" color="primary" component={Link} to='/users/new'>
            신규 담당자 추가
          </Button>
        </Grid>
      </Grid>
    </Container>
  )
}

ApplicationPage = () => {
  const classes = useStyles();
  const [handlePageChange,
    handleChangeRowsPerPage,
    pagination, paginateData] = usePaginateHandlers(applications);
  return (
    <>
      <Box mb={2}>
        <Typography variant="h4">Applications</Typography>
      </Box>
      <Box>
        <Paper elevation={2}>
          <Table>
            <TableHead>
              <TableRow>
                {columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
              </TableRow>
            </TableHead>
            <TableBody>
              {paginateData.map((x) => (
                <TableRow key={x.id}>
                  <TableCell>
                    {x.requestId}
                  </TableCell>
                  <TableCell>{x.firstName}</TableCell>
                  <TableCell>{x.lastName}</TableCell>
                  <TableCell>{x.phone}</TableCell>
                  <TableCell>{x.help}</TableCell>
                  <TableCell>
                    {x.status
                      ? (
                        <Select
                          value={x.status}
                          classes={{ root: classes[x.status], select: classes[x.status] }}
                        >
                          <MenuItem value="on_hold">On hold</MenuItem>
                          <MenuItem value="in_progress">In progress</MenuItem>
                          <MenuItem value="receieved">Received</MenuItem>
                          <MenuItem value="closed">Closed</MenuItem>
                        </Select>
                      ) : 'Pending'}
                  </TableCell>
                  <TableCell align="right">
                    {!x.approved && (
                    <>
                      <IconButton color="primary">
                        <Icon>check</Icon>
                      </IconButton>
                      <IconButton color="secondary">
                        <Icon>clear</Icon>
                      </IconButton>
                    </>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  count={applications.length}
                  onChangePage={handlePageChange}
                  page={pagination.page}
                  rowsPerPage={pagination.limit}
                  onChangeRowsPerPage={handleChangeRowsPerPage}
                />
              </TableRow>
            </TableFooter>
          </Table>
        </Paper>
      </Box>
    </>
  );
}

export function CertificateListModal({ onClose, revokeCertificate }) {
  const classes = useStyles();
  const { validCertificates, localCert, selectedCertificate } = useCertificate();

  return (
    <Dialog open={true} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>Certificates</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell align="center">Selected</TableCell>
                <TableCell align="center">Local cert</TableCell>
                <TableCell align="center">Issued on</TableCell>
                <TableCell align="center">Expires</TableCell>
                <TableCell align="center">Serial</TableCell>
                <TableCell align="center"></TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {validCertificates.map((cert) => (
                <TableRow key={cert.serial}>
                  <TableCell align="center">{cert.serial === selectedCertificate?.serial && <CheckIcon color="primary" />}</TableCell>
                  <TableCell align="center">{cert.parsed === localCert?.certPem && <CheckIcon color="primary" />}</TableCell>

                  <TableCell align="center">
                    <FormattedDate value={cert.pem.issuedOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                  </TableCell>
                  <TableCell align="center">
                    <FormattedDate value={cert.pem.expiresOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                  </TableCell>
                  <TableCell align="center">{cert.serial}</TableCell>
                  <TableCell align="center">
                    <Button onClick={() => revokeCertificate(cert)} color="secondary" size="small">
                      Revoke
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function ViewTransactions(props) {
  const classes = useStyles();
  const [ account ] = useState(props.location.query.account);
  const [ txnAddress ] = useState(props.location.query.address);
  const [ web3 ] = useState(props.location.query.web3);
  const [ details, setDetails ] = useState({});
  const [ loading, isLoading ] = useState(true);

  async function getTxnData() {
    const transaction = new web3.eth.Contract(Transactions.abi, txnAddress);
    let txns = await transaction.methods.getAllTransactions().call({ from: account });
    const txnsList = txns.map(data => {
      return (
        <TableRow key={data[ 0 ]} className={classes.tableBodyRow}>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "75px" }}>{data[ 0 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "50px" }}>{data[ 1 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "50px" }}>{data[ 2 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "75px" }}>{data[ 3 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "10px" }}>{data[ 4 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "10px" }}>{data[ 5 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "40px" }}>{new Date(data[ 6 ] * 1000).toString()}</TableCell>
        </TableRow>
      )
    });
    setDetails(txnsList);
    isLoading(false);
  }

  if (loading) {
    getTxnData();
    return (
      <Loader></Loader>
    );
  } else {
    return (
      <Card>
        <CardHeader color="danger">
          <h4 className={classes.cardTitleWhite}>Transactions List</h4>
          <p className={classes.cardCategoryWhite}>
            View all transactions for this Medicine
          </p>
        </CardHeader>
        <CardBody>
          <div className={classes.tableResponsive}>
            <Table className={classes.table}>
              <TableHead className={classes[ "dangerTableHeader" ]}>
                <TableRow className={classes.tableHeadRow}>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "75px" }}>TxnHash</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "50px" }} >From</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "50px" }} >To</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "75px" }} >Previous TxnHash</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "10px" }} >Lat</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "10px" }} >Lng</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "40px" }} >Timestamp</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {details}
              </TableBody>
            </Table>
          </div>
        </CardBody>
      </Card>
    );
  }
}

export default function VlaParticipants(props) {
  const pathName = useLocation().pathname;
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "VLA | Participants";
  }, []);
  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);

  const [participants, setParticipants] = useState(undefined);
  const [redirect, setRedirect] = useState(false);
  useEffect(() => {
    import(`../../json/${pathName.slice(1, pathName.length)}.json`)
      .then((data) => setParticipants(data.data))
      .catch(() => setRedirect(true));
  }, []);

  const classes = createStyles();
  var ctr = 0;
  return (
    <div className="page-container">
      <Navbar src="vla_navbar.json" homeRoute="/vla" />
      <Grid container className="container">
        <Grid item xs={false} sm={1} />
        <Grid item xs={12} sm={10}>
          {redirect ? (
            <Redirect to="/404" />
          ) : (
            <>
              {participants && (
                <TableContainer
                  component={Paper}
                  className={classes.table}
                  gutterBottom
                >
                  <Table>
                    <TableHead>
                      <TableRow>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          S. No.
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          Name
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          Designation
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          Institute
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          State
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {participants.map((participant) => {
                        ctr++;
                        return (
                          <TableRow className={classes.tableRow}>
                            <TableCell className={classes.tableCell}>
                              {ctr}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.name}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.designation}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.institute}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.state}
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </TableContainer>
              )}
            </>
          )}
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}

FilledWishlist = ({ items }) => {
  const { userData } = useSelector(({ User }) => ({
    userData: User.userData
  }));
  const [modalVisibility, setModalVisibility] = useState(false);
  const [modalItem, setModalItem] = useState({});
  const [wishlist, setWishlist] = useState(items || []);
  const [similarProductsList, setSimilarProductsList] = useState([]);
  const { cartOperations, isInCart } = useCart(userData);

  const { t, i18n } = useTranslation();
  const dispatch = useDispatch();

  const [isLightTheme] = useContext(ThemeContext);

  const language = i18n.language === 'ua' ? 0 : 1;
  const styles = useStyles(isLightTheme);

  const { wishlist: updatedWishlist, wishlistOperations } = useWishlist();
  const { removeFromWishlist } = wishlistOperations;

  useEffect(() => {
    updatedWishlist && setWishlist([...updatedWishlist].reverse());
  }, [updatedWishlist]);

  useEffect(() => {
    setSimilarProductsList(
      items.map((item) => ({
        productId: item._id
      }))
    );
  }, [items]);

  if (!wishlist.length) return <EmptyWishlist />;

  const onModalAction = (action) => {
    setModalVisibility(false);
    if (action) {
      removeFromWishlist(modalItem);
      dispatch(setToastMessage(t('product.toastMessage.removedFromWishList')));
      dispatch(setToastSettings(TOAST_SETTINGS));
    }
  };

  return (
    <>
      <div className={styles.root}>
        <div className={styles.title}>{t('wishlist.wishlistTitles.filled')}</div>
        <div className={styles.table}>
          <Table>
            <TableHead>
              <TableRow classes={{ root: styles.tableHeader }}>
                <TableCell>{t('wishlist.wishlistTableFields.item')}</TableCell>
                <TableCell>{t('wishlist.wishlistTableFields.price')}</TableCell>
                <TableCell />
              </TableRow>
            </TableHead>
            <TableBody>
              {wishlist.map((item, i) => (
                <WishlistItem
                  key={i}
                  item={item}
                  setModalVisibility={() => {
                    setModalVisibility(!modalVisibility);
                  }}
                  cartOperations={cartOperations}
                  isInCart={isInCart}
                  setModalItem={setModalItem}
                />
              ))}
            </TableBody>
          </Table>
        </div>
        {modalVisibility && (
          <div>
            <Modal
              itemName={t(`${modalItem.translationsKey}.name`)}
              message={t('modal.modalDeleteFromWishlistMessage')}
              isOpen={modalVisibility}
              onAction={onModalAction}
              language={language}
            />
          </div>
        )}
      </div>
      <SimilarProducts cartList={similarProductsList} />
    </>
  );
}

export default function GenderData() {
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "Gender wise data";
  }, []);

  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);

  const [genderData, setGenderData] = useState(undefined);
  useEffect(() => {
    import("../../json/genderdata.json").then((data) => {
      setGenderData(data);
    });
  }, []);

  const classes = createStyles();
  return (
    <div className="page-container">
      <Navbar />
      <Grid container className={classes.container}>
        <Grid item xs={false} sm={1} />
        <Grid item xs={12} sm={10}>
          <Typography
            variant="h2"
            component="h2"
            gutterBottom
            className={classes.themeText}
          >
            <Box component="span" fontWeight={380}>
              Gender wise Data
            </Box>
          </Typography>
          <TableContainer component={Paper}>
            <Table>
              <TableHead className={classes.tableHead}>
                <TableRow>
                  <TableCell className={classes.th} align="center">
                    Name of IIIT
                  </TableCell>
                  <TableCell className={classes.th} colspan="4" align="center">
                    Enrolment in Tertiary Education
                  </TableCell>
                  <TableCell className={classes.th} colspan="4" align="center">
                    Professional and Technical Workers
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell rowspan="4" className={classes.td} align="center">
                    IIIT TIRUCHIRAPPALLI
                  </TableCell>
                  <TableCell colspan="4" className={classes.td} align="center">
                    B.Tech.
                  </TableCell>
                  <TableCell colspan="4" className={classes.td} align="center">
                    Faculty
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell colspan="2" className={classes.td} align="center">
                    CSE
                  </TableCell>
                  <TableCell colspan="2" className={classes.td} align="center">
                    ECE
                  </TableCell>
                  <TableCell colspan="2" className={classes.td} align="center">
                    Regular
                  </TableCell>
                  <TableCell colspan="2" className={classes.td} align="center">
                    Temporary
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className={classes.td}>Boys</TableCell>
                  <TableCell className={classes.td}>Girls</TableCell>
                  <TableCell className={classes.td}>Boys</TableCell>
                  <TableCell className={classes.td}>Girls</TableCell>
                  <TableCell className={classes.td}>Male</TableCell>
                  <TableCell className={classes.td}>Female</TableCell>
                  <TableCell className={classes.td}>Male</TableCell>
                  <TableCell className={classes.td}>Female</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.cse.boys : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.cse.girls : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.ece.boys : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.ece.girls : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.regular.male
                      : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.regular.female
                      : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.temporary.male
                      : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.temporary.female
                      : "Loading..."}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}

UsersTable = props => {
  const { className, users, ...rest } = props;

  const classes = useStyles();

  const [selectedUsers, setSelectedUsers] = useState([]);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [page, setPage] = useState(0);

  const handleSelectAll = event => {
    const { users } = props;

    let selectedUsers;

    if (event.target.checked) {
      selectedUsers = users.map(user => user.id);
    } else {
      selectedUsers = [];
    }

    setSelectedUsers(selectedUsers);
  };

  const handleSelectOne = (event, id) => {
    const selectedIndex = selectedUsers.indexOf(id);
    let newSelectedUsers = [];

    if (selectedIndex === -1) {
      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
    } else if (selectedIndex === 0) {
      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
    } else if (selectedIndex === selectedUsers.length - 1) {
      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelectedUsers = newSelectedUsers.concat(
        selectedUsers.slice(0, selectedIndex),
        selectedUsers.slice(selectedIndex + 1)
      );
    }

    setSelectedUsers(newSelectedUsers);
  };

  const handlePageChange = (event, page) => {
    setPage(page);
  };

  const handleRowsPerPageChange = event => {
    setRowsPerPage(event.target.value);
  };

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <CardContent className={classes.content}>
        <PerfectScrollbar>
          <div className={classes.inner}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell padding="checkbox">
                    <Checkbox
                      checked={selectedUsers.length === users.length}
                      color="primary"
                      indeterminate={
                        selectedUsers.length > 0 &&
                        selectedUsers.length < users.length
                      }
                      onChange={handleSelectAll}
                    />
                  </TableCell>
                  <TableCell>Name</TableCell>
                  <TableCell>Email</TableCell>
                  <TableCell>Location</TableCell>
                  <TableCell>Phone</TableCell>
                  <TableCell>Registration date</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {users.slice(0, rowsPerPage).map(user => (
                  <TableRow
                    className={classes.tableRow}
                    hover
                    key={user.id}
                    selected={selectedUsers.indexOf(user.id) !== -1}
                  >
                    <TableCell padding="checkbox">
                      <Checkbox
                        checked={selectedUsers.indexOf(user.id) !== -1}
                        color="primary"
                        onChange={event => handleSelectOne(event, user.id)}
                        value="true"
                      />
                    </TableCell>
                    <TableCell>
                      <div className={classes.nameContainer}>
                        <Avatar
                          className={classes.avatar}
                          src={user.avatarUrl}
                        >
                          {getInitials(user.name)}
                        </Avatar>
                        <Typography variant="body1">{user.name}</Typography>
                      </div>
                    </TableCell>
                    <TableCell>{user.email}</TableCell>
                    <TableCell>
                      {user.address.city}, {user.address.state},{' '}
                      {user.address.country}
                    </TableCell>
                    <TableCell>{user.phone}</TableCell>
                    <TableCell>
                      {moment(user.createdAt).format('DD/MM/YYYY')}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </PerfectScrollbar>
      </CardContent>
      <CardActions className={classes.actions}>
        <TablePagination
          component="div"
          count={users.length}
          onChangePage={handlePageChange}
          onChangeRowsPerPage={handleRowsPerPageChange}
          page={page}
          rowsPerPage={rowsPerPage}
          rowsPerPageOptions={[5, 10, 25]}
        />
      </CardActions>
    </Card>
  );
}

export default function VlaWorkshops() {
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "VLA | Workshops";
  }, []);
  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);
  const [workshops, setWorkshops] = useState(undefined);
  useEffect(() => {
    import("../../json/vlaworkshops.json").then((data) =>
      setWorkshops(data.data)
    );
  }, []);

  const classes = createStyles();
  var ctr = 0;
  return (
    <div className="page-container">
      <Navbar src="vla_navbar.json" homeRoute="/vla" />
      <Grid container className={classes.container}>
        <Grid item xs={false} sm={1} />
        <Grid item xs={12} sm={10}>
          <Typography
            variant="h2"
            component="h2"
            gutterBottom
            className={classes.themeText}
          >
            <Box component="span" fontWeight={380}>
              Workshops Planned and Completed
            </Box>
          </Typography>
          {workshops && (
            <TableContainer
              component={Paper}
              className={classes.table}
              gutterBottom
            >
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      S. No.
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Name of the Programme
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Co-ordinator(s) Name
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Start Date
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      End Date
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      No. Of Participants
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Videos
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Brochure
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Summary & Feedback
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {workshops.map((workshop) => {
                    ctr++;
                    return (
                      <TableRow className={classes.tableRow}>
                        <TableCell className={classes.tableCell}>
                          {ctr}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.programmeName}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.name}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.startDate}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.endDate}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.participantsLink.trim() && (
                            <Link
                              to={{
                                pathname: workshop.participantsLink.trim(),
                              }}
                              className={classes.link}
                            >
                              {workshop.participants}
                            </Link>
                          )}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.videos.trim() && (
                            <Link
                              to={{ pathname: workshop.videos }}
                              className={classes.link}
                            >
                              Videos
                            </Link>
                          )}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.brochure.trim() && (
                            <a
                              href={`../../docs/vla/${workshop.brochure}`}
                              className={classes.link}
                              download={workshop.brochure}
                            >
                              Brochure
                            </a>
                          )}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.summary.trim() && (
                            <Link
                              to={{ pathname: workshop.summary }}
                              className={classes.link}
                            >
                              Summary & Feedback
                            </Link>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}