Project Workspace

Dashboard4: Project Workspace

A full-height project management dashboard with a collapsible sidebar, a search topbar, a four-up project stats row, a weekly analytics bar chart, a team collaboration list, a progress radial gauge, and a live focus timer. Built as a Next.js / React workspace template on shadcn/ui, it drops in as a ready-made app shell for task boards, team dashboards, and SaaS admin panels.

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/dashboard4?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/dashboard4.tsx, its Beste UI components (sidebar-nav, user-menu, notifications-menu, bar-chart, radial-chart) alongside it, and the shadcn/ui dependencies they need (button, badge, avatar, sheet, command, dialog).

Quick start

The installed file exports dashboard4Demo alongside the block: the exact props behind the preview above. Spread it to get the full workspace in one line. The block fills its container height (h-screen), so render it as the whole page rather than nesting it inside padded layout.

import { Dashboard4, dashboard4Demo } from "@/components/beste/block/dashboard4";

export default function Page() {
  return <Dashboard4 {...dashboard4Demo} />;
}

Props

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

The block-local data types:

type Stat = {
  label: string;
  value: string; // pre-formatted, e.g. "26"
  note: string; // muted sub-label, e.g. "+5 from last month"
  highlight?: boolean; // renders the card in the primary color
};

type AnalyticsPoint = { day: string; tasks: number };

type Member = {
  name: string;
  task: string;
  avatar: string; // image URL, rendered via the avatar component
  status: "Done" | "In progress" | "Pending"; // drives the badge color
};

type Reminder = {
  title: string; // card heading, e.g. "Reminder"
  description: string; // the event line
  time: string; // pre-formatted range, e.g. "2:00 PM to 3:30 PM"
};

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with a plain <img>
};

The remaining props reuse the interfaces exported by the composed Beste components:

// from sidebar-nav
type SidebarNavGroup = {
  label?: string; // muted uppercase group heading (hidden when collapsed)
  items: {
    id: string;
    label: string;
    icon?: LucideIcon;
    badge?: string | number; // small trailing count/tag, e.g. "12+"
    href?: string;           // renders an <a> instead of a <button>
  }[];
};

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  destructive?: boolean; // red row with a separator above it
};

// from notifications-menu
type NotificationItem = {
  id: string;
  title: string;
  description?: string;
  time: string;
  icon?: LucideIcon;
  unread?: boolean;
};

// block-local
type CommandPaletteGroup = {
  heading: string;
  items: { id: string; label: string; icon?: LucideIcon }[];
};

Still internal

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

• analyticsConfig — series label and color for the Project analytics bar chart (the color references a --chart-1…--chart-5 theme token).
• statusTone — the badge color classes for each member status ("Done", "In progress", "Pending").

Components

Installs these Beste UI components next to the block:

• sidebar-nav — the grouped, collapsible left navigation, driven by navGroups.
• user-menu — the account avatar dropdown in the topbar (rendered compact on mobile).
• notifications-menu — the notifications bell with unread state.
• bar-chart — the weekly "Project analytics" bar chart.
• radial-chart — the "Project progress" gauge.

Behavior notes

• Pressing ⌘K (or Ctrl+K) toggles the command palette; the search button in the topbar opens it too. Selecting an item closes the palette.
• The desktop sidebar collapses and expands via the panel button in the topbar (collapsed state).
• Below md, the sidebar is hidden and opens as a slide-in sheet from the panel button; tapping a nav item closes it.
• The time tracker runs a live counter that ticks up every second while running. The play/pause button toggles it; the red stop button pauses and resets to 00:00:00.
• The stat cards and sidebar items are interactive buttons but do not navigate anywhere on their own; wire them to your routes.

Requirements

• Next.js App Router. The block is a client component ("use client") using useState/useEffect and a keydown listener, so it composes into any App Router page.
• Full-height layout: the root is h-screen with an internally scrolling content area, so give it the full viewport rather than embedding it in a constrained container.
• Avatar images render with a plain <img> (via the avatar component), so no next.config images.remotePatterns setup is needed for the remote avatar hosts.