Account management
Connected account workflow
https://fve.meiermade.com/components/page-examples/account-management?destination=ledger-reports
Ledger
Workspace
Meier Made
Reports
Operating checking · USD
Operating checking
Closing balance · USD · April–September 2026
ActualPlan
$50k$40k$30k$20k$10k$0k
AprMayJunJulAugSep
View balance data
| Month | Actual | Plan |
|---|---|---|
| Apr | Actual$24,200.00 | Plan$24,200.00 |
| May | Actual$28,100.00 | Plan$27,000.00 |
| Jun | Actual$26,400.00 | Plan$30,000.00 |
| Jul | Actual$33,200.00 | Plan$33,000.00 |
| Aug | Actual$35,800.00 | Plan$36,000.00 |
| Sep | Actual$38,442.11 | Plan$40,000.00 |
| Select all | Date | Description | Status | Accounts | Amount | Actions |
|---|---|---|---|---|---|---|
| DateJul 28 | Northwind payment | StatusVerified | AccountsAccounts receivable → Operating checking | Amount$4,800.00 | ||
| DateJul 27 | Cloud hosting | StatusVerified | AccountsOperating checking → Software expense | Amount$386.42 | ||
| DateJul 26 | ACH withdrawal | StatusUnverified | AccountsOperating checking → Placeholder | Amount$1,240.00 | ||
| DateJun 24 | Office supplies | StatusCommitted | AccountsBusiness card → Office expense | Amount$128.19 |
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
type ShellDestination =
| LedgerHome
| LedgerAccounts
| LedgerAccount of int
| LedgerTransaction of int
| LedgerCreateAccount
| LedgerReports
| LedgerSettings
| TreasuryHome
| TreasuryPeriod of string
| TreasuryTransactions
| TreasuryPayees
| TreasuryAccounts
let private shellDestinationKey = function
| LedgerHome -> "ledger-home"
| LedgerAccounts -> "ledger-accounts"
| LedgerAccount id -> $"ledger-account-{id}"
| LedgerTransaction id -> $"ledger-transaction-{id}"
| LedgerCreateAccount -> "ledger-create-account"
| LedgerReports -> "ledger-reports"
| LedgerSettings -> "ledger-settings"
| TreasuryHome -> "treasury-home"
| TreasuryPeriod region -> $"treasury-period-{region.ToLowerInvariant()}"
| TreasuryTransactions -> "treasury-transactions"
| TreasuryPayees -> "treasury-payees"
| TreasuryAccounts -> "treasury-accounts"
let shellDestinationUrl destination =
$"/components/page-examples/account-management?destination={shellDestinationKey destination}"
let ledgerShellExample resolve navigation content =
AppShell.create "ledger-app-shell" navigation content
|> AppShell.withTheme (
ComponentsTheme.sky
|> ComponentsTheme.withRadius Radius.Large
|> ComponentsTheme.withDensity Density.Compact
|> ComponentsTheme.withControlSize ControlSize.Small)
|> AppShell.withBoundary AppShellBoundary.Container
|> AppShell.withMobileBottomNavigation "ledger-bottom-navigation" "Ledger quick navigation" [
BottomNavigationItem.create LedgerHome "Dashboard"
BottomNavigationItem.create LedgerAccounts "Accounts"
BottomNavigationItem.create LedgerReports "Reports"
BottomNavigationItem.create LedgerSettings "Settings" ]
|> AppShell.asPreview "Ledger application preview"
|> AppShell.render resolve
let treasuryShellExample resolve navigation content =
AppShell.create "treasury-app-shell" navigation content
|> AppShell.withTheme (
ComponentsTheme.emerald
|> ComponentsTheme.withRadius Radius.Medium
|> ComponentsTheme.withDensity Density.Compact
|> ComponentsTheme.withControlSize ControlSize.Small)
|> AppShell.withBoundary AppShellBoundary.Container
|> AppShell.withMobileBottomNavigation "treasury-bottom-navigation" "Treasury quick navigation" [
BottomNavigationItem.create TreasuryHome "Overview"
BottomNavigationItem.create TreasuryTransactions "Transactions"
BottomNavigationItem.create TreasuryPayees "Payees"
BottomNavigationItem.create TreasuryAccounts "Accounts" ]
|> AppShell.asPreview "Treasury application preview"
|> AppShell.render resolve