SaaS dashboard design - v0 by Vercel

SaaS dashboard design - v0 by VercelSaaS dashboard design - v0 by Vercel

Create a modern SaaS dashboard for "selfTAX" — Austrian tax app for self-employed.

Design: Background #fcf9f8, cards white border #e8e4e1 radius-16px, accent #008177 teal, text #141316, font Inter. No emojis. Tailwind CSS.

Sections:

Header: "Guten Tag, Max" + date "Samstag, 5. April 2026" + buttons "Neue Rechnung", "Neuer Beleg", "Export PDF"
4 metric cards: Umsatz 24.850,00 EUR (green), Ausgaben 8.320,50 EUR (red), Gewinn 16.529,50 EUR (green), Offene Rechnungen 3.200,00 EUR (orange)
Monthly revenue line chart (teal line, minimal)
Recent invoices table: Nummer, Kunde, Betrag, Status (bezahlt/gesendet/ueberfaellig), Datum
Tax deadlines: UVA 15.05.2026, ESt 15.05.2026

All text German. Mobile responsive. shadcn/ui + Tailwind.

Show full message

34d ago

Now let me build the full dashboard. I'll create multiple focused component files.

Now I'll update globals.css, layout.tsx, and build all dashboard components in parallel.

Now let me build all the dashboard components:

Now let me write the main page:

The selfTAX dashboard is complete. Here's what was built across 6 focused components:

SidebarNav — collapsible sidebar with logo, nav links, and user profile; hamburger menu on mobile
DashboardHeader — greeting with date + 3 action buttons (Neue Rechnung, Neuer Beleg, Export PDF)
MetricCards — 4 KPI cards (Umsatz green, Ausgaben red, Gewinn green, Offene Rechnungen orange) with trend indicators
RevenueChart — full-year teal line chart using Recharts with a German-formatted custom tooltip
InvoicesTable — 6-row table with bezahlt/gesendet/ueberfaellig status badges, hover states, and a mobile-optimized card list
TaxDeadlines — UVA, ESt, SV deadlines with color-coded urgency pills and a warning footer

34d ago

Create a modern SaaS dashboard for "selfTAX" — Austrian tax app for self-employed.

Design: Background #fcf9f8, cards white border #e8e4e1 radius-16px, accent #008177 teal, text #141316, font Inter. No emojis. Tailwind CSS.

Sections:

Header: "Guten Tag, Max" + date "Samstag, 5. April 2026" + buttons "Neue Rechnung", "Neuer Beleg", "Export PDF"
4 metric cards: Umsatz 24.850,00 EUR (green), Ausgaben 8.320,50 EUR (red), Gewinn 16.529,50 EUR (green), Offene Rechnungen 3.200,00 EUR (orange)
Monthly revenue line chart (teal line, minimal)
Recent invoices table: Nummer, Kunde, Betrag, Status (bezahlt/gesendet/ueberfaellig), Datum
Tax deadlines: UVA 15.05.2026, ESt 15.05.2026

All text German. Mobile responsive. shadcn/ui + Tailwind.

Show full message

34d ago

Now let me build the full dashboard. I'll create multiple focused component files.

Now I'll update globals.css, layout.tsx, and build all dashboard components in parallel.

Now let me build all the dashboard components:

Now let me write the main page:

The selfTAX dashboard is complete. Here's what was built across 6 focused components:

SidebarNav — collapsible sidebar with logo, nav links, and user profile; hamburger menu on mobile
DashboardHeader — greeting with date + 3 action buttons (Neue Rechnung, Neuer Beleg, Export PDF)
MetricCards — 4 KPI cards (Umsatz green, Ausgaben red, Gewinn green, Offene Rechnungen orange) with trend indicators
RevenueChart — full-year teal line chart using Recharts with a German-formatted custom tooltip
InvoicesTable — 6-row table with bezahlt/gesendet/ueberfaellig status badges, hover states, and a mobile-optimized card list
TaxDeadlines — UVA, ESt, SV deadlines with color-coded urgency pills and a warning footer

34d ago