ImmoSystem24 DS

Karten & Kennzahlen

Dieselben Dashboard-Karten wie die Produktdemo, gespeist aus der gemeinsamen fiktiven Datenbasis.

FinanceCard

Komposition
Cashflow
700,00 €
Erhaltene Mieten
1.200,00 €
Ausgaben
500,00 €

Import

import { FinanceCard } from "@/components/domain/dashboard-cards"

Basis: card, chart (Recharts), toggle, date-range-picker

Verwendung

  • Eine zusammenhängende Finanzkarte statt KPI-Reihe; Cashflow 32/40, Insets 24/32; Umbruch nach Kartenbreite (< 640 / < 400 px).
  • Hülle ChartPanel: Kopf, 40 px Luft, Plot 200 px, 24 px, Zeitraum im 56-px-Footer; Tabellenalternative per Umschalter.
  • Werte ausschließlich aus Selektoren (periodSummary, dashboardSeries: ≤ 7 Tage Tagesbalken, sonst Monatsbalken).

DashCard · InsetStat · StatRowLink

Komposition
Offene Mieten
Ausstehender Betrag
1.300,00 €
Belegung
Belegte Einheiten
3 / 4 · 75 %

Import

import { DashCard, InsetStat, StatRowLink, OccupancyBar } from "@/components/domain/dashboard-cards"

Basis: card, badge, progress

Verwendung

  • Kartenkopf 20/28, flache graue Kennzahlfläche ohne verschachtelte Karte.
  • Statuszeilen: Badge + Betrag + Chevron, Link in gefilterte Liste.
  • Überfällig/teilbezahlt sind Teilmengen von Offen (Label „Davon …“).

Card

shadcn/ui · card
Lindenstraße 12
Berlin · 24 Einheiten
Mehrfamilienhaus, Baujahr 1998.
Belegung
75 %
Alle Einheiten

Import

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card"

Verwendung

  • Radius 12, Rahmen 1 px rgba(6,3,20,.17), Schatten 0 1px 6px rgba(6,3,20,.10).
  • Innenabstand 20/24/24; Kopf 20/28 · 500.
  • Footer-Link 13/20 · 500.

Kennzahlenkarte (zusätzliche Variante)

Komposition
Erhaltene Mieten
1.200,00 €
Gewählter Zeitraum
Offen
1.300,00 €
2 überfällig

Import

import { KpiCard } from "@/components/domain/kpi-card"

Basis: card, badge

Verwendung

  • Zusatzvariante für Einzelkennzahlen; Produktseiten nutzen FinanceCard/DashCard statt KPI-Reihen.
  • KPI 32/40 · 600, kompakt 24/32 · 600.
  • Trend immer mit Icon und Text.
Item
shadcn/ui · item
Mietvertrag_WE03.pdf

Hochgeladen am 12.10.2026

Import

import { Item, ItemMedia, ItemContent, ItemTitle } from "@/components/ui/item"

Verwendung

  • Listenzeilen mit Medium, Inhalt und Aktionen.
  • Als Link mit asChild klickbar machen.
Avatar
shadcn/ui · avatar
Größen
ABJWLS

Import

import { Avatar, AvatarFallback } from "@/components/ui/avatar"

Verwendung

  • Fiktive Personen: Initialen statt Fotos.
  • Name immer daneben als Text.
Badge
shadcn/ui · badge
Badge
Primär
Sekundär
Outline
Status
Bezahlt
Fällig
Überfällig
In Prüfung
Entwurf

Import

import { Badge } from "@/components/ui/badge" · StatusBadge aus @/components/compositions/status-badge

Verwendung

  • Status-Badges 24 px, Padding 2×8, 12/16 · 500.
  • Status nie nur über Farbe – Icon + Text.
Separator
shadcn/ui · separator
Objekte
Einheiten
Mieter

Import

import { Separator } from "@/components/ui/separator"

Verwendung

  • Trennt Gruppen, nicht einzelne Zeilen.
  • Vertikal in Werkzeugleisten.
Made by Loui Augst