feat: add search and filter network members

About #45

frontend/src/components/NetworkMembers/NetworkMembers.jsx

@@ -3,8 +3,10 @@ import {
   AccordionDetails,
   AccordionSummary,
   Checkbox,
+  Divider,
   Grid,
   IconButton,
+  TextField,
   Typography,
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -24,6 +26,9 @@ import MemberSettings from "./components/MemberSettings";
 function NetworkMembers({ network }) {
   const { nwid } = useParams();
   const [members, setMembers] = useState([]);
+  const [filter, setFilter] = useState("");
+  const [filterActive, setFilterActive] = useState(false);
+  const [filterInactive, setFilterInactive] = useState(false);
 
   const fetchData = useCallback(async () => {
     try {
@@ -169,12 +174,45 @@ function NetworkMembers({ network }) {
           <IconButton color="primary" onClick={fetchData}>
             <RefreshIcon />
           </IconButton>
+          <Grid container>
+            <Grid item sm={6}>
+              <Typography>Search (Addr/Name)</Typography>
+              <TextField
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+              />
+            </Grid>
+            <Grid item sm="auto">
+              <Typography>Display Filter</Typography>
+              <Checkbox
+                checked={filterActive}
+                color="primary"
+                onChange={(e) => setFilterActive(e.target.checked)}
+              />
+              <span>Active</span>
+              <Checkbox
+                checked={filterInactive}
+                color="primary"
+                onChange={(e) => setFilterInactive(e.target.checked)}
+              />
+              <span>Inactive</span>
+            </Grid>
+            <Divider />
+          </Grid>
           <Grid container>
             {members.length ? (
               <DataTable
                 noHeader={true}
                 columns={columns}
-                data={[...members]}
+                data={[...members]
+                  .filter((x) => {
+                    return (
+                      (x.name.includes(filter) || x.id.includes(filter)) &&
+                      (filterActive ? x.online === 1 : true) &&
+                      (filterInactive ? x.online === 0 : true)
+                    )
+                  })
+                }
               />
             ) : (
               <Grid