@material-ui/core#TableHead 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>
        )
    }

TableContainerHead = ({ titles }) => {
  const styles = useStyles();
  const { actionLabel } = tableHeadRowTitles;

  const headRow = titles.map((title) => (
    <TableCell
      variant='head'
      data-cy={title}
      key={title}
      className={title === actionLabel ? styles.actionCell : ''}
    >
      {title}
    </TableCell>
  ));

  return (
    <TableHead className={styles.tableHead}>
      <TableRow>{headRow}</TableRow>
    </TableHead>
  );
}

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>
    </>
  );
}

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 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>
  );
}

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 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>
  );
}

Table = ({ filters, patterns, minMaxPattern, quantiles, expanded }) => {
  const { t } = useTranslation();
  const classes = useStyles();
  const { weekDays } = useWeekDays();

  return useMemo(
    () => (
      <Box
        bgcolor="bkgs.table"
        borderRadius={8}
        display="flex"
        flexDirection="column"
        mt={2}
        overflow="hidden"
      >
        <TableContainer className={classes.container}>
          <MaterialTable size="small" padding="none" stickyHeader>
            <TableHead>
              <TableRow>
                <TableCell></TableCell>
                <TableCell align="center">{t("Pattern")}</TableCell>
                <TableCell align="center">{t("Chance")}</TableCell>
                {weekDays.map((day) => (
                  <TableCell key={day} align="center" colSpan={2}>
                    {day}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              <DataRows
                patterns={patterns}
                minMaxPattern={minMaxPattern}
                quantiles={quantiles}
                filters={filters}
                expanded={expanded}
              />
            </TableBody>
          </MaterialTable>
        </TableContainer>
      </Box>
    ),
    [
      classes.container,
      expanded,
      filters,
      minMaxPattern,
      patterns,
      quantiles,
      t,
      weekDays,
    ]
  );
}

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>
    </>
  );
}

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>
    )
}

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>
  );
}

export default function UserListHead({
  order,
  orderBy,
  rowCount,
  headLabel,
  numSelected,
  onRequestSort,
  onSelectAllClick
}) {
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        <TableCell padding="checkbox">
          <Checkbox
            indeterminate={numSelected > 0 && numSelected < rowCount}
            checked={rowCount > 0 && numSelected === rowCount}
            onChange={onSelectAllClick}
          />
        </TableCell>
        {headLabel.map((headCell) => (
          <TableCell
            key={headCell.id}
            align={headCell.alignRight ? 'right' : 'left'}
            sortDirection={orderBy === headCell.id ? order : false}
          >
            <TableSortLabel
              hideSortIcon
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : 'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <Box sx={{ ...visuallyHidden }}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </Box>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

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>
  );
}

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>
    );
}

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>
  );
}

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>
    );
  }

