Account management
Connected account workflow
https://fve.meiermade.com/components/page-examples/account-management?destination=treasury-period-july
Treasury
Workspace
Meier Made
Overview
Meier Made cash management
Operating balance
$38,442.11
USD · Available cash
Upcoming transactions
Payments expected before the current period closes.
- Aug 15 · PayrollReady
- Aug 18 · Cloud hostingScheduled
Completed transactions
Jul 28 · Northwind payment$4,800.00
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