import { Helmet } from 'react-helmet-async'; import { filter } from 'lodash'; import { sentenceCase } from 'change-case'; import { useState } from 'react'; // @mui import { Card, Table, Stack, Paper, Avatar, Button, Popover, Checkbox, TableRow, MenuItem, TableBody, TableCell, Container, Typography, IconButton, TableContainer, TablePagination, } from '@mui/material'; // components import Label from '../components/label'; import Iconify from '../components/iconify'; import Scrollbar from '../components/scrollbar'; // sections import { UserListHead, UserListToolbar } from '../sections/@dashboard/user'; // mock import USERLIST from '../_mock/user'; // ---------------------------------------------------------------------- const TABLE_HEAD = [ { id: 'name', label: 'Name', alignRight: false }, { id: 'company', label: 'Company', alignRight: false }, { id: 'role', label: 'Role', alignRight: false }, { id: 'isVerified', label: 'Verified', alignRight: false }, { id: 'status', label: 'Status', alignRight: false }, { id: '' }, ]; // ---------------------------------------------------------------------- function descendingComparator(a, b, orderBy) { if (b[orderBy] < a[orderBy]) { return -1; } if (b[orderBy] > a[orderBy]) { return 1; } return 0; } function getComparator(order, orderBy) { return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy); } function applySortFilter(array, comparator, query) { const stabilizedThis = array.map((el, index) => [el, index]); stabilizedThis.sort((a, b) => { const order = comparator(a[0], b[0]); if (order !== 0) return order; return a[1] - b[1]; }); if (query) { return filter(array, (_user) => _user.name.toLowerCase().indexOf(query.toLowerCase()) !== -1); } return stabilizedThis.map((el) => el[0]); } export default function UserPage() { const [open, setOpen] = useState(null); const [page, setPage] = useState(0); const [order, setOrder] = useState('asc'); const [selected, setSelected] = useState([]); const [orderBy, setOrderBy] = useState('name'); const [filterName, setFilterName] = useState(''); const [rowsPerPage, setRowsPerPage] = useState(5); const handleOpenMenu = (event) => { setOpen(event.currentTarget); }; const handleCloseMenu = () => { setOpen(null); }; const handleRequestSort = (event, property) => { const isAsc = orderBy === property && order === 'asc'; setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; const handleSelectAllClick = (event) => { if (event.target.checked) { const newSelecteds = USERLIST.map((n) => n.name); setSelected(newSelecteds); return; } setSelected([]); }; const handleClick = (event, name) => { const selectedIndex = selected.indexOf(name); let newSelected = []; if (selectedIndex === -1) { newSelected = newSelected.concat(selected, name); } else if (selectedIndex === 0) { newSelected = newSelected.concat(selected.slice(1)); } else if (selectedIndex === selected.length - 1) { newSelected = newSelected.concat(selected.slice(0, -1)); } else if (selectedIndex > 0) { newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1)); } setSelected(newSelected); }; const handleChangePage = (event, newPage) => { setPage(newPage); }; const handleChangeRowsPerPage = (event) => { setPage(0); setRowsPerPage(parseInt(event.target.value, 10)); }; const handleFilterByName = (event) => { setPage(0); setFilterName(event.target.value); }; const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - USERLIST.length) : 0; const filteredUsers = applySortFilter(USERLIST, getComparator(order, orderBy), filterName); const isNotFound = !filteredUsers.length && !!filterName; return ( <> User | Minimal UI User {filteredUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => { const { id, name, role, status, company, avatarUrl, isVerified } = row; const selectedUser = selected.indexOf(name) !== -1; return ( handleClick(event, name)} /> {name} {company} {role} {isVerified ? 'Yes' : 'No'} ); })} {emptyRows > 0 && ( )} {isNotFound && ( Not found No results found for   "{filterName}".
Try checking for typos or using complete words.
)}
Edit Delete ); }