mittwald Flow Logo

Foundations

Dashboard

Ein Dashboard präsentiert dem User relevante Informationen übersichtlich in klar abgegrenzten Bereichen auf einer einzigen Oberfläche. Es unterstützt den User dabei, wichtige Daten auf einen Blick zu erfassen. Häufig dient ein Dashboard als Startseite oder zur Darstellung von Analyse-Diagrammen.

Zentrale Merkmale

Ein Dashboard bündelt relevante Informationen auf einer kachelartigen Oberfläche. Damit es den größtmöglichen Nutzen bietet, sollten folgende Prinzipien berücksichtigt werden:

  • Übersichtlichkeit: Klar strukturiert und kompakt.
  • Relevanz: Daten die einem Mehrwert bieten.
  • Erfassbarkeit: Kennzahlen und Trends sofort erkennbar (z. B. Diagrammen).
  • Aktualität und Interaktivität: Aktuelle Daten, oft mit Filtern oder Anpassungsmöglichkeiten.

Aufbau

Ein Dashboard besteht aus mehreren LayoutCards, die jeweils ein Thema abbilden. Mithilfe von ColumnLayouts entsteht die kachelartige Struktur. Innerhalb einer LayoutCard sorgen Sections für die Gliederung in die drei Bereiche Header, Content und Footer.

Willkommens-Dashboard

Ein Willkommens-Dashboard auf der Startseite bietet einen schnellen Überblick über zentrale Informationen und Funktionen. Es erleichtert den Einstieg, schafft Orientierung und dient als klarer Ausgangspunkt für den Zugriff auf weitere Bereiche.

Hey Max!

Benachrichtigungen

mStudio entdecken

Du willst das Beste aus deinen Projekten herausholen? Unsere Wissensdatenbank hilft dir dabei, das mStudio und seine Möglichkeiten besser kennenzulernen.

Status
Alle Systeme funktionieren

Das mStudio und alle dazugehörenden Systeme laufen einwandfrei.Zur Statusseite

Neues aus dem Blog

Zukunft pflanzen – mittwald unterstützt 8000 m² Aufforstung für den Klimaschutz

Nachhaltigkeitsmanager Marvin von mittwald berichtet über ein regionales Aufforstungsprojekt mit 8.000 m² neuem Wald.Zum Blogartikel
import {
  AlertBadge,
  Avatar,
  Button,
  ColumnLayout,
  Content,
  Flex,
  Header,
  Heading,
  IconCheck,
  IconEmail,
  Image,
  LayoutCard,
  Link,
  Section,
  Text,
  typedList,
} from "@mittwald/flow-react-components";

export default () => {
  const List = typedList<{
    title: string;
    date: string;
    status?: "info" | "warning" | "danger";
    isInvite?: boolean;
  }>();

  return (
    <ColumnLayout l={[1]} m={[1]}>
      <Heading color="light" level={1}>
        Hey Max!
      </Heading>
      <ColumnLayout m={[1]} l={[3, 2]}>
        <ColumnLayout l={[1]} m={[1]}>
          <LayoutCard>
            <Section>
              <Header>
                <Heading>Benachrichtigungen</Heading>
                <Button
                  onPress={() => alert("not implemented")}
                  variant="soft"
                  color="secondary"
                >
                  Alle anzeigen
                </Button>
              </Header>
              <List.List
                hidePagination
                onAction={() => alert("not implemented")}
              >
                <List.StaticData
                  data={[
                    {
                      title:
                        "Projekteinladung: „Mein Projekt“",
                      date: "10.03.2025, 09:42 Uhr",
                      isInvite: true,
                    },
                    {
                      title:
                        "E-Mail-Empfang wurde deaktiviert",
                      date: "15.05.2025, 10:33 Uhr",
                      status: "danger",
                    },
                    {
                      title:
                        "E-Mail-Versand wurde gesperrt",
                      date: "15.05.2025, 10:33 Uhr",
                      status: "warning",
                    },
                    {
                      title: "Ticket wurde beantwortet",
                      date: "16.05.2025, 16:33 Uhr",
                      status: "info",
                    },
                  ]}
                />
                <List.Item textValue={(i) => i.title}>
                  {(i) => (
                    <List.ItemView>
                      {i.isInvite ? (
                        <Avatar>
                          <IconEmail />
                        </Avatar>
                      ) : (
                        <Avatar status={i.status} />
                      )}
                      <Heading>{i.title}</Heading>
                      <Text>{i.date}</Text>
                      <Content>
                        {i.isInvite ? (
                          <Button
                            onPress={() =>
                              alert("not implemented")
                            }
                            variant="soft"
                            color="secondary"
                          >
                            Öffnen
                          </Button>
                        ) : (
                          <Button
                            onPress={() =>
                              alert("not implemented")
                            }
                            aria-label="Erledigt"
                            variant="plain"
                            color="secondary"
                          >
                            <IconCheck />
                          </Button>
                        )}
                      </Content>
                    </List.ItemView>
                  )}
                </List.Item>
              </List.List>
            </Section>
          </LayoutCard>

          <LayoutCard>
            <ColumnLayout m={[1, 3]} s={[null, 1]}>
              <Flex align="center" grow>
                <Image
                  src="https://mittwald.github.io/flow/assets/onboarding.png"
                  alt=""
                  aria-hidden
                />
              </Flex>
              <Section>
                <Heading>mStudio entdecken</Heading>
                <Text>
                  Du willst das Beste aus deinen Projekten
                  herausholen? Unsere{" "}
                  <Link href="#">Wissensdatenbank</Link>{" "}
                  hilft dir dabei, das mStudio und seine
                  Möglichkeiten besser kennenzulernen.
                </Text>
              </Section>
            </ColumnLayout>
          </LayoutCard>
        </ColumnLayout>

        <ColumnLayout l={[1]} m={[1]}>
          <LayoutCard>
            <Section>
              <Heading>
                Status
                <AlertBadge status="success">
                  Alle Systeme funktionieren
                </AlertBadge>
              </Heading>
              <Text>
                Das mStudio und alle dazugehörenden Systeme
                laufen einwandfrei.
              </Text>
              <Link target="_blank" href="#">
                Zur Statusseite
              </Link>
            </Section>
          </LayoutCard>

          <LayoutCard>
            <Section>
              <Heading>Neues aus dem Blog</Heading>
              <Image
                src="https://mittwald.github.io/flow/assets/blog.png"
                alt=""
                aria-hidden
              />

              <Heading level={3}>
                Zukunft pflanzen – mittwald unterstützt 8000
                m² Aufforstung für den Klimaschutz
              </Heading>
              <Text>
                Nachhaltigkeitsmanager Marvin von mittwald
                berichtet über ein regionales
                Aufforstungsprojekt mit 8.000 m² neuem Wald.
              </Text>
              <Link href="#" target="_blank">
                Zum Blogartikel
              </Link>
            </Section>
          </LayoutCard>
        </ColumnLayout>
      </ColumnLayout>
    </ColumnLayout>
  );
}

