Merge pull request 'Link quickstart into README' (#229) from Qubasa-Qubasa-main into main

README.md

@@ -5,4 +5,5 @@ In here are all the packages we use, all the nixosModules we use/expose, the CLI
 
 ## cLAN config tool
 
-Find the docs [here](/clan/clan-core/src/branch/main/docs/clan-config.md)
+- The quickstart guide can be found here: [here](/clan/clan-core/src/branch/main/docs/quickstart.md)
+- Find the docs [here](/clan/clan-core/src/branch/main/docs/clan-config.md)

pkgs/ui/src/components/sidebar/index.tsx

@@ -1,4 +1,5 @@
 import {
+  Alert,
   Divider,
   Icon,
   IconButton,
@@ -7,6 +8,7 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Snackbar,
 } from "@mui/material";
 import Image from "next/image";
 import { ReactNode, useState } from "react";
@@ -21,11 +23,13 @@ import Link from "next/link";
 import { tw } from "@/utils/tailwind";
 
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import React from "react";
 
 type MenuEntry = {
   icon: ReactNode;
   label: string;
   to: string;
+  missing: boolean;
 } & {
   subMenuEntries?: MenuEntry[];
 };
@@ -35,31 +39,37 @@ const menuEntries: MenuEntry[] = [
     icon: <DashboardIcon />,
     label: "Dashoard",
     to: "/",
+    missing: false,
   },
   {
     icon: <DevicesIcon />,
     label: "Machines",
     to: "/machines",
+    missing: false,
   },
   {
     icon: <AppsIcon />,
     label: "Applications",
     to: "/applications",
+    missing: true,
   },
   {
     icon: <LanIcon />,
     label: "Network",
     to: "/network",
+    missing: true,
   },
   {
     icon: <DesignServicesIcon />,
     label: "Templates",
     to: "/templates",
+    missing: false,
   },
   {
     icon: <BackupIcon />,
     label: "Backups",
     to: "/backups",
+    missing: true,
   },
 ];
 
