Blog

Tenura

An HR platform dashboard for managing time off, expenses, onboarding, and everything people-ops. Responds to the user's system theme. Designed and built in a 72-hour sprint.

ReactTypeScriptWebDesign System

2026 — 2026

Tenura dashboard — light mode with expanded sidebar and activity feed

Description

A client came to me with a rough concept for an HR platform and needed a dashboard redesign, fast. The brief was pretty open: take the core idea and make it look and feel like a proper product. I turned it around in 48 hours, then refined it over the following 24.

The dashboard is the kind of thing an HR manager would live in all day — a morning summary with leave updates and requests, task queues for things like expense approvals and document reviews, upcoming birthdays, and a real-time activity feed showing everything happening across the team.

The whole thing adapts to the user's system theme, switching between light and dark mode automatically. It was also designed with mobile in mind — the sidebar collapses on smaller screens so the layout works just as well on a phone as it does on a widescreen monitor. I handed it over as a fully functional React project with a clean design system, ready to be plugged straight into the live product.

What I did

  • Took a rough concept and turned it into a polished, production-ready dashboard design within 48 hours
  • Built the full UI as a functional React project, not just static mockups
  • Created a simple design system with consistent components, spacing, and typography
  • Implemented light and dark mode theming that responds to the user's system preference
  • Designed a responsive, mobile-first layout with a collapsible sidebar for smaller screens
  • Designed the sidebar navigation, task queues, activity feed, and team overview sections
Tenura dashboard — dark mode with expanded sidebar and activity feed
Tenura dashboard — light mode with collapsed sidebar
Tenura dashboard — dark mode with collapsed sidebar

Tech Stack

Web

Next.jsNext.js
ReactReact
Tailwind CSSTailwind CSS
React QueryTanStack Query

AI

AnthropicAnthropic SDK

Testing

VitestVitest
StorybookStorybook

Tooling

TypeScriptTypeScript
TurborepoTurborepo
pnpmpnpm