Implementing a user overview

The idea of the User List page is that users of a tenant get an overview of all the users in the system for that specific company/tenant. This allows each user to see who is in the system, who is available (free or out of office), and who has what role in the company (e.g., manager, engineer, designer).

So, let’s create a user list with mocked users. In the navigation bar (Nav.js), we link to the /users route, so create the app/users/page.js file. Then, in that file, we first add a variable with mocked user data:

const users = [
  {
    name: "Alice Ling",
    job: "Software Engineer",
    isAvailable: false,
  },
  // ... add as much users as you want
];
export default function UserList() {
  return <div>We have {users.length} users</div>;
}

Next, we replace the returned value with a user list table, as follows...