@@ -72,6 +82,23 @@ interface SidebarProps {
 }
 export function Sidebar(props: SidebarProps) {
   const { show, onClose } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string,
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   return (
     <aside
       className={tw`${
@@ -110,7 +137,10 @@ export function Sidebar(props: SidebarProps) {
                 <ListItemButton
                   className="justify-center lg:justify-normal"
                   LinkComponent={Link}
-                  href={menuEntry.to}
+                  href={menuEntry.missing ? "" : menuEntry.to}
+                  onClickCapture={
+                    menuEntry.missing ? () => handleClick() : undefined
+                  }
                 >
                   <ListItemIcon
                     color="inherit"
@@ -131,6 +161,11 @@ export function Sidebar(props: SidebarProps) {
           })}
         </List>
 
+        <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
+          <Alert onClose={handleClose} severity="error" sx={{ width: "100%" }}>
+            Site does not exist yet
+          </Alert>
+        </Snackbar>
         <Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
         <div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block">
           <h3 className="mb-2 w-full font-semibold text-white">

pkgs/ui/src/components/table/nodeRow.tsx

@@ -12,54 +12,56 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 
 import Grid2 from "@mui/material/Unstable_Grid2"; // Grid version 2
-import { Collapse } from "@mui/material";
+import { Collapse, useMediaQuery, useTheme } from "@mui/material";
 
 import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
 
+function renderStatus(status: NodeStatusKeys) {
+  switch (status) {
+    case NodeStatus.Online:
+      return (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <CircleIcon color="success" style={{ fontSize: 15 }} />
+          <Typography component="div" align="left" variant="body1">
+            Online
+          </Typography>
+        </Stack>
+      );
+
+    case NodeStatus.Offline:
+      return (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <CircleIcon color="error" style={{ fontSize: 15 }} />
+          <Typography component="div" align="left" variant="body1">
+            Offline
+          </Typography>
+        </Stack>
+      );
+    case NodeStatus.Pending:
+      return (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <CircleIcon color="warning" style={{ fontSize: 15 }} />
+          <Typography component="div" align="left" variant="body1">
+            Pending
+          </Typography>
+        </Stack>
+      );
+  }
+}
 export function NodeRow(props: {
   row: TableData;
   selected: string | undefined;
   setSelected: (a: string | undefined) => void;
 }) {
-  function renderStatus(status: NodeStatusKeys) {
-    switch (status) {
-      case NodeStatus.Online:
-        return (
-          <Stack direction="row" alignItems="center" gap={1}>
-            <CircleIcon color="success" style={{ fontSize: 15 }} />
-            <Typography component="div" align="left" variant="body1">
-              Online
-            </Typography>
-          </Stack>
-        );
-
-      case NodeStatus.Offline:
-        return (
-          <Stack direction="row" alignItems="center" gap={1}>
-            <CircleIcon color="error" style={{ fontSize: 15 }} />
-            <Typography component="div" align="left" variant="body1">
-              Offline
-            </Typography>
-          </Stack>
-        );
-      case NodeStatus.Pending:
-        return (
-          <Stack direction="row" alignItems="center" gap={1}>
-            <CircleIcon color="warning" style={{ fontSize: 15 }} />
-            <Typography component="div" align="left" variant="body1">
-              Pending
-            </Typography>
-          </Stack>
-        );
-    }
-  }
+  const theme = useTheme();
+  const is_phone = useMediaQuery(theme.breakpoints.down("md"));
 
   const { row, selected, setSelected } = props;
   const [open, setOpen] = React.useState(false);
   //const labelId = `enhanced-table-checkbox-${index}`;
 
   // Speed optimization. We compare string pointers here instead of the string content.
-  const isSelected = selected == row.id;
+  const isSelected = selected == row.name;
 
   const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
     if (isSelected) {
@@ -93,20 +95,12 @@ export function NodeRow(props: {
         <TableCell
           component="th"
           scope="row"
-          onClick={(event) => handleClick(event, row.id)}
+          onClick={(event) => handleClick(event, row.name)}
         >
           <Stack>
             <Typography component="div" align="left" variant="body1">
               {row.name}
             </Typography>
-            <Typography
-              color="grey"
-              component="div"
-              align="left"
-              variant="body2"
-            >
-              {row.id}
-            </Typography>
           </Stack>
         </TableCell>
         <TableCell
@@ -120,7 +114,8 @@ export function NodeRow(props: {
           onClick={(event) => handleClick(event, row.name)}
         >
           <Typography component="div" align="left" variant="body1">
-            {row.last_seen} days ago
+            {String(row.last_seen).padStart(3, "0")}{" "}
+            {is_phone ? "days" : "days ago"}
           </Typography>
         </TableCell>
       </TableRow>

pkgs/ui/src/components/table/nodeTableContainer.tsx

@@ -14,6 +14,8 @@ import { NodeRow } from "./nodeRow";
 
 import { TableData } from "@/data/nodeData";
 
+import { useMediaQuery, useTheme } from "@mui/material";
+
 interface HeadCell {
   disablePadding: boolean;
   id: keyof TableData;
@@ -146,6 +148,9 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
   const [order, setOrder] = React.useState<NodeOrder>("asc");
   const [orderBy, setOrderBy] = React.useState<keyof TableData>("status");
 
+  const theme = useTheme();
+  const is_phone = useMediaQuery(theme.breakpoints.down("sm"));
+
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - tableData.length) : 0;
@@ -169,11 +174,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
   );
   return (
     <TableContainer>
-      <Table
-        sx={{ minWidth: 750 }}
-        aria-labelledby="tableTitle"
-        size={dense ? "small" : "medium"}
-      >
+      <Table aria-labelledby="tableTitle" size={dense ? "small" : "medium"}>
         <EnhancedTableHead
           order={order}
           orderBy={orderBy}
@@ -184,7 +185,7 @@ export function NodeTableContainer(props: NodeTableContainerProps) {
           {visibleRows.map((row, index) => {
             return (
               <NodeRow
-                key={row.id}
+                key={row.name}
                 row={row}
                 selected={selected}
                 setSelected={setSelected}

pkgs/ui/src/components/table/searchBar.tsx

@@ -7,6 +7,10 @@ import {
   useEffect,
   useRef,
   useMemo,
+  ClassAttributes,
+  JSX,
+  Key,
+  LiHTMLAttributes,
 } from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
@@ -31,14 +35,19 @@ export function SearchBar(props: SearchBarProps) {
   let { tableData, setFilteredList } = props;
   const [search, setSearch] = useState<string>("");
   const debouncedSearch = useDebounce(search, 250);
+  const [open, setOpen] = useState(false);
 
   // Define a function to handle the Esc key press
   function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) {
     if (event.key === "Escape") {
-      console.log("Escape key pressed");
       setSearch("");
       setFilteredList(tableData);
     }
+
+    // check if the key is Enter
+    if (event.key === "Enter") {
+      setOpen(false);
+    }
   }
 
   useEffect(() => {
@@ -50,11 +59,12 @@ export function SearchBar(props: SearchBarProps) {
     }
   }, [debouncedSearch, tableData, setFilteredList]);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value === "") {
+  const handleInputChange = (event: any, value: string) => {
+    if (value === "") {
       setFilteredList(tableData);
     }
-    setSearch(e.target.value);
+
+    setSearch(value);
   };
 
   const suggestions = useMemo(
@@ -65,16 +75,24 @@ export function SearchBar(props: SearchBarProps) {
   return (
     <Autocomplete
       freeSolo
+      autoComplete
       options={suggestions}
+      renderOption={(props: any, option: any) => {
+        return (
+          <li {...props} key={option}>
+            {option}
+          </li>
+        );
+      }}
       onKeyDown={handleEsc}
-      onChange={(event, value) => {
-        // do something with the selected value
-        if (value === null) {
-          setSearch("");
-          setFilteredList(tableData);
-        } else {
-          setSearch(value);
-        }
+      onInputChange={handleInputChange}
+      value={search}
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
       }}
       renderInput={(params) => (
         <TextField
@@ -82,26 +100,18 @@ export function SearchBar(props: SearchBarProps) {
           fullWidth
           label="Search"
           variant="outlined"
-          value={search}
-          onChange={handleInputChange}
           autoComplete="nickname"
           InputProps={{
             ...params.InputProps,
-            // endAdornment: (
-            //   <InputAdornment position="end">
-            //     <IconButton>
-            //       <SearchIcon />
-            //     </IconButton>
-            //   </InputAdornment>
-            // ),
+            startAdornment: (
+              <InputAdornment position="start">
+                <IconButton>
+                  <SearchIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
           }}
-        >
-          {/* {suggestions.map((item, index) => (
-                <option key={index} onClick={() => handleSelect(item)}>
-                  {item}
-                </option>
-              ))} */}
-        </TextField>
+        ></TextField>
       )}
     />
   );

pkgs/ui/src/data/nodeData.tsx

@@ -1,6 +1,5 @@
 export interface TableData {
   name: string;
-  id: string;
   status: NodeStatusKeys;
   last_seen: number;
 }
@@ -15,7 +14,6 @@ export type NodeStatusKeys = (typeof NodeStatus)[keyof typeof NodeStatus];
 
 function createData(
   name: string,
-  id: string,
   status: NodeStatusKeys,
   last_seen: number,
 ): TableData {
@@ -25,7 +23,6 @@ function createData(
 
   return {
     name,
-    id,
     status,
     last_seen: last_seen,
   };
@@ -97,69 +94,69 @@ function getRandomLastSeen(status: NodeStatusKeys): number {
 export const tableData = [
   createData(
     "Matchbox",
-    "42:0:f21:6916:e333:c47e:4b5c:e74c",
+
     NodeStatus.Pending,
     0,
   ),
   createData(
     "Ahorn",
-    "42:0:3c46:b51c:b34d:b7e1:3b02:8d24",
+
     NodeStatus.Online,
     0,
   ),
   createData(
     "Yellow",
-    "42:0:3c46:98ac:9c80:4f25:50e3:1d8f",
+
     NodeStatus.Offline,
     16.0,
   ),
   createData(
     "Rauter",
-    "42:0:61ea:b777:61ea:803:f885:3523",
+
     NodeStatus.Offline,
     6.0,
   ),
   createData(
     "Porree",
-    "42:0:e644:4499:d034:895e:34c8:6f9a",
+
     NodeStatus.Offline,
     13,
   ),
   createData(
     "Helsinki",
-    "42:0:3c46:fd4a:acf9:e971:6036:8047",
+
     NodeStatus.Online,
     0,
   ),
   createData(
     "Kelle",
-    "42:0:3c46:362d:a9aa:4996:c78e:839a",
+
     NodeStatus.Online,
     0,
   ),
   createData(
     "Shodan",
-    "42:0:3c46:6745:adf4:a844:26c4:bf91",
+
     NodeStatus.Online,
     0.0,
   ),
   createData(
     "Qubasa",
-    "42:0:3c46:123e:bbea:3529:db39:6764",
+
     NodeStatus.Offline,
     7.0,
   ),
   createData(
     "Green",
-    "42:0:a46e:5af:632c:d2fe:a71d:cde0",
+
     NodeStatus.Offline,
     2,
   ),
-  createData("Gum", "42:0:e644:238d:3e46:c884:6ec5:16c", NodeStatus.Offline, 0),
-  createData("Xu", "42:0:ca48:c2c2:19fb:a0e9:95b9:794f", NodeStatus.Online, 0),
+  createData("Gum", NodeStatus.Offline, 0),
+  createData("Xu", NodeStatus.Online, 0),
   createData(
     "Zaatar",
-    "42:0:3c46:156e:10b6:3bd6:6e82:b2cd",
+
     NodeStatus.Online,
     0,
   ),
@@ -171,12 +168,11 @@ export function executeCreateData(): TableData[] {
   for (let i = 0; i < 100; i++) {
     // Generate dummy data
     let name = getRandomName();
-    let id = getRandomId();
     let status = getRandomStatus();
     let last_seen = getRandomLastSeen(status);
 
     // Call the createData function and push the result to the array
-    result.push(createData(name, id, status, last_seen));
+    result.push(createData(name, status, last_seen));
   }
   return result;
 }

pkgs/ui/src/data/nodeDataStatic.tsx

@@ -1,601 +1,601 @@
 export const tableData = [
   {
     name: "Wendy200",
-    id: "b960:e38b:3d05:84b9:6e26:612c:7dcf:0b7f",
+
     status: "Pending",
     last_seen: 115,
   },
   {
     name: "Charlie201",
-    id: "fa6a:c368:f557:7a8f:965d:fa00:4769:d552",
+
     status: "Pending",
     last_seen: 320,
   },
   {
     name: "Bob202",
-    id: "4736:bd8b:fb91:bb46:1665:f461:0cc4:6e70",
+
     status: "Offline",
     last_seen: 347,
   },
   {
     name: "Sybil203",
-    id: "2d95:93ea:3107:5804:0de4:3642:7bdc:e657",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Trent204",
-    id: "93ae:1ca8:cf9a:e13f:a58b:086c:adca:b4cb",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Eve205",
-    id: "98b6:0ee0:5989:c11c:6f54:6aec:b1ec:2b22",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Alice206",
-    id: "2d95:afac:1a09:544a:16db:2956:2c0f:643a",
+
     status: "Offline",
     last_seen: 256,
   },
   {
     name: "Frank207",
-    id: "d48a:19f8:f7c3:12d0:6057:9206:b8bd:6c4b",
+
     status: "Offline",
     last_seen: 248,
   },
   {
     name: "Eve208",
-    id: "6cdf:5787:7e5f:cb0a:9930:6707:57bc:8be4",
+
     status: "Pending",
     last_seen: 234,
   },
   {
     name: "Bob209",
-    id: "9510:a6ff:7440:4319:26e8:85ed:0960:ee39",
+
     status: "Pending",
     last_seen: 178,
   },
   {
     name: "Peggy210",
-    id: "60d9:c015:74d6:6b98:5a3a:0473:bacb:4b2a",
+
     status: "Offline",
     last_seen: 256,
   },
   {
     name: "Heidi211",
-    id: "c21d:af34:2da7:c8c1:3159:4513:7d35:779c",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Charlie212",
-    id: "32b1:3abd:21f5:31f6:58c8:aad0:5c42:04e3",
+
     status: "Pending",
     last_seen: 15,
   },
   {
     name: "Victor213",
-    id: "b4df:4f69:fa76:4226:bd3b:4eb5:4c8d:a844",
+
     status: "Pending",
     last_seen: 171,
   },
   {
     name: "Heidi214",
-    id: "2cec:e107:3c20:1720:e193:b895:d04d:3207",
+
     status: "Pending",
     last_seen: 287,
   },
   {
     name: "Walter215",
-    id: "431d:44fd:a77d:03c2:e4c5:37e4:d890:45f7",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Alice216",
-    id: "4869:c55e:ffc2:a964:83cd:ec96:0be1:1094",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Zoe217",
-    id: "c394:621c:ab5b:d6d3:e1f5:5fc8:824f:2782",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Judy218",
-    id: "d4a0:2299:f649:a161:47fd:c17a:e95c:54f8",
+
     status: "Pending",
     last_seen: 184,
   },
   {
     name: "Mallory219",
-    id: "97e1:ca9e:37f8:8cde:aa37:cd10:69e2:05e4",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Judy220",
-    id: "7f7a:e2fa:5b79:6984:3059:85a3:ecc3:32d0",
+
     status: "Offline",
     last_seen: 63,
   },
   {
     name: "Wendy221",
-    id: "149a:9daa:7f75:cf20:fc02:9405:adad:5c26",
+
     status: "Offline",
     last_seen: 181,
   },
   {
     name: "Bob222",
-    id: "761e:8560:b6ad:046b:ebb1:6958:1981:d5a7",
+
     status: "Offline",
     last_seen: 300,
   },
   {
     name: "Eve223",
-    id: "e9ed:def1:e050:856c:5c33:ecc9:f6d7:b9ff",
+
     status: "Pending",
     last_seen: 60,
   },
   {
     name: "Judy224",
-    id: "c5d5:92a0:7fea:0c55:9d77:b8fb:ee3e:59d9",
+
     status: "Pending",
     last_seen: 218,
   },
   {
     name: "Peggy225",
-    id: "71c4:c342:3708:dda8:f09e:4855:c191:676e",
+
     status: "Offline",
     last_seen: 140,
   },
   {
     name: "Frank226",
-    id: "0338:8c78:272f:2f2c:3ddd:187d:a3dd:878b",
+
     status: "Offline",
     last_seen: 106,
   },
   {
     name: "Ivan227",
-    id: "e67c:c18d:f98e:d441:733d:4904:b54f:6fc1",
+
     status: "Offline",
     last_seen: 296,
   },
   {
     name: "Charlie228",
-    id: "d6d7:de33:1b48:2a4a:ad49:7c8d:b585:67ea",
+
     status: "Pending",
     last_seen: 81,
   },
   {
     name: "Victor229",
-    id: "2cba:bfb7:11d0:9d09:e025:3a3d:1cc7:59cb",
+
     status: "Pending",
     last_seen: 46,
   },
   {
     name: "Mallory230",
-    id: "878d:b63e:57b0:576c:7bd6:e4e4:b01a:714d",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Wendy231",
-    id: "ec44:61cb:0c8f:1226:298b:d562:3bf6:afbe",
+
     status: "Offline",
     last_seen: 205,
   },
   {
     name: "David232",
-    id: "ed4d:bac1:32c3:c0f0:70e0:7584:acb8:e420",
+
     status: "Pending",
     last_seen: 11,
   },
   {
     name: "Eve233",
-    id: "25b4:2f0d:7d28:dcd4:415c:bd1e:a701:91fd",
+
     status: "Offline",
     last_seen: 346,
   },
   {
     name: "David234",
-    id: "051a:96d5:743a:5574:d365:6a8a:c972:109c",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Ivan235",
-    id: "fec5:bb6c:d958:f982:808b:da80:0fe8:3f26",
+
     status: "Pending",
     last_seen: 291,
   },
   {
     name: "Mallory236",
-    id: "8d35:ba4f:c762:b11c:b668:ddc0:d936:9192",
+
     status: "Offline",
     last_seen: 321,
   },
   {
     name: "David237",
-    id: "0488:19ac:b107:32bc:38bd:6ebf:9a60:ba58",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Victor238",
-    id: "0d54:af9b:3792:77cd:1215:975f:6bf2:4e2d",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Judy239",
-    id: "fe9e:a71b:8899:b4c4:eb0e:1ff1:2f1f:17fc",
+
     status: "Offline",
     last_seen: 3,
   },
   {
     name: "Trent240",
-    id: "930b:331e:6241:d8ce:7bea:f5de:6e85:86c4",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Ivan241",
-    id: "26b9:10d1:8530:cf9a:4e04:1400:216d:e68d",
+
     status: "Pending",
     last_seen: 38,
   },
   {
     name: "Mallory242",
-    id: "bef3:c520:fdcf:131c:b1b1:7fcc:5113:2d37",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Charlie243",
-    id: "ae2d:6d80:c8df:3570:9bc0:d104:3dba:1340",
+
     status: "Offline",
     last_seen: 288,
   },
   {
     name: "Ivan244",
-    id: "8b0b:b94a:3e5b:66fa:a2f2:38b9:0422:c827",
+
     status: "Offline",
     last_seen: 225,
   },
   {
     name: "Zoe245",
-    id: "f18f:f596:694f:423a:afdf:0f1d:a94a:b36d",
+
     status: "Pending",
     last_seen: 56,
   },
   {
     name: "Trent246",
-    id: "b54a:2d8e:eb76:db56:3712:3d2c:6b23:8c0d",
+
     status: "Pending",
     last_seen: 111,
   },
   {
     name: "Sybil247",
-    id: "bc71:ac78:ded0:c384:eeef:eda2:b0a0:7dbe",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Wendy248",
-    id: "38de:8eef:c380:ff31:a49f:10b9:7678:dc29",
+
     status: "Offline",
     last_seen: 299,
   },
   {
     name: "David249",
-    id: "455a:18d9:0322:a575:6cbc:7fe1:1c6a:783a",
+
     status: "Pending",
     last_seen: 303,
   },
   {
     name: "Trent250",
-    id: "8d44:1910:2685:9783:4027:977e:a859:6f48",
+
     status: "Offline",
     last_seen: 69,
   },
   {
     name: "Eve251",
-    id: "b5cd:3aeb:3e35:91b9:0ba3:7dac:e090:62f6",
+
     status: "Pending",
     last_seen: 354,
   },
   {
     name: "Oscar252",
-    id: "3c62:cb7c:9a79:c2f6:03d2:99e6:60e3:4d84",
+
     status: "Offline",
     last_seen: 54,
   },
   {
     name: "Sybil253",
-    id: "e106:63c1:1dfb:2b92:9731:590c:96ce:a9df",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Zoe254",
-    id: "adae:66b1:b204:1d42:55b4:4ea0:230d:9c49",
+
     status: "Offline",
     last_seen: 118,
   },
   {
     name: "Bob255",
-    id: "4f40:fce2:feb2:e28f:598a:71b0:3030:9d7b",
+
     status: "Pending",
     last_seen: 112,
   },
   {
     name: "Alice256",
-    id: "33a9:11e3:5653:1441:21a4:c1e0:a0ae:274a",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Eve257",
-    id: "f05f:8604:fd65:dcbe:12b7:8f9d:b0e1:5a44",
+
     status: "Pending",
     last_seen: 97,
   },
   {
     name: "Peggy258",
-    id: "1474:39f6:5543:3698:a191:44dc:3d42:8a5f",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Ivan259",
-    id: "0ddc:afa7:b0c4:9a90:41c3:958c:6eb6:7974",
+
     status: "Pending",
     last_seen: 99,
   },
   {
     name: "Victor260",
-    id: "a09f:4a1e:8e47:0c0a:c4a4:ce7e:5d87:9657",
+
     status: "Offline",
     last_seen: 231,
   },
   {
     name: "Grace261",
-    id: "be97:8f9d:79f9:ffe9:5cfd:8359:61d6:77fd",
+
     status: "Offline",
     last_seen: 199,
   },
   {
     name: "Heidi262",
-    id: "793e:ea68:046b:7fcb:fdc8:8d0b:6771:f268",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Sybil263",
-    id: "4ba1:82c3:a574:f48c:0d4e:0bb5:dfef:21e0",
+
     status: "Pending",
     last_seen: 89,
   },
   {
     name: "Alice264",
-    id: "4301:64b5:7f80:ed14:67fb:c062:8720:8c98",
+
     status: "Pending",
     last_seen: 354,
   },
   {
     name: "Zoe265",
-    id: "3bf5:1907:d39a:d752:6146:5a93:51f1:5766",
+
     status: "Pending",
     last_seen: 12,
   },
   {
     name: "Victor266",
-    id: "208d:9605:56a5:b55d:d0e9:9ae2:2a43:3031",
+
     status: "Pending",
     last_seen: 24,
   },
   {
     name: "Ivan267",
-    id: "042e:115a:2455:3a0f:f6d2:6d11:36ae:b9f8",
+
     status: "Pending",
     last_seen: 238,
   },
   {
     name: "Peggy268",
-    id: "86cf:d5f1:0aa0:66dd:0287:2203:3abc:61f5",
+
     status: "Offline",
     last_seen: 113,
   },
   {
     name: "Oscar269",
-    id: "f79e:88ef:060b:4f70:6e2b:122d:d4fb:80cc",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Alice270",
-    id: "d280:b667:8dd6:29f5:7eaa:ae38:8651:2664",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Eve271",
-    id: "607b:707a:07d1:1fe6:7af9:2988:29ab:6650",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Mallory272",
-    id: "c140:5d2d:5066:09cf:908c:35a8:8824:485d",
+
     status: "Pending",
     last_seen: 180,
   },
   {
     name: "David273",
-    id: "34c6:6199:e4f6:5900:3429:730e:12b2:67dd",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Eve274",
-    id: "68d7:9503:12af:3352:c8a7:a6be:8f92:95cb",
+
     status: "Pending",
     last_seen: 164,
   },
   {
     name: "Walter275",
-    id: "723a:000b:dd46:5d88:0dbe:24df:991b:4660",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Eve276",
-    id: "c1bb:015e:e52f:8299:10bb:37a3:ed55:92d2",
+
     status: "Offline",
     last_seen: 123,
   },
   {
     name: "Wendy277",
-    id: "3b91:c220:5253:9c8e:b5bc:f125:71df:314a",
+
     status: "Offline",
     last_seen: 211,
   },
   {
     name: "Charlie278",
-    id: "1b8e:9c86:2075:63cf:6486:53e1:126b:30df",
+
     status: "Pending",
     last_seen: 178,
   },
   {
     name: "Eve279",
-    id: "61c3:1746:2159:033c:f361:dcaf:146c:db82",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Zoe280",
-    id: "f48e:98c2:b4d5:5763:881b:4f3b:ee00:144c",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Mallory281",
-    id: "038b:569d:0c14:e7d2:c887:2c18:5387:e625",
+
     status: "Pending",
     last_seen: 143,
   },
   {
     name: "Bob282",
-    id: "f7c3:e367:18db:7860:4ab7:1810:cdf9:00c6",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Judy283",
-    id: "fd6a:b87a:4069:ae0a:2b9c:93cc:a96f:70bf",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Grace284",
-    id: "b467:9c99:69a7:5cf3:7ff3:ee12:56c5:2391",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Zoe285",
-    id: "f6e6:3f2b:bbf1:6f49:19ac:19a4:23b1:c34a",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Grace286",
-    id: "a157:a7c4:269d:fe98:1b51:d62c:0651:9fc7",
+
     status: "Pending",
     last_seen: 92,
   },
   {
     name: "Walter287",
-    id: "cc2b:67a0:aabe:68ca:d16b:31c9:9421:d6da",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Walter288",
-    id: "ddf8:10e8:fb3c:a474:0344:a97a:cc41:15ce",
+
     status: "Pending",
     last_seen: 248,
   },
   {
     name: "David289",
-    id: "a310:d30e:a4e9:b41b:6901:cf56:4da7:7909",
+
     status: "Pending",
     last_seen: 301,
   },
   {
     name: "Peggy290",
-    id: "ce03:fb42:fa64:7543:faa9:2975:8caa:0ae6",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Sybil291",
-    id: "34c5:9736:0f1d:da41:7c34:6443:07b8:31a5",
+
     status: "Pending",
     last_seen: 114,
   },
   {
     name: "Heidi292",
-    id: "c5a0:8e3d:5935:9adc:458c:ca81:468f:4295",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "David293",
-    id: "7a5d:2399:9083:cad8:669f:fbc4:8c79:6183",
+
     status: "Offline",
     last_seen: 165,
   },
   {
     name: "Judy294",
-    id: "7775:9779:7222:7c6f:1d9c:44e2:1269:661a",
+
     status: "Pending",
     last_seen: 52,
   },
   {
     name: "Trent295",
-    id: "2a1f:f4ff:a9ac:2ade:fc6e:d291:b66d:3a03",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Heidi296",
-    id: "7b50:7d90:e833:2f4a:4f24:ac9e:8165:68b4",
+
     status: "Pending",
     last_seen: 129,
   },
   {
     name: "Trent297",
-    id: "5932:1221:12d7:5a62:c218:2f47:9447:5117",
+
     status: "Pending",
     last_seen: 108,
   },
   {
     name: "David298",
-    id: "9d2e:54e6:f504:3b5e:b9d1:ab90:b9e0:3db5",
+
     status: "Online",
     last_seen: 0,
   },
   {
     name: "Sybil299",
-    id: "07c2:1588:8d1d:fadf:aa9b:e1e3:e21f:ee0e",
+
     status: "Online",
     last_seen: 0,
   },