Connected account workflow
https://fve.meiermade.com/components/page-examples/account-management?destination=ledger-transaction-202 Cloud hosting
Transaction details
- Transaction ID
- 202
- Date
- Jul 27
- Status
- Verified
- Accounts
- Operating checking → Software expense
- Amount
- $386.42
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