Dashboards sollen nicht nur funktional, sondern auch visuell ansprechend gestaltet sein. Dies kann durch den Einsatz eines Images oder mithilfe der AccentBox erfolgen.

Detail-Dashboard

Detail-Dashboards geben Usern einen schnellen Einblick in ein Objekt. Sie können den aktuellen Status, relevante Kennzahlen und wichtige Zusammenhänge zeigen – oft anschaulich visualisiert durch Diagramme.

  1. Projekt
  2. Dashboard

Dashboard

Projektdetails

p12345
Mein Server

vCPU Auslastung

Details
43 %
05.09.2025, 07:30 Uhr
67 %

RAM Auslastung

Details
12 %
05.09.2025, 07:30 Uhr
24 %

Speicherplatz

Details
Speicherplatz2.3 GB of 5 GB
import {
  Breadcrumb,
  ColumnLayout,
  DonutChart,
  Flex,
  Header,
  Heading,
  Label,
  LabeledValue,
  LayoutCard,
  Link,
  ProgressBar,
  Section,
  Text,
} from "@mittwald/flow-react-components";

export default () => {
  return (
    <ColumnLayout l={[1]} m={[1]}>
      <Flex direction="column" gap="xs">
        <Breadcrumb color="light">
          <Link href="#">Projekt</Link>
          <Link href="#">Dashboard</Link>
        </Breadcrumb>
        <Heading color="light" level={1}>
          Dashboard
        </Heading>
      </Flex>
      <LayoutCard>
        <Section>
          <Heading>Projektdetails</Heading>
          <ColumnLayout>
            <LabeledValue>
              <Label>Short-ID</Label>
              <Text>p12345</Text>
            </LabeledValue>
            <LabeledValue>
              <Label>Server</Label>
              <Link href="#">Mein Server</Link>
            </LabeledValue>
          </ColumnLayout>
        </Section>
      </LayoutCard>
      <ColumnLayout l={[1, 1]} m={[1]}>
        <LayoutCard>
          <Section>
            <Header>
              <Heading>vCPU Auslastung</Heading>
              <Link href="#">Details</Link>
            </Header>
            <Flex
              columnGap="l"
              grow
              justify="center"
              rowGap="m"
              wrap="wrap"
            >
              <DonutChart
                aria-label="vCPU Auslastung"
                status="success"
                value={43}
              >
                <b>43 %</b>
              </DonutChart>
              <Flex direction="column" grow rowGap="m">
                <LabeledValue>
                  <Label>Messzeitpunkt</Label>
                  <Text>05.09.2025, 07:30 Uhr</Text>
                </LabeledValue>
                <LabeledValue>
                  <Label>Maximum (Letzte 7 Tage)</Label>
                  <Text>67 %</Text>
                </LabeledValue>
              </Flex>
            </Flex>
          </Section>
        </LayoutCard>
        <LayoutCard>
          <Section>
            <Header>
              <Heading>RAM Auslastung</Heading>
              <Link href="#">Details</Link>
            </Header>
            <Flex
              columnGap="l"
              grow
              justify="center"
              rowGap="m"
              wrap="wrap"
            >
              <DonutChart
                aria-label="RAM Auslastung"
                status="success"
                value={12}
              >
                <b>12 %</b>
              </DonutChart>
              <Flex direction="column" grow rowGap="m">
                <LabeledValue>
                  <Label>Messzeitpunkt</Label>
                  <Text>05.09.2025, 07:30 Uhr</Text>
                </LabeledValue>
                <LabeledValue>
                  <Label>Maximum (Letzte 7 Tage)</Label>
                  <Text>24 %</Text>
                </LabeledValue>
              </Flex>
            </Flex>
          </Section>
        </LayoutCard>
      </ColumnLayout>
      <LayoutCard>
        <Section>
          <Header>
            <Heading>Speicherplatz</Heading>
            <Link href="#">Details</Link>
          </Header>
          <ProgressBar
            value={2.3}
            maxValue={5}
            formatOptions={{
              style: "unit",
              unit: "gigabyte",
            }}
            showMaxValue
            size="l"
            status="success"
          >
            <Label>Speicherplatz</Label>
          </ProgressBar>
        </Section>
      </LayoutCard>
    </ColumnLayout>
  );
}

