Komponenten
Wiederverwendbare UI-Bausteine im Baker-Tilly-Design für interne Tools.
Aktive Nutzer
vs. Vormonat
Offene Freigaben
vs. Vormonat
Dokumente
diese Woche
Wartet auf Freigabe
unverändert
Gelesen
Gültig
werden übernommen
Mit Problemen
werden übersprungen
Fachliche Kompositionen
Muster für Fristen, Akten und Prüfbefunde aus der Gestaltungsreferenz. Illustrative Beispieldaten · Stand 19. Oktober 2026.
Anstehende Fristen
Umsatzsteuer-Voranmeldung Q3
Morgen fälligKronberg Maschinenbau GmbH · Marie König
Prüfbefund ansehenStammdaten abgleichen
ErledigtKronberg Maschinenbau GmbH · Marie König
Leerer und fehlerhafter Zustand
Keine offenen Fristen
Alle Termine sind erledigt. Neue Fristen erscheinen hier.
Mandanten- und Aktenkopf
Kronberg Maschinenbau GmbH
Steuerberatung · Akte ST-2026-0184
- Verantwortlich
- Marie König
- Vertretung
- Thomas Beck
- Aktualisiert
- 16. Oktober 2026, 14:32 Uhr
Prüfbefund mit nächster Aktion
Nächster Schritt: Beleg und Buchungszeitraum gemeinsam abgleichen.
Zuständigkeit in der Akte ansehenGeklärter Zustand
Marie König hat den Leistungszeitraum bestätigt. Die Prüfung ist abgeschlossen.
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.
Formulare & Navigation
E-Mail bei neuen Freigaben
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.
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-Prop am PageHeader.
<PageHeader
title="Vorgang bearbeiten"
breadcrumb={[
{ label: "Vorgänge", href: path("vorgaenge") },
{ label: vorgang.id },
]}
/>DataTable rendert sie über filters. Die Demo verlinkt echt auf die Vorgangsliste.
Arbeitsbereiche:Vorgänge
- ✓Hochladen
- 2Prüfen
- 3Übernehmen
In einem PageHeader den Slot steps nutzen; die Hauptaktion gehört inactions.
- Kreditor
- 10023481
- Kostenstelle
- 4410 — Technik
- Zahlungsziel
- 21.08.2026 (14 Tage netto)
- SMTP · nicht konfiguriert
:checked.
Field-Fehler.
2 Felder konnten nicht gespeichert werden
Serverseitige Validierung (Zod) — die übrigen Eingaben bleiben erhalten.
queryAuditVerlauf ).
- RP-2026-0431 eskaliert · Fährmann Energie AG · 08:54
- Import „SAP-Export KW33“ übernommen — 214 Zeilen · 08:31
- T. Kern freigegeben (Rolle: Nutzer) · 08:12
- 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.
<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= 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.
| Name | Rolle | Status | Anmeldungen | |
|---|---|---|---|---|
| Mia Schmidt | mia.schmidt@bakertilly.de | Admin | Aktiv | 142 |
| Leon Weber | leon.weber@bakertilly.de | Nutzer | Aktiv | 38 |
| Hannah Meyer | hannah.meyer@bakertilly.de | Nutzer | Wartet | 0 |
| Felix Wagner | felix.wagner@bakertilly.de | Nutzer | Gesperrt | 12 |
| Sophie Klein | sophie.klein@bakertilly.de | Admin | Aktiv | 221 |
| Jonas Bauer | jonas.bauer@bakertilly.de | Nutzer | Aktiv | 57 |
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.
---
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.
| Name | Rolle | |
|---|---|---|
Noch keine NutzerLaden 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).
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 }AI_INVALID_JSON, AI_SCHEMA_VIOLATION, AI_DISABLED.
{
"lieferant": "Muster GmbH",
"rechnungsnummer": "RE-2026-0815",
"betragEur": 1190.5
}
validiert gegen Zod-SchemaDokumente (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).
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-InputINVALID_PDF, RENDER_FAILED, OCR_FAILED (DocumentsError).
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().
---
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