Finance UI

Frontend screens, components, and user flows for the Finance module.

Route Structure

/finance                    → Dashboard (balances overview)
/finance/invoices           → Invoice list
/finance/invoices/:id       → Invoice detail
/finance/payments           → Payment list
/finance/payments/new       → Register payment
/finance/transactions       → Transaction history
/finance/reports            → Report generation

All routes are defined in client/src/routes/finance.js and require the finance.read permission.

Screens

Finance Dashboard (/finance)

The main entry point. Shows a high-level summary of financial status.

Layout:

Section	Component	Description
KPI Cards	Card (x4)	Total revenue, outstanding balance, overdue invoices, payments this month
Balance Chart	Highcharts line	Revenue vs. payments trend (last 12 months)
Recent Activity	Datatable	Last 10 transactions across all customers
Quick Actions	Buttons	"Generate Invoice", "Register Payment", "Export Report"

Store: useFinanceDashboardStore — fetches KPIs and chart data on mount.

Invoice List (/finance/invoices)

Paginated, filterable list of all invoices.

Filters (top bar):

Filter	Component	Description
Customer	FormGenerator select	Search and select customer
Status	FormGenerator select	draft, issued, paid, overdue, cancelled
Date Range	DatePicker	Issued date range

Table columns: Invoice #, Customer, Status (badge), Total, Issued Date, Due Date, Actions

Actions per row:

• View detail
• Download PDF
• Send by email
• Change status

Component: Uses Datatable with server-side pagination.

Invoice Detail (/finance/invoices/:id)

Shows full invoice information with line items.

Layout:

┌──────────────────────────────────────────┐
│  Invoice Header                          │
│  INV-2026-001234  ·  Status: Issued      │
│  Customer: Acme Corp                     │
│  Issued: 2026-03-01  ·  Due: 2026-03-15 │
├──────────────────────────────────────────┤
│  Line Items (Datatable)                  │
│  Description  │  Qty  │  Price  │  Total │
│  ─────────────┼───────┼─────────┼────────│
│  Shipment #..│  1    │  350.00 │ 350.00 │
│  ...         │       │         │        │
├──────────────────────────────────────────┤
│  Subtotal:          $15,000.00           │
│  Tax (16%):          $2,400.00           │
│  Total:             $17,400.00           │
├──────────────────────────────────────────┤
│  Payment History (Datatable)             │
│  Date  │  Amount  │  Method  │  Ref     │
├──────────────────────────────────────────┤
│  Actions: [Download PDF] [Send Email]    │
│           [Register Payment] [Cancel]    │
└──────────────────────────────────────────┘

Register Payment (/finance/payments/new)

Form to register a new payment using FormGenerator.

Form fields:

const fields = computed(() => [
  [
    {
      name: 'customer_id',
      lang: 'finance.customer',
      config: { type: 'search', col: 6 }
    },
    {
      name: 'invoice_id',
      lang: 'finance.invoice',
      config: { type: 'select', options: customerInvoices, col: 6 }
    }
  ],
  [
    {
      name: 'amount',
      lang: 'finance.amount',
      config: { type: 'input-group', prepend: '$', col: 4 },
      rules: { required: true, numeric: true, minValue: 0.01 }
    },
    {
      name: 'method',
      lang: 'finance.payment_method',
      config: {
        type: 'select',
        options: paymentMethods,
        col: 4
      },
      rules: { required: true }
    },
    {
      name: 'reference',
      lang: 'finance.reference',
      config: { type: 'input', col: 4 },
      rules: { required: true }
    }
  ],
  [
    {
      name: 'notes',
      lang: 'finance.notes',
      config: { type: 'textarea', rows: 3, col: 12 }
    }
  ]
]);

Validation flow:

Transaction History (/finance/transactions)

Full transaction ledger with advanced filters.

Filters: Customer, Transaction type, Date range, Billed status

Table columns: Date, Customer, Type (badge), Description, Amount (+/-), Balance After, Invoice #

Features:

• Color-coded amounts: green for credits (payments, refunds), red for debits (charges)
• Export to Excel button (calls /finance/reports/export)
• Click row to expand details

Reports (/finance/reports)

Report generation screen with two main reports.

Report	Description	Filters
Revenue	Revenue by period with chart	Date range, grouping (daily/weekly/monthly)
Aging	Accounts receivable aging	As-of date, aging brackets (30/60/90 days)

Both reports show a Highcharts visualization and a Datatable with the raw data. Each has an "Export to Excel" button.

Store Structure

client/src/stores/finance/
├── dashboard.js        # Dashboard KPIs and chart data
├── invoices.js         # Invoice CRUD and generation
├── payments.js         # Payment registration and listing
├── transactions.js     # Transaction history and filters
└── reports.js          # Report data and export

All stores follow the pattern:

• fetch*() actions that call the API service
• items, pagination, loading state
• filters reactive object for query params

Service Layer

client/src/services/finance/
└── financeService.js    # All API calls for the finance module

Uses Axios with the standard interceptors for auth and error handling defined in the base service layer.

Module-Specific Components

The Finance module reuses shared components (Card, Datatable, FormGenerator, Modal) and adds a few module-specific ones:

Component	Location	Description
BalanceCard	components/finance/BalanceCard.vue	Displays customer balance with color coding
InvoiceStatusBadge	components/finance/InvoiceStatusBadge.vue	Badge with status color mapping
TransactionTypeBadge	components/finance/TransactionTypeBadge.vue	Badge for transaction types
AmountCell	components/finance/AmountCell.vue	Green/red formatted currency cell