Dashboard Overview

Layout Structure

The Yaplet dashboard follows a consistent layout across all pages, designed to keep you productive without getting lost.

Sidebar (Left)

The sidebar is your main navigation hub. It's always visible on desktop and collapsible on mobile. It contains:

• Logo and shift timer at the top — the shift timer shows your active shift if time management is enabled
• Search button — opens a global search palette to quickly jump to any page
• Navigation menu — organized into labeled groups (see below)
• User menu at the bottom — access your profile, settings, and organization switching

Content Area (Center)

The main content area takes up the remaining space. Most pages follow this structure:

• Navbar at the top with the page title, an optional back button, and action buttons on the right
• Content sections below, using a consistent card and section pattern

Some pages like the Inbox use a multi-panel layout with a list panel, chat panel, and a details sidebar — all responsive across screen sizes.

Navigation Menu

The sidebar menu is organized into five groups, each containing features gated by your role and permissions:

Global Search

Press the Search button in the sidebar (or use the keyboard shortcut) to open the command palette. It uses fuzzy search across all available navigation items, letting you quickly jump to any page without clicking through menus.

User Menu

Click your avatar at the bottom-left of the sidebar to open the user dropdown. From here you can:

• Toggle dark mode — switch between light and dark themes
• View your balance and top up Yaplet tokens
• Open user settings — update your profile, avatar, and preferences
• Set your status — toggle between Online and Offline so your team knows your availability
• Manage shifts — start or end a shift (if time management is enabled)
• Switch organizations — if you belong to multiple teams, switch between them instantly
• Sign out

Page Navigation

Many dashboard pages use a shared navigation system to manage contextual navigation:

• Back button — when you navigate into a detail view (e.g., opening a specific ticket or campaign), a back arrow appears in the top navbar to return to the parent page
• Breadcrumbs — some pages display breadcrumb trails to show where you are in the hierarchy

This makes it easy to drill into details and get back without losing your place.

Toast Notifications

Actions across the dashboard trigger toast notifications — small popups that appear in the corner of your screen to confirm success or report errors. For example:

• Saving settings → "Settings saved successfully"
• An API error → "Something went wrong"
• Switching organizations → "Switched to [org name]"

Toasts disappear automatically after a few seconds. They use color-coded styling: "success" for confirmations, "error" for failures, and "warning" for important notices.

Keyboard Shortcuts

The dashboard supports keyboard shortcuts for common actions:

Responsive Design

The dashboard adapts to your screen size:

• Mobile — the sidebar collapses into a toggle menu, and multi-panel pages show one panel at a time
• Tablet — sidebar is accessible, and two-panel layouts are shown side by side
• Desktop — full sidebar, all panels visible (e.g., the Inbox shows list + chat + details simultaneously)

Permission-Based Access

Every feature in the dashboard is gated by permissions tied to your role within the organization. If a page or menu item requires a permission you don't have, it simply won't appear. Page-level permissions are also enforced server-side, so even direct URL access is protected.

Explore the Dashboard