Dashboard — Request inbox with detail pane

A request list and selected-message detail share a two-pane workbench, with summary counts above. Use when reviewing inbound work is the dashboard’s primary task.

ReactHTML

1440 × 900

Open in new tab

Component.tsx146 lines

export default function DashboardInboxWorkbench() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Request inbox
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Review incoming work and open the next item to act on.
          </p>
        </div>
        <dl className="mt-6 flex flex-wrap gap-6 text-sm">
          <div className="flex gap-2">
            <dt className="text-neutral-500">Open</dt>
            <dd className="font-semibold">12</dd>
          </div>
          <div className="flex gap-2">
            <dt className="text-neutral-500">Assigned</dt>
            <dd className="font-semibold">8</dd>
          </div>
          <div className="flex gap-2">
            <dt className="text-neutral-500">Waiting</dt>
            <dd className="font-semibold">4</dd>
          </div>
        </dl>
        <div className="mt-8 grid items-start gap-8 lg:grid-cols-[20rem_minmax(0,1fr)]">
          <nav aria-label="Inbox requests">
            <ul role="list" className="space-y-3">
              <li>
                <a
                  href="#"
                  aria-current="true"
                  className="block rounded-lg border border-neutral-900 bg-neutral-50 p-4 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  <span className="flex items-start justify-between gap-3">
                    <span className="text-sm font-semibold">Request title</span>
                    <time
                      dateTime="2026-10-11T09:41:00"
                      className="text-xs text-neutral-500"
                    >
                      09:41
                    </time>
                  </span>
                  <span className="mt-2 block text-xs text-neutral-500">
                    Alex Rivera
                  </span>
                  <span className="mt-2 block text-sm text-neutral-600">
                    Short preview of the request contents.
                  </span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block rounded-lg border border-neutral-200 bg-white p-4 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  <span className="flex items-start justify-between gap-3">
                    <span className="text-sm font-semibold">Review title</span>
                    <time
                      dateTime="2026-10-11T09:25:00"
                      className="text-xs text-neutral-500"
                    >
                      09:25
                    </time>
                  </span>
                  <span className="mt-2 block text-xs text-neutral-500">
                    Jordan Lee
                  </span>
                  <span className="mt-2 block text-sm text-neutral-600">
                    Short preview of the request contents.
                  </span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block rounded-lg border border-neutral-200 bg-white p-4 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  <span className="flex items-start justify-between gap-3">
                    <span className="text-sm font-semibold">Update title</span>
                    <time
                      dateTime="2026-10-11T09:12:00"
                      className="text-xs text-neutral-500"
                    >
                      09:12
                    </time>
                  </span>
                  <span className="mt-2 block text-xs text-neutral-500">
                    Sam Taylor
                  </span>
                  <span className="mt-2 block text-sm text-neutral-600">
                    Short preview of the request contents.
                  </span>
                </a>
              </li>
            </ul>
          </nav>
          <article className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
            <header className="flex flex-wrap items-start justify-between gap-4">
              <div>
                <h2 className="text-lg font-semibold">Request title</h2>
                <p className="mt-2 text-sm text-neutral-500">
                  Alex Rivera · 09:41
                </p>
              </div>
              <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
                Open
              </span>
            </header>
            <p className="mt-8 text-base text-neutral-600">
              A short message explains the requested outcome and the context
              needed to review it.
            </p>
            <dl className="mt-8 grid gap-6 sm:grid-cols-2">
              <div>
                <dt className="text-sm text-neutral-500">Owner</dt>
                <dd className="mt-1 text-sm font-medium">Alex Rivera</dd>
              </div>
              <div>
                <dt className="text-sm text-neutral-500">Due date</dt>
                <dd className="mt-1 text-sm font-medium">
                  <time dateTime="2026-10-14">14 Oct 2026</time>
                </dd>
              </div>
            </dl>
            <footer className="mt-8 flex flex-wrap gap-3 border-t border-neutral-200 pt-6">
              <a
                href="#"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Review request
              </a>
              <a
                href="#"
                className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Assign owner
              </a>
            </footer>
          </article>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for reviewing a short inbox of incoming work. Choose dashboard-activity-feed for a read-only event stream. Variations: add priority badges, show a request category, or replace detail actions with an approval pair.
Hierarchy: The h1 leads to compact summary counts, then request titles and the selected detail. aria-current identifies the highlighted request. Message up to 30 words, row titles 4, preview 10 and heading 5.
Responsive: Below 1024px the inbox list sits above the selected detail. Metadata becomes two columns at sm and one below it. Headers and action rows wrap at narrow widths.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 320px/flexible lg grid uses 32px gaps. The navigation lists three p-4 request cards with 12px gaps. The p-6 detail article places header/status, 32px-separated message and metadata, then a top-bordered action footer.
States: The selected request uses an explicit border and aria-current, with keyboard-focus outlines on every request and action. Detail content is illustrative and static; request selection, assignment and persistence require host integration.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Request inbox                                                 │
│Open 12     Assigned 8      Waiting 4                         │
│Request title    09:41   Request title               [Open]   │
│Alex Rivera             Alex Rivera | 09:41                   │
│Request preview         Message content and context           │
│Review title     09:25                                        │
│Jordan Lee              Owner                Due date         │
│Request preview         Alex Rivera          14 Oct 2026      │
│Update title     09:12                                        │
│Sam Taylor              [Review request] [Assign owner]       │
└──────────────────────────────────────────────────────────────┘

View all

Dashboard — Activity feed
Layout tags: stacked,list,compact
Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media

Dashboard — Request inbox with detail pane

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview