Overview Dashboard
Welcome back, {{ profileData.fullName }}! Here is your business activity summary.
£430.05
2 completed payments
£997.50
2 overdue invoices
£0.00
All clear
Recent Payments
INV-27 · Monika
Card · 10 Jul 2026
INV-25 · Brilliant motors
Bank transfer · 3 Jul 2026
Frequently Used Actions
Create new billing documents or register new customers instantly.
Invoices & Documents
Manage, create, and track all your billing documents.
{{ inv.code }}
{{ inv.status }}Created {{ inv.issueDate }}
{{ inv.customerName }}
{{ inv.customerEmail }}
Recurring Invoices
Automate repeat invoices on weekly, monthly, or yearly schedules.
{{ rec.title }}
Client: {{ rec.customer }}
| Schedule Title | Customer | Frequency | Amount | Next Run | Status | Actions |
|---|---|---|---|---|---|---|
| {{ rec.title }} | {{ rec.customer }} | {{ rec.frequency }} | £{{ rec.amount.toFixed(2) }} | {{ rec.nextRun }} | {{ rec.status }} |
Items & Services Catalog
Manage products, billable rates, and service packages.
{{ item.name }}
{{ item.description }}
| Item Name | Category | Description | Unit | Price | Actions |
|---|---|---|---|---|---|
|
|
{{ item.category }} | {{ item.description }} | per {{ item.unit }} | £{{ item.unitPrice.toFixed(2) }} |
Business Directory & Clients
Keep track of client contact details, billing addresses, and metrics.
| Client Name | Phone | Outstanding | Total Billed | Actions | |
|---|---|---|---|---|---|
|
{{ c.name.charAt(0) }}
{{ c.name }}
|
{{ c.email }} | {{ c.phone }} | £{{ c.outstanding.toFixed(2) }} | £{{ c.totalBilled.toFixed(2) }} |
Financial Reports & Insights
Real-time revenue performance, collection metrics, and invoice distribution.
£12,480.00
+18.4% vs last year
4.2 Days
Faster than 85% benchmark
7.9%
2 Overdue Invoices
£283.60
Across 44 billed documents
Monthly Revenue Trend (2026)
Monthly billed vs actual collected revenue
Invoice Status Breakdown
Distribution by current state
Invoicer SaaS Design System
Complete UI architecture, component primitives, custom form controls, typography scales, custom-styled vector dropdowns, color tokens, and notification states powering the Invoicer platform.
Color Palette & Tokens
Primary brand purple scale, functional feedback colors, and surfaces.
Primary Brand Scale (Brand Purple)
{{ step }}
{{ hex }}
Functional & State Colors
{{ c.name }}
{{ c.hex }}
Typography Scale (Inter & JetBrains Mono)
Strict typographic scale and letter-spacing specifications.
Invoice #INV-2026-99
Financial Reports & Overview
Client Billing Address & Tax ID
All payments must be made within 14 days of invoice issuance. Late invoices incur standard interest fees according to account tier.
POST /v2/invoices/create { "amount": 430.05, "currency": "GBP" }
Custom Dropdowns & Form Controls
Custom vector select dropdowns, search inputs, active focus rings, and checkbox states.
Includes brand-purple vector arrow indicator and smooth focus ring.
Designed for dark surface panels or contrast header elements.
Soft purple surface with left icon anchor.
Please enter a valid email address.
Tabs & Segmented Controls
Pill filter bar switches, grid/list mode toggles, and underline tab bars.
Status Badges & Indicator Pills
Contextual indicators for invoice payment states and system tiers.
Alert Banners & Interactive Toast Tester
Test live system toast messages and view alert callouts.
Cards & Surface Containers
Card structures, purple hero gradients, and hover elevations.
135° Linear Gradient
Used for high-priority financial metrics and call-to-actions.
Elevated Surface
Bordered container with brand purple subtle box shadow.
Brand Tinted Background
Used for quick hubs, onboarding tips, and side insights.
Avatars & User Cards
Avatar sizes, initial badges, and stacked client avatars.
{{ profileData.fullName }}
{{ profileData.role }} · {{ profileData.company }}
Personal & Business Details
Security & Authentication
Two-Factor Authentication (2FA)
Add an extra layer of security using an authenticator app.
Archived Documents
Historical billing records stored for reference or compliance.
{{ arch.code }}
ARCHIVED{{ arch.customer }} · Archived on {{ arch.archivedDate }}
Account & Business Settings
Configure business branding, payment defaults, and preferences.
Company Information
Help Center & FAQ
Need assistance? Explore common guides or reach our dedicated support team.
{{ faq.q }}
{{ faq.a }}