Skip to contentVibraUI
6 pagesopens at /people

People

The people team's desk: the directory, roles, invitations, the leaderboard and who is out this month.

Preview
/people

Install

The whole dashboard — every page under one sidebar, the sample data they read — is one command. Or take a page at a time: each one brings the sidebar with it.

npx shadcn@latest add @vibra/people
  • /peoplePeople dashboard
    npx shadcn@latest add @vibra/people-overview
  • /people/directoryTeam directory
    npx shadcn@latest add @vibra/people-directory
  • /people/rolesPermissions matrix
    npx shadcn@latest add @vibra/people-roles
  • /people/invitationsPending invitations
    npx shadcn@latest add @vibra/people-invitations
  • /people/leaderboardLeaderboard
    npx shadcn@latest add @vibra/people-leaderboard
  • /people/leaveLeave
    npx shadcn@latest add @vibra/people-leave

Widgets

Single cards cut from these pages, each installed on its own.

  • The People headline card
    npx shadcn@latest add @vibra/widget-people-overview-people-stats
    From People dashboard

    People headline

    Headcount against the start of the quarter, this week's attendance against last week's, the leave requests waiting and the average KPI; reads peopleStats().

  • The Headcount by type card
    npx shadcn@latest add @vibra/widget-people-overview-headcount-by-type
    From People dashboard

    Headcount by type

    Full-time against contract headcount as two tinted tiles, each with how it has moved since last quarter; reads headcountByType().

  • The Attendance this week card
    npx shadcn@latest add @vibra/widget-people-overview-attendance-chart
    From People dashboard

    Attendance this week

    Monday to Friday stacked as on time, late and absent, with the week's rate against last week's and how many arrived late; reads attendanceWeek().

  • The Work calendar card
    npx shadcn@latest add @vibra/widget-people-overview-work-calendar
    From People dashboard

    Work calendar

    The month with a count on every day that has something on it, and the picked day's meetings, deadlines, releases and time off; reads calendarEvents().

  • The Employees card
    npx shadcn@latest add @vibra/widget-people-overview-employees-table
    From People dashboard

    Employees

    Everyone on the payroll — searchable, filterable by department, sortable and paged — with the rows the filters leave exported as CSV; reads employeeRows().

  • The Leave requests card
    npx shadcn@latest add @vibra/widget-people-overview-leave-queue
    From People dashboard

    Leave requests

    The requests waiting on a decision, each approved or declined through the server where it stands, a refusal said above the queue; reads leaveQueue().

  • The Departments card
    npx shadcn@latest add @vibra/widget-people-overview-departments
    From People dashboard

    Departments

    Headcount by department as one segmented bar, then a tile a department with its count and its share, in the bar's own colours; reads departments().

  • The Arrivals card
    npx shadcn@latest add @vibra/widget-people-overview-arrivals
    From People dashboard

    Arrivals

    When people clock in, as an hour-by-weekday grid, darker where more of them arrive; reads arrivals().

  • The Team figures card
    npx shadcn@latest add @vibra/widget-people-directory-team-summary
    From Team directory

    Team figures

    The people in the workspace and how many of them are active, the seats offered and not yet taken, and the seats the plan includes; reads summary().

  • The Leave figures card
    npx shadcn@latest add @vibra/widget-people-leave-leave-stats
    From Leave

    Leave figures

    What is waiting on a decision, who is out today, the working days of approved leave this month and how the decided requests went; reads leaveRows().

  • The Who is out this month card
    npx shadcn@latest add @vibra/widget-people-leave-month-strip
    From Leave

    Who is out this month

    The month as one strip of days, each with how many are out on approved leave and how many more have asked, the picked day's names listed under it; reads leaveRows().

Reads from db

Every figure on these pages is read from these repositories of the sample store. Swap one for your own API and each page that reads it follows.

  • db.customers
  • db.employees
  • db.events
  • db.invitations
  • db.leaves
  • db.members
  • db.notifications
  • db.orders
  • db.plans
  • db.roles
  • db.subscriptions