Section
With heading and actions
Upcoming transactions
Payments expected before the current period closes.
- Aug 15 · PayrollReady
- Aug 18 · Cloud hostingScheduled
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 private upcomingPayments =
let actions =
ActionCluster.create "upcoming-payment-actions" [
ApplicationAction.link TreasuryPayees "View payees" ]
|> ActionCluster.withOverflow [
MenuItem.link TreasuryAccounts "View accounts" ]
let header =
SectionHeader.create "Upcoming transactions"
|> SectionHeader.withDescription "Payments expected before the current period closes."
|> SectionHeader.withActions actions
Section.create header (
ul {
_role "list"
_class "divide-y divide-[var(--fve-border)]"
li { _class "flex items-center justify-between gap-4 py-3 text-sm"; span { "Aug 15 · Payroll" }; Status.positive "Ready" }
li { _class "flex items-center justify-between gap-4 py-3 text-sm"; span { "Aug 18 · Cloud hosting" }; Status.create "Scheduled" |> Status.withTone Tone.Informative |> Status.render }
})
|> Section.render shellDestinationUrlWithout a visible heading
Amounts reflect the current accounting period.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let periodNote =
Section.withoutHeader "Period note" (p { _class "text-sm text-[var(--fve-muted-text)]"; "Amounts reflect the current accounting period." })
|> Section.render id