Steps
Period-close steps
Enter a reconciliation note before continuing. The current step has not changed.
Reconciliation is ready for server validation.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let periodCloseStepsExample =
div {
_dataSignals "{stepnote: '', stepattempted: false}"
_class "grid gap-4"
Steps.create "Period close progress"
[ Step.create "Review balances" StepState.Complete
|> Step.withDestination "/components/collection"
Step.create "Reconcile statements" StepState.Current
|> Step.withDescription "Resolve the remaining statement differences."
Step.create "Post adjustments" StepState.Available
|> Step.withDestination "/components/detail"
Step.create "Close period" StepState.Unavailable ]
|> Steps.render id
Input.create "reconciliationNote" "Reconciliation note"
|> Input.withAttributes [ _dataBind "stepnote" ]
|> Input.required
|> Input.render
Button.create "Continue"
|> Button.withVariant ButtonVariant.Primary
|> Button.withAttributes [ _dataOn ("click", "$stepattempted = true") ]
|> Button.render
p {
_dataShow "$stepattempted && !$stepnote.trim()"
_role "alert"
_class "text-sm text-[var(--fve-critical-text)]"
"Enter a reconciliation note before continuing. The current step has not changed."
}
p {
_dataShow "$stepattempted && $stepnote.trim()"
_role "status"
_class "text-sm text-[var(--fve-positive-text)]"
"Reconciliation is ready for server validation."
}
}