Support Inbox

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard10.tsx instead.

Usage

The file also exports dashboard10Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard10, dashboard10Demo } from "@/components/blocks/dashboard/dashboard10";

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

Props

Types

type TicketStatus = "Open" | "Pending" | "Closed";

type Message = {
  id: string;
  sender: string;
  body: string;
  timestamp: string;
  fromCustomer: boolean;
};

type Ticket = {
  id: string;
  subject: string;
  requester: string;
  status: TicketStatus;
  unread?: boolean;
  messages: Message[];
};

Behavior notes

• The search input and the All/Open/Pending/Closed filter buttons genuinely filter the visible ticket list in local state; both conditions combine with AND.
• Clicking a ticket row genuinely swaps which thread renders in the conversation pane via real `useState`, it's not a route change.
• The composer really works: typing a reply and pressing ⌘/Ctrl+Enter, or clicking Send, appends a new right-aligned bubble from "You" to that ticket's thread in local state. There is no backend, the message is lost on refresh, and the timestamp is always the literal string "Just now" rather than a real clock read.
• Below the `lg` breakpoint the icon rail hides entirely and the ticket list stacks above the conversation pane in one column, both stay visible rather than one becoming a full-screen view of the other.
• Tickets are seeded into local state once from the `tickets` prop; replying or filtering does not write back to the prop the parent passed in.