ImmoSystem24 DS

Fachmuster

Immobilienspezifische Kompositionen aus shadcn-Bausteinen. Alle Beispiele lesen die gemeinsame fiktive Datenbasis (Stichtag 16.10.2026).

PropertyCard, PropertyRow, PropertyHeader
Komposition

Hofgarten 12

Hofgarten 12, 12345 Musterstadt · Mehrfamilienhaus · 150 m² · P1

1 von 3 leer
1 überfällig
Hofgarten 12
Hofgarten 12, 12345 Musterstadt
1 von 3 leer
1 überfällig
Einheiten
2/3 belegt
Fläche
150 m²
Soll
1.650,00 €
Offen
450,00 €
Parkblick 8
Parkblick 8, 12347 Musterstadt
Vollvermietet
1 überfällig
Einheiten
1/1 belegt
Fläche
55 m²
Soll
850,00 €
Offen
850,00 €
Parkblick 8

Parkblick 8, 12347 Musterstadt · Wohnung

1/1 belegt55 m²Offen 850,00 €
Vollvermietet
1 überfällig

Import

import { PropertyCard, PropertyRow, PropertyHeader } from "@/components/domain/property"

Basis: card, item, separator, status-badge

Verwendung

  • Leerstand und Rückstand immer als Text-Badge.
  • Werte kommen aus propertyStats() – keine Eingabe fester Zahlen.
  • `title` nimmt einen Link der Seite auf.
UnitRow
Komposition
U1 · Whg. 1 · EG links

60 m² · 2 Zimmer · Erdgeschoss

Anna Beispiel900,00 € / Monat
Belegt
Bezahlt
U3 · Whg. 3 · DG

40 m² · Zimmer: Noch nicht erfasst · Dachgeschoss

Kein aktives Mietverhältnis0,00 €
Leer
U4 · Whg. 4 · 2. OG

55 m² · 2 Zimmer · Lage: Noch nicht erfasst

Clara Demo850,00 € / Monat
Belegt
Überfällig

Import

import { UnitRow } from "@/components/domain/rent"

Basis: item, status-badge

Verwendung

  • Belegt zeigt Person und Soll, leer zeigt 0,00 € und keine Forderung.
  • Fehlende Zimmerzahl/Lage → „Noch nicht erfasst“.
PersonSummary, TenancySummary
Komposition
AB
Anna Beispiel

Mieter:in

anna.beispiel@example.invalid0000 111111
CD
Clara Demo
Daten unvollständig

Mieter:in

Noch nicht erfasstNoch nicht erfasst
T1 · Whg. 1 · EG links
Aktiv
Anna Beispiel
Beginn
01.04.2023
Ende
Unbefristet
Monatliches Soll
900,00 €
Kaution
2.700,00 €
Fläche
60 m²
Zimmer
2
T3 · Whg. 4 · 2. OG
Aktiv
Clara Demo
Beginn
01.11.2025
Ende
Unbefristet
Monatliches Soll
850,00 €
Kaution
Noch nicht erfasst
Fläche
55 m²
Zimmer
2

Import

import { PersonSummary, TenancySummary } from "@/components/domain/people"

Basis: avatar, item, card

Verwendung

  • Unvollständige Kontaktdaten werden markiert, nie geraten.
  • Kaution fehlt → „Noch nicht erfasst“.
RentSummary, PaymentRow
Komposition
Oktober 2026 (Zeitraum)
Soll
2.500,00 €
Erhalten
1.200,00 €
Offen
1.300,00 €
Eingangsquote 48 %
2 überfällige Forderungen
R-2026-10-U1

Anna Beispiel · Whg. 1 · EG links · fällig 03.10.2026

Soll
900,00 €
erhalten
900,00 €
offen
0,00 €
Bezahlt
R-2026-10-U2

Ben Muster · Whg. 2 · 1. OG · fällig 03.10.2026

Soll
750,00 €
erhalten
300,00 €
offen
450,00 €
Teilbezahlt · überfällig
R-2026-10-U4

Clara Demo · Whg. 4 · 2. OG · fällig 03.10.2026

Soll
850,00 €
erhalten
0,00 €
offen
850,00 €
Überfällig
R-2026-10-U4 (Ansicht vor Fälligkeit: offen)

Clara Demo · Whg. 4 · 2. OG · fällig 03.10.2026

Soll
850,00 €
erhalten
0,00 €
offen
850,00 €
Offen

Import

import { RentSummary, PaymentRow } from "@/components/domain/rent"

