Support Inbox

Dashboard10: Support Inbox

A customer-support inbox dashboard: a three-pane helpdesk UI with an icon rail, a searchable ticket list filtered by status, and a live conversation panel with a working reply composer. Use it as the shell for a support inbox dashboard, a shared team inbox, or any Next.js / React customer support dashboard built on shadcn/ui.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard10?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard10?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard10.tsx along with the shadcn/ui dependencies it needs (button, badge, avatar, input, textarea). It composes no separate Beste components, so it is self-contained: the ticket list, conversation view, and composer all live in the one file.

Quick start

The installed file exports dashboard10Demo alongside the block: the exact props behind the preview above. Spread it to get the full inbox in one line. The block fills the viewport (h-screen), so give it a full-height route rather than nesting it inside a padded container.

import { Dashboard10, dashboard10Demo } from "@/components/beste/block/dashboard10";

export default function Page() {
  return <Dashboard10 {...dashboard10Demo} />;
}

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard10 /> renders a complete, populated support inbox out of the box. Pass just the props you want to override.

The block-local data types:

type Ticket = {
  id: string;
  name: string;
  avatar: string; // image URL, rendered with a plain <img> via Avatar
  subject: string;
  preview: string; // truncated line under the subject in the list
  time: string;
  unread: boolean; // shows a primary dot and counts toward the header total
  status: "Open" | "Pending" | "Closed";
  messages: Message[];
};

type Message = {
  id: string;
  fromMe: boolean; // right-aligned primary bubble when true
  author: string;
  avatar?: string; // image URL for the sender (omitted for your own messages)
  text: string;
  time: string;
};

tickets seeds React state: the reply composer appends new fromMe messages to the selected ticket, so passing a new array resets the thread you start from. The first ticket is selected on mount.

Still internal

A few structural bits stay as constants in the installed file — edit them in place:

• railItems — the left icon rail (inbox, starred, sent, archive), each with a Lucide icon, an optional active flag, and an optional numeric badge.
• statuses — the filter tabs above the list: ["All", "Open", "Pending", "Closed"]. "All" shows everything; the rest match a ticket's status.
• statusTone — the badge color classes per status (emerald for Open, amber for Pending, muted for Closed).

Behavior notes

• Clicking a ticket in the list selects it and loads its thread in the conversation pane; the active row is highlighted. The first ticket is selected on mount.
• The status tabs (All / Open / Pending / Closed) filter the list in place. All shows every ticket; the others show only matching statuses.
• The search input is live: it filters the list case-insensitively by ticket subject and customer name, combined with the active status tab. When nothing matches, the list shows a "No tickets match" line.
• The header unread count reflects tickets with unread: true, and each unread ticket shows a small primary dot next to its status badge.
• The reply composer is live: typing and sending appends a fromMe message to the selected ticket's thread. Send with the Send button or with ⌘/Ctrl+Enter; the button is disabled while the draft is empty or whitespace.
• The conversation header actions (tag, archive, trash, more) are presentational placeholders, wire them to your own handlers.
• Responsive layout: the icon rail appears at sm and up, the conversation pane at md and up. Below md the block is the ticket list on its own; the list column widens at sm/lg.

Requirements

• Next.js App Router. Rendered as a client component ("use client"), so it composes into any App Router page.
• Full-height by design (h-screen with overflow-hidden). Place it on a dedicated route or a full-height layout rather than inside a scrolling, padded container.
• Avatar and message images render with a plain <img> (via the Avatar component), so no next.config images.remotePatterns setup is needed for remote hosts.