Zum Inhalt springen
BT Astro Boilerplate
Bereiche

Komponenten

Wiederverwendbare UI-Bausteine im Baker-Tilly-Design für interne Tools.

Aktive Nutzer

1.284+12 %

vs. Vormonat

Offene Freigaben

7−3

vs. Vormonat

Dokumente

9.412+204

diese Woche

Wartet auf Freigabe

23

unverändert

Gelesen

214

Gültig

207

werden übernommen

Mit Problemen

7

werden übersprungen

Fachliche Kompositionen

Muster für Fristen, Akten und Prüfbefunde aus der Gestaltungsreferenz. Illustrative Beispieldaten · Stand 19. Oktober 2026.

Anstehende Fristen

Datum, Zuständigkeit und nächste Aktion bleiben zusammen.
  • Umsatzsteuer-Voranmeldung Q3

    Morgen fällig

    Kronberg Maschinenbau GmbH · Marie König

    Prüfbefund ansehen
  • Unterlagen zur Betriebsprüfung

    In 3 Tagen

    Kronberg Maschinenbau GmbH · Thomas Beck

    Aktenkopf ansehen
  • Stammdaten abgleichen

    Erledigt

    Kronberg Maschinenbau GmbH · Marie König

Leerer und fehlerhafter Zustand

Keine offenen Fristen

Alle Termine sind erledigt. Neue Fristen erscheinen hier.

Fristen konnten nicht geladen werden
Bitte laden Sie die Seite erneut. Bereits gespeicherte Fristen bleiben erhalten.

Mandanten- und Aktenkopf

Identität, Verantwortung und Aktualität auf einen Blick.

Kronberg Maschinenbau GmbH

Steuerberatung · Akte ST-2026-0184

Verantwortlich
Marie König
Vertretung
Thomas Beck
Aktualisiert
16. Oktober 2026, 14:32 Uhr
In Bearbeitung

Prüfbefund mit nächster Aktion

Rechnung RE-2026-1048 · Kronberg Maschinenbau GmbH
Leistungsdatum weicht ab
Der Beleg nennt September, die Buchung Oktober. Solange der Zeitraum ungeklärt ist, bleibt die fachliche Freigabe offen.
Rückfrage offenZuständig: Marie König
Prüfschritte abgeschlossen: 3 von 475 %

Nächster Schritt: Beleg und Buchungszeitraum gemeinsam abgleichen.

Zuständigkeit in der Akte ansehen
Geklärter Zustand
Geklärt

Marie König hat den Leistungszeitraum bestätigt. Die Prüfung ist abgeschlossen.

Prüfschritte abgeschlossen: 4 von 4100 %

Kopiervorlagen aus Card, StatusBadge, KeyValueList, Alert, ProgressBar und LinkButton. Die Links führen zu den zugehörigen Beispielen auf dieser Seite; es werden keine Daten geändert. Diese Ansichten werden serverseitig gerendert und benötigen keinen Ladezustand.

Visual

Animiertes Dashboard-Visual (CodedVisuals) — dekorativ, übernimmt automatisch das BT-Teal.

Buttons
Varianten und Grössen für jede Aktion.
Badges & Status
Zustände und Markierungen — farbcodiert.
PrimarySecondaryOutlineErfolgWarnungFehler
AktivWartet auf FreigabeGesperrtAdminNutzer
Hinweise & Meldungen
Alerts für Rückmeldungen an die Nutzenden.

Formulare & Navigation

Formularelemente
Input, Textarea, Select und Switch — typische Eingaben für interne Tools.

E-Mail bei neuen Freigaben

Registerkarten
Inhalte in Bereiche gliedern — z. B. „Übersicht / Aktivität / Einstellungen".

Die Übersicht fasst die wichtigsten Kennzahlen zusammen. Wechseln Sie die Registerkarte, um weitere Bereiche zu sehen.

Formular-Bausteine

Links das server-seitige Muster (Field + FormSection, Submit via Astro Actions). Rechts ein mehrstufiger Wizard (Stepper + Validierung) als React-Insel.

Kontaktanfrage
Statisches Formular — Field & FormSection.
Kontakt

Wie erreichen wir Sie?

Wir verwenden sie ausschliesslich für die Rückmeldung.

Anliegen
optional

Mehrschrittiger Wizard:

Schritt 1 / 3

Listen- & Detail-Bausteine

Breadcrumb, Bereichsnavigation, Ablaufschritte, Filter-Tabs, KeyValue-Listen, Fortschrittsbalken, Status-Wahl, Fehler-Zusammenfassung und Aktivitäts-Feed — alles server-seitig, ohne Client-JavaScript.