Basis: card, progress, item, status-badge

Verwendung

  • Erhalten = tatsächlich eingegangene Zahlungen.
  • Teilzahlung nach Fälligkeit bleibt überfällig.
  • Status: Bezahlt, Offen, Teilbezahlt, Überfällig – immer mit Icon und Text.
TaskRow, TaskCard
Komposition
Rückstand U2 prüfen

A1 · Hofgarten 12 · U2 · Frist 10.10.2026

Offen · überfällig
Hohe Priorität
Unterlagen P2 ergänzen

A2 · Parkblick 8 · Frist 20.10.2026

In Bearbeitung
Normale Priorität
Zählerstand U1 erfassen

A3 · Hofgarten 12 · U1 · Frist 05.10.2026

Erledigt
Niedrige Priorität
In Bearbeitung
Normale Priorität
Unterlagen P2 ergänzen
A2 · Parkblick 8
Frist
20.10.2026
Angelegt
01.10.2026
Beschreibung
Noch nicht erfasst
Offen · überfällig
Hohe Priorität
Rückstand U2 prüfen
A1 · Hofgarten 12 · U2
Frist
10.10.2026
Angelegt
06.10.2026
Beschreibung
Teilzahlung Oktober klären und Rest einfordern.

Import

import { TaskRow, TaskCard } from "@/components/domain/work"

Basis: item, card, badge, status-badge

Verwendung

  • Priorität und Status getrennt, beide mit Text.
  • Überfällig nur, wenn nicht erledigt.
  • Erledigt bleibt filterbar.
DocumentRow, DocumentPreview
Komposition
Mietvertrag_Whg1_Beispiel.pdf

Vertrag · PDF · 471 KB · 20.03.2023

Hofgarten 12 · U1
Demo-Dokument.pdf

Sonstiges · PDF · 117 KB · 14.10.2026

Nicht zugeordnet

Simulierte Vorschau

Fiktives Demo-Dokument – es gibt keinen echten Dateiinhalt.

Dateiname
Nebenkostenabrechnung_2025_Hofgarten12.pdf
Kategorie
Abrechnung
Typ / Größe
PDF · 311 KB
Datum
12.05.2026
Objekt
Hofgarten 12
Einheit / Mietverhältnis
Noch nicht erfasst

Import

import { DocumentRow, DocumentPreview } from "@/components/domain/work"

Basis: item, badge, status-badge, facts

Verwendung

  • Vorschau ist sichtbar als simuliert gekennzeichnet.
  • Nicht zugeordnete Dokumente tragen einen Hinweis-Badge.
ActivityTimeline
Komposition

  1. Ausgabe 500,00 € Hausmeister & Reinigung erfasst

    · P1

  2. Dokument „Demo-Dokument.pdf“ eingegangen, noch nicht zugeordnet

    · D3

  3. Aufgabe „Rückstand U2 prüfen“ angelegt

    · A1

  4. Aufgabe „Zählerstand U1 erfassen“ abgeschlossen

    · A3

Noch keine Aktivitäten
Änderungen erscheinen hier.

Import

import { ActivityTimeline } from "@/components/domain/work"

Basis: empty, lucide

Verwendung

  • Einträge referenzieren Datensatz-IDs.
  • Neueste zuerst; Datum TT.MM.JJJJ, 24 h.
LinkedRecordPicker
Komposition

Gewählt: U2

Import

import { LinkedRecordPicker, linkedRecords } from "@/components/domain/linked-record-picker"

Basis: combobox (popover + command)

Verwendung

  • Gruppiert nach Immobilien/Einheiten; Suche, leeres Ergebnis und Zurücksetzen aus der Combobox.
  • Liefert stabile IDs.
Checklist, Stepper
Komposition
Wohnungsübergabe1 von 3 erledigt
Objektdaten P2 (lesend)1 von 2 erledigt
  1. Hochgeladen
  2. 2ZuordnenObjekt wählen
  3. 3Abgelegt

Import

import { Checklist, Stepper } from "@/components/domain/work"

Basis: checkbox, progress

Verwendung

  • Bedienbar mit onToggle, sonst lesend.
  • Stepper markiert den aktuellen Schritt mit aria-current.
NoticeCard
Komposition

Import

import { NoticeCard } from "@/components/domain/work"

Basis: alert, status-badge (Tonwerte)

Verwendung

  • Ton passend zur Bedeutung: info, success, warning, danger.
  • Höchstens eine Aktion.
Made by Loui Augst