Empty dashboard

This block takes the dashboard’s place while the user has no data yet. Instead of an empty table or cards full of zeros, it says what to do next. Its rules come from the Empty states pattern.

Preview

The brand and mode switches in the page header restyle the preview too.

Live example, StorybookOpen in Storybook

Live example, StorybookOpen in Storybook

Code

pnpm add @bigbang/ui

Data	Type	Note
done	number	Setup steps done, from the start of the list.
KPIs	value={null}	StatCard shows a dash and noDataLabel; it never writes zero.

import { Button, Card, Checkbox, Grid, Heading, Icon, Link, Meter, Stack, StatCard, Text } from '@bigbang/ui';
import type { Lang } from '../../patterns/lang';
import { AppShellTemplate } from '../../templates/app-shell/AppShellTemplate';

const copy = {
  tr: {
    title: 'Hoş geldiniz',
    description: 'İlk projenizi oluşturduğunuzda özetler burada görünür.',
    emptyTitle: 'Henüz proje yok',
    emptyText: 'Proje oluşturun; görevleri, ekibi ve raporları tek yerde izleyin.',
    create: 'İlk projeyi oluştur',
    sample: 'Örnek verilerle göz atın',
    setup: 'Kurulum adımları',
    progress: 'Kurulum ilerlemesi',
    progressText: (done: number, total: number) => `${done} / ${total} tamamlandı`,
    steps: ['Hesabı oluştur', 'Ekibi davet et', 'İlk projeyi oluştur'],
    kpis: ['Aktif proje', 'Açık görev', 'Tamamlanan görev'],
    noData: 'Henüz veri yok',
  },
  en: {
    title: 'Welcome',
    description: 'Summaries appear here once you create your first project.',
    emptyTitle: 'No projects yet',
    emptyText: 'Create a project to follow tasks, the team and reports in one place.',
    create: 'Create the first project',
    sample: 'Explore with sample data',
    setup: 'Setup steps',
    progress: 'Setup progress',
    progressText: (done: number, total: number) => `${done} of ${total} done`,
    steps: ['Create the account', 'Invite the team', 'Create the first project'],
    kpis: ['Active projects', 'Open tasks', 'Completed tasks'],
    noData: 'No data yet',
  },
};

export type EmptyDashboardBlockProps = {
  lang?: Lang;
  /** Setup steps already done, from the start of the list. */
  done?: number;
};

/** First-use dashboard: one primary action, a setup checklist and KPI cards that say there is no data yet. */
export function EmptyDashboardBlock({ lang = 'tr', done = 1 }: EmptyDashboardBlockProps) {
  const t = copy[lang];
  const total = t.steps.length;
  return (
    <AppShellTemplate lang={lang} current="home" title={t.title} description={t.description}>
      <Grid columns={{ base: 1, md: 3 }} gap="lg">
        {t.kpis.map((label) => (
          <StatCard key={label} label={label} value={null} noDataLabel={t.noData} />
        ))}
      </Grid>
      <Grid columns={{ base: 1, md: 3 }} gap="lg">
        <Card variant="outlined" padding="lg" className="md:col-span-2">
          <section aria-labelledby={`empty-title-${lang}`} className="flex flex-col items-center gap-lg py-2xl text-center">
            <span className="flex size-12 items-center justify-center rounded-full bg-status-brand-background text-status-brand-foreground">
              <Icon name="layout-grid" size="lg" />
            </span>
            <Stack gap="sm" align="center">
              <Heading level={2} size="md" id={`empty-title-${lang}`}>
                {t.emptyTitle}
              </Heading>
              <Text tone="subtle" className="max-w-sm">
                {t.emptyText}
              </Text>
            </Stack>
            <Button startIcon={<Icon name="plus" />}>{t.create}</Button>
            <Link href="#" size="sm">
              {t.sample}
            </Link>
          </section>
        </Card>
        <Card variant="outlined" padding="lg">
          <section aria-labelledby={`setup-title-${lang}`}>
            <Stack gap="lg">
              <Heading level={2} size="sm" id={`setup-title-${lang}`}>
                {t.setup}
              </Heading>
              <Meter label={t.progress} value={done} max={total} valueText={t.progressText(done, total)} showValue={false} description={t.progressText(done, total)} size="sm" />
              <Stack gap="sm">
                {t.steps.map((step, index) => (
                  <Checkbox key={step} label={step} checked={index < done} disabled={index >= done} />
                ))}
              </Stack>
            </Stack>
          </section>
        </Card>
      </Grid>
    </AppShellTemplate>
  );
}

Structure

1. AppShell template and the h1 “Welcome”.
2. Three StatCards: “No data yet” instead of a value.
3. Empty state card: decorative icon, h2 “No projects yet”, one sentence, primary “Create the first project” and a secondary link.
4. Setup card: Meter progress and the steps (Checkbox, steps not yet done are disabled).

Accessibility

• The page has one primary action; focus order is title, cards, primary action, link and setup steps.
• The icon is decorative; the title and text carry the meaning.
• Setup progress reads as a meter, “1 of 3 done”.
• Empty KPI cards read “No data yet” from hidden text; the dash carries no meaning alone.

Components used

StatCard, Card, Meter, Checkbox, Button, Link, Icon. Upcoming components: EmptyState (C2) will provide the inside of the empty state card as one component.