Breadcrumb
Hierarchie-Pfad; direkt oder als breadcrumb-Prop am PageHeader.
<PageHeader
  title="Vorgang bearbeiten"
  breadcrumb={[
    { label: "Vorgänge", href: path("vorgaenge") },
    { label: vorgang.id },
  ]}
/>
FilterTabs
Diskretfilter als Links mit Zählern — die DataTable rendert sie über filters. Die Demo verlinkt echt auf die Vorgangsliste.
SectionNav
Bereiche eines Fachobjekts als Links — auf Mobilbreite als sichtbares Menü.
WorkflowSteps
Erledigt, aktuell und ausstehend bleiben auch ohne Farbe unterscheidbar.
  1. ✓Hochladen
  2. 2Prüfen
  3. 3Übernehmen

In einem PageHeader den Slot steps nutzen; die Hauptaktion gehört inactions.

KeyValueList
Label/Wert-Übersicht für Stammdaten oder Diagnose.
Kreditor
10023481
Kostenstelle
4410 — Technik
Zahlungsziel
21.08.2026 (14 Tage netto)
Mail
SMTP · nicht konfiguriert
ProgressBar
Fortschritt mit Label und Prozentwert — drei Töne.
Seite 2 von 3 — OCR64 %
Text-Layer61 %
Vision-KI11 %
RadioCardGroup
Status-Wahl als Karten — Auswahl klappt ohne JavaScript über :checked.
FormErrorSummary
Fehler-Banner über dem Formular nach fehlgeschlagener Action — bündelt die Field-Fehler.
ActivityFeed
Letzte Aktivität als reine Ansicht — Daten typischerweise aus dem Audit-Log ( queryAuditVerlauf ).
  1. RP-2026-0431 eskaliert · Fährmann Energie AG · 08:54
  2. Import „SAP-Export KW33“ übernommen — 214 Zeilen · 08:31
  3. T. Kern freigegeben (Rolle: Nutzer) · 08:12
  4. 12 Vorgänge freigegeben · gestern, 17:40

Dialog & Toast

Bestätigungs-Dialog für destruktive Aktionen (ConfirmDialog) und Toast-Benachrichtigungen nach erfolgreichen Aktionen (sonner). Beide in der CRUD-Musterstrecke im Einsatz — siehe Vorgänge.

ConfirmDialog
Öffnet einen Modal-Dialog; „Bestätigen" reicht das Submit an ein verknüpftes Formular.
<form id="del" method="POST" action={actions.deleteVorgang}>
  <input type="hidden" name="id" value={row.id} />
</form>
<ConfirmDialog client:load formId="del"
  triggerLabel="Löschen" triggerVariant="destructive"
  title="Löschen?" description="…"
  confirmLabel="Löschen" />
Toast (sonner)
Global gemountet; wird nach PRG-Redirects via ?toast= ausgelöst.
// BaseLayout mountet <Toaster client:load /> global.
// Toasts nach Redirect via ?toast=created|updated|deleted,
// oder direkt aus Client-Code:

import { toast } from "sonner";
toast.success("Gespeichert!");

Nutzerverwaltung

Alle registrierten Konten — mit Suche und Sortierung.

NameE-MailRolleStatusAnmeldungen
Mia Schmidtmia.schmidt@bakertilly.deAdminAktiv142
Leon Weberleon.weber@bakertilly.deNutzerAktiv38
Hannah Meyerhannah.meyer@bakertilly.deNutzerWartet0
Felix Wagnerfelix.wagner@bakertilly.deNutzerGesperrt12
Sophie Kleinsophie.klein@bakertilly.deAdminAktiv221
Jonas Bauerjonas.bauer@bakertilly.deNutzerAktiv57

6 Einträge

DataTable (server-seitig)

Generische, URL-getriebene Liste: Sortierung, Suche und Pagination liegen in der URL (?sort=&dir=&q=&page=) — kein Client-JavaScript, reload- und teilsicher. Siehe Musterstrecke Vorgänge.

Verwendung
Spalten definieren, Parameter parsen, Daten reichen.
---
import DataTable from "@/components/bt/DataTable.astro";
import { parseListParams } from "@/lib/datatable";

const params = parseListParams(Astro.url.searchParams, {
  allowedSort: ["titel", "datum"],
});
const result = await queryMyTable(getDb(), params);
---

<DataTable
  columns={[
    { key: "titel", label: "Titel", sortable: true },
    { key: "datum", label: "Datum", sortable: true, format: formatDate },
  ]}
  rows={result.rows}
  params={{ ...params, page: result.page }}
  total={result.total}
  pageSize={result.pageSize}
  pageHref="meine-liste"
/>

Leere Zustände

Keine Dokumente

Laden Sie Dateien hoch oder erstellen Sie ein neues Dokument.

NameE-MailRolle

Noch keine Nutzer

Laden Sie Kolleginnen und Kollegen zur Nutzung ein.