Für die Datenvisualisierung in Dashboards eignen sich unter anderem folgende Components: ProgressBar, DonutChart, BigNumber, CartesianChart.

LayoutCard kombiniert mit AccentBox

AccentBoxen eignen sich, um gezielt farbliche Akzente zu setzen – insbesondere bei Werbemaßnahmen. Dabei sollte jedoch sparsam vorgegangen werden, damit das Gesamtbild stimmig bleibt. In der Regel genügt bereits eine farbige Box.

  1. Organisation
  2. Dashboard

Dashboard

Vertragspartner

Mittwald CM Service GmbH & Co.KG
Max Mustermann
Königsberger Straße 4-6, 32339 Espelkamp
mittwald@mittwald.de
+49 1234 5678910

Rechnungsempfänger

RechnungMax Mustermann
Königsberger Straße 4-6, 32339 Espelkamp
mittwald@mittwald.de
+49 1234 5678910

Entwickle deine eigene Extension

Du hast Lust als Organisation deine eigene Extension zu bauen und sie der Community bereitzustellen? Du hast vorab noch Fragen rund um die Contribution? Lass uns drüber quatschen.Contributor werden
import {
  AccentBox,
  Breadcrumb,
  Button,
  ColumnLayout,
  Flex,
  Header,
  Heading,
  Icon,
  LayoutCard,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";
import { IconHeartHandshake } from "@tabler/icons-react";

export default () => {
  return (
    <ColumnLayout l={[1]} m={[1]}>
      <Flex direction="column" gap="xs">
        <Breadcrumb color="light">
          <Link href="#">Organisation</Link>
          <Link href="#">Dashboard</Link>
        </Breadcrumb>
        <Heading color="light" level={1}>
          Dashboard
        </Heading>
      </Flex>
      <ColumnLayout l={[1, 1]} m={[1]}>
        <LayoutCard>
          <Section>
            <Header>
              <Heading>Vertragspartner</Heading>
              <Button
                onPress={() => alert("not implemented")}
                color="secondary"
                variant="soft"
              >
                Bearbeiten
              </Button>
            </Header>
            <Text>
              Mittwald CM Service GmbH & Co.KG
              <br />
              Max Mustermann
              <br />
              Königsberger Straße 4-6, 32339 Espelkamp
              <br />
              mittwald@mittwald.de
              <br />
              +49 1234 5678910
            </Text>
          </Section>
        </LayoutCard>
        <LayoutCard>
          <Section>
            <Header>
              <Heading>Rechnungsempfänger</Heading>
              <Button
                onPress={() => alert("not implemented")}
                color="secondary"
                variant="soft"
              >
                Bearbeiten
              </Button>
            </Header>
            <Text>
              <b>Rechnung</b>
            </Text>
            <Text>
              Max Mustermann
              <br />
              Königsberger Straße 4-6, 32339 Espelkamp
              <br />
              mittwald@mittwald.de
              <br />
              +49 1234 5678910
            </Text>
          </Section>
        </LayoutCard>
      </ColumnLayout>
      <LayoutCard>
        <AccentBox>
          <Icon>
            <IconHeartHandshake />
          </Icon>
          <Section>
            <Heading>
              Entwickle deine eigene Extension
            </Heading>
            <Text>
              Du hast Lust als Organisation deine eigene
              Extension zu bauen und sie der Community
              bereitzustellen? Du hast vorab noch Fragen
              rund um die Contribution? Lass uns drüber
              quatschen.
            </Text>
            <Link href="#" target="_blank">
              Contributor werden
            </Link>
          </Section>
        </AccentBox>
      </LayoutCard>
    </ColumnLayout>
  );
}