Page
With local navigation
Transactions
Review scheduled and completed cash activity.
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
let transactionsPage topBar tabs =
PageHeader.create "Transactions"
|> PageHeader.withSubtitle "Review scheduled and completed cash activity."
|> fun pageHeader -> Page.create pageHeader empty
|> Page.withTopBar topBar
|> Page.withTabs tabs
|> Page.withWidth PageWidth.Wide
|> Page.withBodyLayout PageBodyLayout.Padded
let renderTransactionsPage resolve topBar tabs =
transactionsPage topBar tabs |> Page.render resolveRemaining-height canvas
Posting flow
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let canvasPage () =
let graph =
div {
_role "region"
_ariaLabel "Posting flow canvas"
_tabindex 0
_class "h-full overflow-auto"
_dataSignals "{postingZoom: 1}"
div {
_class "flex items-center gap-2 p-3"
Button.create "Zoom in" |> Button.withAttributes [ _dataOn ("click", "$postingZoom = Math.min(2, $postingZoom + 0.25)") ] |> Button.render
Button.create "Zoom out" |> Button.withAttributes [ _dataOn ("click", "$postingZoom = Math.max(0.5, $postingZoom - 0.25)") ] |> Button.render
output { _ariaLabel "Zoom level"; _dataText "Math.round($postingZoom * 100) + '%'"; "100%" }
}
div {
_style "width:1000px;height:600px;transform-origin:top left"
_dataAttr ("style", "'width:' + (1000 * $postingZoom) + 'px;height:' + (600 * $postingZoom) + 'px'")
raw """<svg role="img" aria-label="Posting flow from receivables through operating checking to payroll" viewBox="0 0 1000 600" width="100%" height="100%"><path d="M260 230H390M610 230H740" stroke="var(--fve-border)" stroke-width="3"/><g fill="var(--fve-surface)" stroke="var(--fve-border)"><rect x="40" y="190" width="220" height="80" rx="8"/><rect x="390" y="190" width="220" height="80" rx="8"/><rect x="740" y="190" width="220" height="80" rx="8"/></g><g fill="var(--fve-text)" font-size="16" text-anchor="middle"><text x="150" y="236">Receivables</text><text x="500" y="236">Operating checking</text><text x="850" y="236">Payroll</text></g></svg>"""
}
}
Page.create (PageHeader.create "Posting flow") graph
|> Page.withBodyLayout PageBodyLayout.Canvas