0 Einträge

Upload-Baustein

Drag-and-drop oder Dateiauswahl mit sofortiger Validierung (Typ & Größe). Nach dem Upload erscheint die stabile Datei-ID mit einem Link auf den geschützten Download.

Werkzeug-Baustein (UploadZone)

Vollständige Verarbeitungspipeline mit fünf Zuständen (idle, validating, processing, error, done). Drag-and-drop, Client-Vorprüfung, Server-Verarbeitung und Ergebnis-Download. Kopiervorlage für den häufigsten Tool-Typ — siehe Musterstrecke.

KI-Extraktion (Structured Output)

ai.extract(req, zodSchema) liefert validiertes, typsicheres JSON aus Text und Bildern (Base64) — niemals ungeprüfte Strings. Kaputtes JSON wird begrenzt erneut versucht, Schema-Verletzungen werfen einen AiError mit den Zod-Issues. Die Demo unten lief server-seitig gegen einen Fake-Client (kein Azure-Aufruf).

Verwendung
Zod-Schema definieren, extrahieren, typsicher nutzen.
import { z } from "zod";
import { getAi, isAiError, AI_ERROR_CODES } from "@/ai";

const schema = z.object({
  lieferant: z.string(),
  rechnungsnummer: z.string(),
  betragEur: z.number(),
});

const daten = await getAi().extract(
  {
    model: "gpt-4o-deployment",
    messages: [{
      role: "user",
      content: [
        { type: "text", text: "Extrahiere die Rechnungsdaten." },
        { type: "image", mediaType: "image/png", data: base64Scan },
      ],
    }],
  },
  schema,
);
// daten: { lieferant: string; rechnungsnummer: string; betragEur: number }
Ergebnis (Fake-Client)
Zod-geparst und typsicher — Fehlerfälle: AI_INVALID_JSON, AI_SCHEMA_VIOLATION, AI_DISABLED.
                  {
  "lieferant": "Muster GmbH",
  "rechnungsnummer": "RE-2026-0815",
  "betragEur": 1190.5
}
                
validiert gegen Zod-Schema

Dokumente (PDF & OCR)

@/documents liefert die PDF-Grundfähigkeiten ohne GPU und ohne KI-Zwang:classifyPdf (digital | gescannt), pdfToText (Text-Layer), pdfToImages (PNG-Rasterung) und ocr (CPU, deutsch, offline). Extraktion folgt der Eskalationsleiter: Text-Layer → CPU-OCR → Vision-KI über ai.extract — Rezept in docs/howto/eskalationsleiter.md (ADR 0010). Die Werte unten hat der Server gerade echt berechnet (pdfjs + Canvas, ohne OCR — der braucht Sekunden).

Verwendung (Eskalationsleiter)
Die Klassifikation bestimmt den Einstieg.
import { classifyPdf, ocr, pdfToImages, pdfToText } from "@/documents";

const art = await classifyPdf(pdf);
if (art === "digital") {
  return await pdfToText(pdf);          // Stufe 1: exakt, kostenlos
}
const seiten = await pdfToImages(pdf, { dpi: 150 });
const text = await ocr(seiten[0].png);  // Stufe 2: CPU-OCR (deutsch, offline)
// Stufe 3 (falls nötig): ai.extract mit seiten[n].png als Bild-Input
Ergebnis (live berechnet)
Fehlerfälle: INVALID_PDF, RENDER_FAILED, OCR_FAILED (DocumentsError).
PDF mit Text-Layer: digital PDF ohne Text-Layer: gescannt
                    Rechnung Nr. 2026-0815 Prüfung der Übergabe Größe und Maß geändert Baker Tilly Boilerplate
                  

pdfToImages (150 DPI): 1240×1755 px PNG, 66 kB

App-Shell

Das Standard-Seitengerüst jedes Tools — diese Seite selbst nutzt es: Kopf mit Tool-Name und Navigation, Benutzer-Menü (nur bei aktivierter Auth), Inhaltsbereich und Fußzeile. Die Navigation ist per Prop überschreibbar; der aktive Eintrag wird automatisch hervorgehoben. Alle Links laufen base-path-bewusst über path().

Verwendung
Eine neue Seite besteht nur aus Shell + Inhalt.
---
import AppShell from "@/layouts/AppShell.astro";

// Optional: eigene Navigation (Label + app-relatives Segment, ohne Slash)
const nav = [
  { label: "Start", href: "" },
  { label: "Berichte", href: "berichte" },
];
---

<AppShell title="Mein Tool" nav={nav}>
  <h1 class="text-2xl font-bold">Inhalt</h1>
  <span slot="footer">Version 1.0</span>
</AppShell>

Diese Seite ist Teil des Boilerplates und kann pro Tool entfernt werden.Zurück zur Startseite