Boş gösterge paneli

Bu blok, kullanıcı henüz veri oluşturmadığında gösterge panelinin yerine geçer. Boş tablo veya sıfırlarla dolu kartlar yerine ne yapılacağını söyler. Kurallar Boş durumlar kalıbından gelir.

Önizleme

Sayfa başlığındaki marka ve mod seçimi önizlemeyi de değiştirir.

Canlı örnek, StorybookStorybook'ta aç

Canlı örnek, StorybookStorybook'ta aç

Kod

pnpm add @bigbang/ui

Veri	Tür	Not
done	number	Tamamlanan kurulum adımı sayısı, listenin başından.
Göstergeler	value={null}	StatCard çizgi ve noDataLabel gösterir; sıfır yazmaz.

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>
  );
}

Yapı

1. AppShell şablonu ve h1 “Hoş geldiniz”.
2. Üç StatCard: değer yerine “Henüz veri yok”.
3. Boş durum kartı: süs ikonu, h2 “Henüz proje yok”, tek cümle, birincil “İlk projeyi oluştur” ve ikincil bağlantı.
4. Kurulum kartı: Meter ilerlemesi ve adımlar (Checkbox, yapılmayanlar devre dışı).

Erişilebilirlik

• Sayfada tek birincil işlem vardır; odak sırası başlık, kartlar, birincil işlem, bağlantı ve kurulum adımlarıdır.
• İkon süstür; anlamı başlık ve metin taşır.
• Kurulum ilerlemesi meter olarak “1 / 3 tamamlandı” biçiminde okunur.
• Boş gösterge kartları gizli metinle “Henüz veri yok” okunur; çizgi tek başına anlam taşımaz.

Kullanılan bileşenler

StatCard, Card, Meter, Checkbox, Button, Link, Icon. Sıradaki bileşenler: EmptyState (C2) boş durum kartının içini tek bileşenle verecek.