render() {
    const { classes } = this.props;
    const { rowsPerPage, page, rows } = this.state;
    let { patientRecords } = this.props.general;
    if (patientRecords == null) {

    } else {
      if (rows.length === 0) {
        for (let i = 0; i < patientRecords.length; i++) {
          rows.unshift(
            createData(
              patientRecords[i].doctor,
              patientRecords[i].diaryRecord,
              patientRecords[i].date
            )
          )
        }
      }
    }

    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);


    return (
      <div>
        <Paper className={classes.root}>
          <div className={classes.tableWrapper}>
            <Table className={classes.table}>
              <TableHead>
                <TableRow className={classes.tableHead}>
                  <TableCell className={classes.tableHead} align="left">Doctor</TableCell>
                  <TableCell className={classes.tableHead} align="left">Appointment Notes</TableCell>
                  <TableCell className={classes.tableHead} align="left">Date</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {this.state.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => <TableRow key={row.id}>
                  <TableCell
                    className={`${classes.tableData} ${classes.tableLeft}`}
                    align="left">{row.doctor}</TableCell>
                  <TableCell
                    className={classes.tableData}
                    align="left">{row.diaryRecord}</TableCell>
                  <TableCell
                    className={classes.tableData}
                    align="left">{row.date}</TableCell>
                </TableRow>)}
                {emptyRows > 0 && <TableRow style={{ height: 48 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>}
              </TableBody>
              <TableFooter>
                <TableRow>
                  <TablePagination rowsPerPageOptions={[5, 10, 25]} colSpan={3} count={rows.length} rowsPerPage={rowsPerPage} page={page} SelectProps={{
                    native: true
                  }} onChangePage={this.handleChangePage} onChangeRowsPerPage={this.handleChangeRowsPerPage} ActionsComponent={TablePaginationActionsWrapped} />
                </TableRow>
              </TableFooter>
            </Table>
          </div>
        </Paper>
      </div>
    )
  }

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>
  );
}

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>
  )
}

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>
    );
  }
}

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>
  );
}

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>
  );
}

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>
  )
}

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

  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);
  const [bwc, setBwc] = useState(undefined);
  const [bwcMeeting, setBwcMeeting] = useState(undefined);
  useEffect(() => {
    import("../../json/bwc.json").then((data) => {
      setBwc(data.data);
    });
    import("../../json/bwcMeeting.json").then((data) =>
      setBwcMeeting(data.data)
    );
  }, []);

  const classes = createStyles();
  var ctr = 0;
  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}>
              BWC
            </Box>
          </Typography>
          <Typography
            variant="subtitle1"
            gutterBottom
            className={classes.title}
          >
            <Box component="h3" gutterBottom className={classes.themeText}>
              Members of BwC
            </Box>
          </Typography>
          {bwc && (
            <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}`}
                    >
                      BWC
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {bwc.map((gov) => {
                    ctr++;
                    return (
                      <TableRow className={classes.tableRow}>
                        <TableCell className={classes.tableCell}>
                          {ctr}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {gov.name}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {gov.designation}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {gov.bwc}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
          <Typography className={classes.themeText}>
            <Box
              component="h3"
              fontWeight="fontWeightBold"
              className={classes.title}
            >
              BwC Meeting Minutes
            </Box>
          </Typography>
          {bwcMeeting &&
            bwcMeeting.map((meet) => {
              return (
                <section>
                  <a
                    href={require(`../../docs/${meet.path}`)}
                    download={meet.title}
                    className={classes.link}
                  >
                    <Typography
                      className={`${classes.link} ${classes.themeText}`}
                      gutterBottom
                    >
                      <img
                        src={require("../../images/news-icon.svg")}
                        className={classes.download}
                      />
                      <Box component="span" className={classes.meetingTitle}>
                        {meet.title}
                      </Box>
                    </Typography>
                  </a>
                  <Typography gutterBottom className={classes.meetingText}>
                    {meet.description}
                  </Typography>
                </section>
              );
            })}
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}

render() {

        const newMails = this.state.emails.filter(email => email.isNew === 'true');
        let title = 'Disposable Email';
        if (newMails.length > 0) {
            title = '(' + newMails.length + ') Disposable Email';
        } 

        return (
          <Grid container spacing={3}>   

          <Helmet>  
            <title>{title}</title>
          </Helmet>   

          <AppBar position="static">  
            <Toolbar>
                <Typography style={{flex: 1,}}>
                 Disposable address: <b>{this.state.address}</b>
                </Typography>

                <Tooltip title="Refresh list">
                <IconButton  color="inherit" onClick={this.reloadList.bind(this)}>
                    <RefreshIcon />
                </IconButton>
                </Tooltip>

                <Tooltip  title="Logout">
                <IconButton color="inherit" onClick={this.logout.bind(this)}>
                    <ExitToAppIcon />
                </IconButton>
                </Tooltip>
            </Toolbar>
          </AppBar>  
          
            <Grid item xs={6}> 
            
            <Paper elevation={3}>
            <div style={{ overflow: 'auto', height: '100vh' }}> 
            <TableContainer>  
            
            <Table stickyHeader size="small">
            <TableHead>
                <TableRow>
                    <TableCell>#</TableCell>
                    <TableCell>From</TableCell>
                    <TableCell>Subject</TableCell>
                    <TableCell>Date</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
            {this.state.emails.map((email, i) =>  
                (
                <TableRow 
                    hover 
                    selected={email.messageId === this.state.selectedId} 
                    key={email.messageId} 
                    onClick={event => this.handleClick(event, email.messageId)}
                >
                    <TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{i+1}</TableCell>
                    <TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{this.senderName(email.commonHeaders.from)}</TableCell>
                    <TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{email.commonHeaders.subject}</TableCell>
                    <TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{email.commonHeaders.date}</TableCell>
                    
                </TableRow>
                ) 
            )}
            {this.state.emails.length === 0 ? 
                    <TableRow>
                        <TableCell colSpan="4">
                            <Typography variant="body1">No mails here</Typography>
                        </TableCell>
                    </TableRow> : null}
            </TableBody>
            </Table>   
              
            </TableContainer> 
            </div>          
            </Paper>
            </Grid>
            <Grid item xs={6}> 
                <EmailViewer address={this.state.address} messageId={this.state.selectedId} sessionid={this.state.sessionid} apiEndpoint={this.props.apiEndpoint}/> 
            </Grid>
          </Grid>
          
          )
    }

export default function AdmissionContact() {
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "BoG";
  }, []);

  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);
  const [bog, setBog] = useState(undefined);
  const [bogMeeting, setBogMeeting] = useState(undefined);
  useEffect(() => {
    import("../../json/bog.json").then((data) => {
      setBog(data.data);
    });
    import("../../json/bogMeeting.json").then((data) =>
      setBogMeeting(data.data)
    );
  }, []);

  const classes = createStyles();
  var ctr = 0;
  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}>
              Board of Governors (BoG)
            </Box>
          </Typography>
          <Typography
            variant="subtitle1"
            gutterBottom
            className={classes.title}
          >
            <Box component="h3" gutterBottom className={classes.themeText}>
              Members of Board of Governors (BoG)
            </Box>
          </Typography>
          {bog && (
            <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>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {bog.map((gov) => {
                    ctr++;
                    return (
                      <TableRow className={classes.tableRow}>
                        <TableCell className={classes.tableCell}>
                          {ctr}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {gov.name}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {gov.designation}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
          <Typography className={classes.themeText}>
            <Box
              component="h3"
              fontWeight="fontWeightBold"
              className={classes.title}
            >
              BoG Meeting
            </Box>
          </Typography>
          {bogMeeting &&
            bogMeeting.map((meet) => {
              return (
                <section>
                  <a
                    href={require(`../../docs/${meet.path}`)}
                    download={meet.title}
                    className={classes.link}
                  >
                    <Typography
                      className={`${classes.link} ${classes.themeText}`}
                      gutterBottom
                    >
                      <img
                        src={require("../../images/news-icon.svg")}
                        className={classes.download}
                      />
                      <Box component="span" className={classes.meetingTitle}>
                        {meet.title}
                      </Box>
                    </Typography>
                  </a>
                  <Typography gutterBottom>{meet.description}</Typography>
                </section>
              );
            })}
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}

export default function ListUrls(props) {
    const classes = useStyles();

    const [page, setPage] = React.useState(0);
    const [rowsPerPage, setRowsPerPage] = React.useState(10);

    const handleChangePage = (event, newPage) => {
        setPage(newPage);
    };

    const handleChangeRowsPerPage = (event) => {
        setRowsPerPage(+event.target.value);
        setPage(0);
    };

    return (
        <Container className={classes.cardGrid} maxWidth="md">
            <Paper className={classes.root}>
                <TableContainer className={classes.container}>
                    <Table stickyHeader aria-label="sticky table">
                        <TableHead>
                            <TableRow>
                                <TableCell key="curl" align="left" style={{ minWidth: "100px" }}>
                                    Short URL
                                </TableCell>
                                <TableCell key="lurl" align="left" style={{ minWidth: "100px" }}>
                                    Long URL
                                </TableCell>
                                <TableCell key="action" align="right" style={{ minWidth: "100px" }}>
                                    Action
                                </TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {props.shortUrls.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((card) => {
                                return (
                                    <TableRow hover role="checkbox" tabIndex={-1} key={card.id}>
                                        <TableCell key="curl" align="left" style={{ minWidth: "100px" }}>
                                            <Button
                                                startIcon={
                                                    <FileCopyOutlinedIcon />
                                                }
                                                onClick={() => { navigator.clipboard.writeText(window.location.hostname + "/" + card.data.curl) }}
                                                classes={{
                                                    label: classes.label
                                                }}
                                                >{card.data.curl}</Button>
                                        </TableCell>
                                        <TableCell key="lurl" align="left" style={{ minWidth: "100px" }}>
                                            <Box bgcolor="text.primary" color="background.paper" p={2} style={{ overflowX: 'auto', overflowY: 'hidden', whiteSpace: "nowrap" }}>
                                                {card.data.lurl}
                                            </Box>
                                        </TableCell>
                                        <TableCell key="action" align="right" style={{ minWidth: "100px" }}>
                                            <ButtonGroup variant="outlined" color="default">
                                                <Button size="small" color="primary" href={card.data.lurl} target="_blank">
                                                    <VisibilityIcon />
                                                </Button>
                                                <Button size="small" onClick={() => props.handleEditShortUrl(card.data.curl)}>
                                                    <EditIcon />
                                                </Button>
                                                <Button size="small" color="secondary" onClick={() => props.handleDeleteShortUrl(card.data.curl)}>
                                                    <DeleteForeverIcon />
                                                </Button>
                                            </ButtonGroup>
                                        </TableCell>
                                    </TableRow>
                                );
                            })}
                        </TableBody>
                    </Table>
                </TableContainer>
                <TablePagination
                    rowsPerPageOptions={[10, 25, 100]}
                    component="div"
                    count={props.shortUrls.length}
                    rowsPerPage={rowsPerPage}
                    page={page}
                    onChangePage={handleChangePage}
                    onChangeRowsPerPage={handleChangeRowsPerPage}
                />
            </Paper>
        </Container>
    );
}

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 ExpiryTable() {
  // list of near expiry products got from API
  const [expiryList, setExpiryList] = useState([]);
  // true when waiting for an response from API
  const [isLoading, setIsLoading] = useState(false);
  // pagination
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [count, setCount] = useState(0);

  const history = useHistory();

  const handleChangePage = async (event, newPage) => {
    try {
      setIsLoading(true);
      setPage(newPage);
      const response = await getEndPoint(
        `/api/explist/?limit=${rowsPerPage}&offset=${newPage * rowsPerPage}`,
        null,
        history
      );
      const { data } = response;
      setCount(data.count);
      console.log(data);
      const list = data.results.map(val => ({
        name: val.Product,
        quantity: val['No. of items'],
        daysLeft: val['Days left'],
      }));
      setExpiryList(list);
      setIsLoading(false);
    } catch (e) {
      console.log(e);
    }
  };

  const handleChangeRowsPerPage = async event => {
    try {
      setIsLoading(true);
      setPage(0);
      setRowsPerPage(+event.target.value);
      const response = await getEndPoint(
        `/api/explist/?limit=${+event.target.value}&offset=0`,
        null,
        history
      );
      const { data } = response;
      setCount(data.count);
      console.log(data);
      const list = data.results.map(val => ({
        name: val.Product,
        quantity: val['No. of items'],
        daysLeft: val['Days left'],
      }));
      setExpiryList(list);
      setIsLoading(false);
    } catch (e) {
      console.log(e);
    }
  };

  const apiFetch = async () => {
    try {
      setIsLoading(true);
      const response = await getEndPoint(
        '/api/explist/?limit=10&offset=0',
        null,
        history
      );
      const { data } = response;
      setCount(data.count);
      console.log(data);
      const list = data.results.map(val => ({
        name: val.Product,
        quantity: val['No. of items'],
        daysLeft: val['Days left'],
      }));
      setExpiryList(list);
      setIsLoading(false);
    } catch (e) {
      console.log(e);
    }
  };

  // call API on component load
  useEffect(() => {
    apiFetch();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const classes = useStyles();

  return (
    <>
      {isLoading ? <Spinner /> : null}
      <Paper className={classes.paper}>
        <TableContainer className={classes.tableContainer}>
          <Table className={classes.table} aria-label='simple table'>
            <TableHead>
              <TableRow>
                <TableCell>Product</TableCell>
                <TableCell align='right'>Items</TableCell>
                <TableCell align='right'>Days Left</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {expiryList.map(row => (
                <TableRow key={row.name} hover>
                  <TableCell>{row.name}</TableCell>
                  <TableCell align='right'>{row.quantity}</TableCell>
                  <TableCell align='right'>{row.daysLeft}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        <TablePagination
          rowsPerPageOptions={[5, 10]}
          component='div'
          count={count}
          page={page}
          rowsPerPage={rowsPerPage}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      </Paper>
    </>
  );
}