kit

Home

Built revision v17.10.0

Phoenix
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Home

Open the whole page

Source
<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Home</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions>
    <Kit.Phoenix.Roles.PrimaryAction.primary_action id="home-new-invoice" phx-click={Kit.Phoenix.Modal.open("home-new-invoice-dialog")}>New invoice</Kit.Phoenix.Roles.PrimaryAction.primary_action>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="home-new-booking" phx-click={Kit.Phoenix.Modal.open("home-new-booking-dialog")}>New booking</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="home-new-hirer" phx-click={Kit.Phoenix.Modal.open("home-new-hirer-dialog")}>New hirer</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="home-new-room" phx-click={Kit.Phoenix.Modal.open("home-new-room-dialog")}>New room</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
    <Kit.Phoenix.Roles.ActionMenu.action_menu id="home-creates" label="More New actions" groups={[]} />
    <a href="../layout-home/#layout-home">{@owner}</a>
  </:actions>
  <:body>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()}>
      <:attention rest={%{"aria-labelledby": "attention-title"}} heading="Needs your attention" heading_rest={%{id: "attention-title"}}>
        <Kit.Phoenix.Roles.AttentionItem.attention_item>
          <:subject>Oakmere Primary School invoice</:subject>
          <:standing>Failed: the recipient’s address was refused.</:standing>
          <:urgency>Correct before sending again.</:urgency>
          <:route href="../record/">Review the invoice</:route>
        </Kit.Phoenix.Roles.AttentionItem.attention_item>
      </:attention>
      <:measures>
        <Kit.Phoenix.Roles.FactGroup.fact_group>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))]), Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1872.00"))), Kit.Phoenix.Words.text(" previous period · Up "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "224.00")))])]}>
            <:name>Invoiced</:name>
            <:value id="home-invoiced" href="../reports/?report=income&period=last_month&measure=invoiced" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "2096.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))]), Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1580.00"))), Kit.Phoenix.Words.text(" previous period · Down "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "236.00")))])]}>
            <:name>Collected</:name>
            <:value id="home-collected" href="../reports/?report=income&period=last_month&measure=collected" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1344.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        </Kit.Phoenix.Roles.FactGroup.fact_group>
      </:measures>
      <:assigned_upcoming rest={%{id: "home-assigned", "aria-labelledby": "assigned-title"}} heading="Assigned to you" heading_rest={%{id: "assigned-title"}}>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../record/">Oakmere Primary School</:subject>
          <:facts>Review billing details</:facts>
          <:facts>Today</:facts>
        </Kit.Phoenix.Roles.Row.row>
      </:assigned_upcoming>
      <:followed_changes rest={%{"aria-labelledby": "changes-title"}} heading="Followed changes" heading_rest={%{id: "changes-title"}}>
        <Kit.Phoenix.Roles.ListLine.list_line>
          <:name href="../record/">Oakmere Primary School</:name>
          <:description>Maya corrected the billing contact</:description>
          <:age>Just now</:age>
        </Kit.Phoenix.Roles.ListLine.list_line>
      </:followed_changes>
    </Kit.Phoenix.Layouts.Home.home>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-invoice-dialog" aria-labelledby="home-new-invoice-title">
      <:heading rest={%{id: "home-new-invoice-title"}}>New invoice</:heading>
      <:form_groups>
        <form id="home-new-invoice-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="home-new-invoice-hirer">
            <:label>Hirer</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium" binding={binding} name="hirer" none="No hirers match." query_event="search_hirers" recent={[
                %Kit.Phoenix.Roles.RecordPicker.Record{id: "priya-shah", name: ["Priya Shah"], fact: "Leeds"},
                %Kit.Phoenix.Roles.RecordPicker.Record{id: "tom-reid", name: ["Tom Reid"], fact: "York"}
              ]} />
            </:control>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-invoice-form"}}>Create invoice</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-booking-dialog" aria-labelledby="home-new-booking-title">
      <:heading rest={%{id: "home-new-booking-title"}}>New booking</:heading>
      <:form_groups><form id="home-new-booking-form"><Kit.Phoenix.Roles.FormGroup.form_group id="home-new-booking-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}><:label>Hirer</:label></Kit.Phoenix.Roles.FormGroup.form_group></form></:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-booking-form"}}>Create booking</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-hirer-dialog" aria-labelledby="home-new-hirer-title">
      <:heading rest={%{id: "home-new-hirer-title"}}>New hirer</:heading>
      <:form_groups><form id="home-new-hirer-form"><Kit.Phoenix.Roles.FormGroup.form_group id="home-new-hirer-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "name"}}><:label>Name</:label></Kit.Phoenix.Roles.FormGroup.form_group></form></:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-hirer-form"}}>Create hirer</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-room-dialog" aria-labelledby="home-new-room-title">
      <:heading rest={%{id: "home-new-room-title"}}>New room</:heading>
      <:form_groups><form id="home-new-room-form"><Kit.Phoenix.Roles.FormGroup.form_group id="home-new-room-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "name"}}><:label>Name</:label></Kit.Phoenix.Roles.FormGroup.form_group></form></:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-room-form"}}>Create room</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} id="layout-home-empty-region" setup_checklist={%Kit.Phoenix.SetupChecklist{
      heading: "Set up your hall",
      steps_done: fn done, total -> "#{done} of #{total} done" end,
      done_stamp: "Done",
      not_done_stamp: "To do",
      steps: [
        %Kit.Phoenix.SetupChecklist.Step{name: "Add the rooms people can hire", href: "../settings/", done: true},
        %Kit.Phoenix.SetupChecklist.Step{name: "Set your hire rates", href: "../settings/", done: true},
        %Kit.Phoenix.SetupChecklist.Step{name: "Take your first booking", href: "../calendar/", done: true}
      ]
    }}>
      <:attention rest={%{"aria-labelledby": "empty-region-attention-title"}} heading="Needs your attention" heading_rest={%{id: "empty-region-attention-title"}}></:attention>
      <:assigned_upcoming></:assigned_upcoming>
    </Kit.Phoenix.Layouts.Home.home>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} id="layout-home-page-notice">
      <:notices>
        <Kit.Phoenix.Roles.Notice.notice state={Kit.Phoenix.Roles.Notice.State.settled()}>
          <:standing>Your studio hasn’t opened yet</:standing>
          <:sentence>Hirers can book once you open bookings.</:sentence>
        </Kit.Phoenix.Roles.Notice.notice>
      </:notices>
      <:attention></:attention>
      <:assigned_upcoming rest={%{"aria-labelledby": "page-notice-assigned-title"}} heading="Assigned to you" heading_rest={%{id: "page-notice-assigned-title"}}>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../record/">Oakmere Primary School</:subject>
          <:facts>Review billing details</:facts>
          <:facts>Today</:facts>
        </Kit.Phoenix.Roles.Row.row>
      </:assigned_upcoming>
    </Kit.Phoenix.Layouts.Home.home>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} id="layout-home-routes">
      <:assigned_upcoming rest={%{"aria-labelledby": "routes-assigned-title"}} heading="Assigned to you" heading_rest={%{id: "routes-assigned-title"}}>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../record/">Oakmere Primary School</:subject>
          <:facts>Review billing details</:facts>
          <:facts>Today</:facts>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../record/">Riverside Choir</:subject>
          <:facts>Confirm the Friday hire</:facts>
          <:facts>Tomorrow</:facts>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:routes><a href="../list/">All your bookings</a><a href="../list/">Bring in older bookings</a></:routes>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:assigned_upcoming>
      <:followed_changes rest={%{"aria-labelledby": "routes-changes-title"}} heading="Followed changes" heading_rest={%{id: "routes-changes-title"}}>
        <Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Bookings">
          <:content>
            <Kit.Phoenix.Roles.ListLine.list_line>
              <:name href="../record/">Oakmere Primary School</:name>
              <:description>Maya corrected the billing contact</:description>
              <:age>Just now</:age>
            </Kit.Phoenix.Roles.ListLine.list_line>
            <Kit.Phoenix.Roles.ActionGroup.action_group>
              <:routes><a href="../list/">Every followed booking</a></:routes>
            </Kit.Phoenix.Roles.ActionGroup.action_group>
          </:content>
        </Kit.Phoenix.Roles.HeadedRegion.headed_region>
      </:followed_changes>
    </Kit.Phoenix.Layouts.Home.home>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} id="layout-home-dialog-steps" setup_checklist={%Kit.Phoenix.SetupChecklist{
      heading: "Set up your hall",
      steps_done: fn done, total -> "#{done} of #{total} done" end,
      done_stamp: "Done",
      not_done_stamp: "To do",
      steps: [
        %Kit.Phoenix.SetupChecklist.Step{name: "Add the rooms people can hire", href: "../settings/", done: true},
        %Kit.Phoenix.SetupChecklist.Step{name: "Add your first hirer", dialog: "layout-home-new-hirer", done: false},
        %Kit.Phoenix.SetupChecklist.Step{name: "Take your first booking", dialog: "layout-home-new-booking", done: false}
      ]
    }}>
    </Kit.Phoenix.Layouts.Home.home>
    <Kit.Phoenix.Roles.Dialog.dialog id="layout-home-new-hirer" aria-labelledby="layout-home-new-hirer-title">
      <:heading rest={%{id: "layout-home-new-hirer-title"}}>New hirer</:heading>
      <:form_groups>
        <form id="layout-home-new-hirer-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="layout-home-new-hirer-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "name"}}>
            <:label>Name</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "layout-home-new-hirer-form"}}>Create hirer</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="layout-home-new-booking" aria-labelledby="layout-home-new-booking-title">
      <:heading rest={%{id: "layout-home-new-booking-title"}}>New booking</:heading>
      <:form_groups>
        <form id="layout-home-new-booking-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="layout-home-new-booking-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}>
            <:label>Hirer</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "layout-home-new-booking-form"}}>Create booking</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>
    <template id="home-create-toast-template">
      <Kit.Phoenix.Roles.Toast.toast id="home-create-toast" confirmation_id="home-create" action={Kit.Phoenix.Roles.Toast.Action.undo(nil, %{"type" => "button"})}>
        <:line>Invoice created.</:line>
      </Kit.Phoenix.Roles.Toast.toast>
    </template>
    <template id="home-create-undone-toast-template">
      <Kit.Phoenix.Roles.Toast.toast id="home-create-toast" confirmation_id="home-create-undone" action={Kit.Phoenix.Roles.Toast.Action.redo(nil, %{"type" => "button"})}>
        <:line>Invoice creation undone.</:line>
      </Kit.Phoenix.Roles.Toast.toast>
    </template>

Home, new-tenant

Open the whole page

Source
<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Home</:subject>
  <:lede words={@owner} />
  <:lede words="New tenant" />
  <:body>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} setup_checklist={%Kit.Phoenix.SetupChecklist{
      heading: "Set up your hall",
      steps_done: fn done, total -> "#{done} of #{total} done" end,
      done_stamp: "Done",
      not_done_stamp: "To do",
      steps: [
        %Kit.Phoenix.SetupChecklist.Step{name: "Add the rooms people can hire", href: "../../settings/", done: true},
        %Kit.Phoenix.SetupChecklist.Step{name: "Open bookings", href: "../../settings/", done: false, waits_on: "Needs hire rates first"},
        %Kit.Phoenix.SetupChecklist.Step{name: "Set your hire rates", href: "../../settings/", done: false},
        %Kit.Phoenix.SetupChecklist.Step{name: "Take your first booking", href: "../../calendar/", done: false}
      ]
    }}>
      <:measures>
        <Kit.Phoenix.Roles.FactGroup.fact_group>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))])]}>
            <:name>Invoiced</:name>
            <:value id="home-invoiced" href="../../reports/?report=income&period=last_month&measure=invoiced" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))])]}>
            <:name>Collected</:name>
            <:value id="home-collected" href="../../reports/?report=income&period=last_month&measure=collected" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        </Kit.Phoenix.Roles.FactGroup.fact_group>
      </:measures>
    </Kit.Phoenix.Layouts.Home.home>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

Home, loading

Open the whole page

Source
<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Home</:subject>
  <:lede words={@owner} />
  <:lede words="Measures loading" />
  <:actions>
    <Kit.Phoenix.Roles.PrimaryAction.primary_action id="home-new-invoice" phx-click={Kit.Phoenix.Modal.open("home-new-invoice-dialog")}>New invoice</Kit.Phoenix.Roles.PrimaryAction.primary_action>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="home-new-booking" phx-click={Kit.Phoenix.Modal.open("home-new-booking-dialog")}>New booking</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="home-new-hirer" phx-click={Kit.Phoenix.Modal.open("home-new-hirer-dialog")}>New hirer</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action id="home-new-room" phx-click={Kit.Phoenix.Modal.open("home-new-room-dialog")}>New room</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
    <Kit.Phoenix.Roles.ActionMenu.action_menu id="home-creates" label="More New actions" groups={[]} />
    <a href="../../layout-home/#layout-home-loading">{@owner}</a>
  </:actions>
  <:body>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} measures_loading={Kit.Phoenix.Loading.sentence("The measures had not loaded.")}>
      <:attention rest={%{"aria-labelledby": "attention-title"}} heading="Needs your attention" heading_rest={%{id: "attention-title"}}>
        <Kit.Phoenix.Roles.AttentionItem.attention_item>
          <:subject>Oakmere Primary School invoice</:subject>
          <:standing>Failed: the recipient’s address was refused.</:standing>
          <:urgency>Correct before sending again.</:urgency>
          <:route href="../../record/">Review the invoice</:route>
        </Kit.Phoenix.Roles.AttentionItem.attention_item>
      </:attention>
      <:measures>
        <Kit.Phoenix.Roles.FactGroup.fact_group>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))]), Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1872.00"))), Kit.Phoenix.Words.text(" previous period · Up "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "224.00")))])]}>
            <:name>Invoiced</:name>
            <:value id="home-invoiced" href="../../reports/?report=income&period=last_month&measure=invoiced" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "2096.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))]), Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1580.00"))), Kit.Phoenix.Words.text(" previous period · Down "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "236.00")))])]}>
            <:name>Collected</:name>
            <:value id="home-collected" href="../../reports/?report=income&period=last_month&measure=collected" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1344.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        </Kit.Phoenix.Roles.FactGroup.fact_group>
      </:measures>
      <:assigned_upcoming rest={%{id: "home-assigned", "aria-labelledby": "assigned-title"}} heading="Assigned to you" heading_rest={%{id: "assigned-title"}}>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../../record/">Oakmere Primary School</:subject>
          <:facts>Review billing details</:facts>
          <:facts>Today</:facts>
        </Kit.Phoenix.Roles.Row.row>
      </:assigned_upcoming>
      <:followed_changes rest={%{"aria-labelledby": "changes-title"}} heading="Followed changes" heading_rest={%{id: "changes-title"}}>
        <Kit.Phoenix.Roles.ListLine.list_line>
          <:name href="../../record/">Oakmere Primary School</:name>
          <:description>Maya corrected the billing contact</:description>
          <:age>Just now</:age>
        </Kit.Phoenix.Roles.ListLine.list_line>
      </:followed_changes>
    </Kit.Phoenix.Layouts.Home.home>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-invoice-dialog" aria-labelledby="home-new-invoice-title">
      <:heading rest={%{id: "home-new-invoice-title"}}>New invoice</:heading>
      <:form_groups>
        <form id="home-new-invoice-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="home-new-invoice-hirer">
            <:label>Hirer</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium" binding={binding} name="hirer" none="No hirers match." query_event="search_hirers" recent={[
                %Kit.Phoenix.Roles.RecordPicker.Record{id: "priya-shah", name: ["Priya Shah"], fact: "Leeds"},
                %Kit.Phoenix.Roles.RecordPicker.Record{id: "tom-reid", name: ["Tom Reid"], fact: "York"}
              ]} />
            </:control>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-invoice-form"}}>Create invoice</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-booking-dialog" aria-labelledby="home-new-booking-title">
      <:heading rest={%{id: "home-new-booking-title"}}>New booking</:heading>
      <:form_groups><form id="home-new-booking-form"><Kit.Phoenix.Roles.FormGroup.form_group id="home-new-booking-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}><:label>Hirer</:label></Kit.Phoenix.Roles.FormGroup.form_group></form></:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-booking-form"}}>Create booking</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-hirer-dialog" aria-labelledby="home-new-hirer-title">
      <:heading rest={%{id: "home-new-hirer-title"}}>New hirer</:heading>
      <:form_groups><form id="home-new-hirer-form"><Kit.Phoenix.Roles.FormGroup.form_group id="home-new-hirer-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "name"}}><:label>Name</:label></Kit.Phoenix.Roles.FormGroup.form_group></form></:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-hirer-form"}}>Create hirer</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="home-new-room-dialog" aria-labelledby="home-new-room-title">
      <:heading rest={%{id: "home-new-room-title"}}>New room</:heading>
      <:form_groups><form id="home-new-room-form"><Kit.Phoenix.Roles.FormGroup.form_group id="home-new-room-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "name"}}><:label>Name</:label></Kit.Phoenix.Roles.FormGroup.form_group></form></:form_groups>
      <:primary_action rest={%{type: "submit", form: "home-new-room-form"}}>Create room</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>
    <template id="home-create-toast-template">
      <Kit.Phoenix.Roles.Toast.toast id="home-create-toast" confirmation_id="home-create" action={Kit.Phoenix.Roles.Toast.Action.undo(nil, %{"type" => "button"})}>
        <:line>Invoice created.</:line>
      </Kit.Phoenix.Roles.Toast.toast>
    </template>
    <template id="home-create-undone-toast-template">
      <Kit.Phoenix.Roles.Toast.toast id="home-create-toast" confirmation_id="home-create-undone" action={Kit.Phoenix.Roles.Toast.Action.redo(nil, %{"type" => "button"})}>
        <:line>Invoice creation undone.</:line>
      </Kit.Phoenix.Roles.Toast.toast>
    </template>

Home, assigned-upcoming-first

Open the whole page

Source
<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Home</:subject>
  <:lede words={@owner} />
  <:lede words="Assigned or upcoming work first" />
  <:body>
    <Kit.Phoenix.Layouts.Home.home subject_state={Kit.Phoenix.State.none()} first="assigned-upcoming" setup_checklist={%Kit.Phoenix.SetupChecklist{
      heading: "Set up your hall",
      steps_done: fn done, total -> "#{done} of #{total} done" end,
      done_stamp: "Done",
      not_done_stamp: "To do",
      steps: [
        %Kit.Phoenix.SetupChecklist.Step{name: "Add the rooms people can hire", href: "../../settings/", done: true},
        %Kit.Phoenix.SetupChecklist.Step{name: "Set your hire rates", href: "../../settings/", done: false}
      ]
    }}>
      <:assigned_upcoming rest={%{"aria-labelledby": "first-assigned-title"}} heading="Your bookings today" heading_rest={%{id: "first-assigned-title"}}>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../../record/">Riverside Choir</:subject>
          <:facts>Main hall</:facts>
          <:facts>10:00 to 12:00</:facts>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.Row.row>
          <:subject href="../../record/">Oakmere Primary School</:subject>
          <:facts>Small hall</:facts>
          <:facts>13:30 to 15:00</:facts>
        </Kit.Phoenix.Roles.Row.row>
      </:assigned_upcoming>
      <:attention rest={%{"aria-labelledby": "first-attention-title"}} heading="Needs your attention" heading_rest={%{id: "first-attention-title"}}>
        <Kit.Phoenix.Roles.AttentionItem.attention_item>
          <:subject>Oakmere Primary School invoice</:subject>
          <:standing>Failed: the recipient’s address was refused.</:standing>
          <:urgency>Correct before sending again.</:urgency>
          <:route href="../../record/">Review the invoice</:route>
        </Kit.Phoenix.Roles.AttentionItem.attention_item>
      </:attention>
      <:measures>
        <Kit.Phoenix.Roles.FactGroup.fact_group>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))])]}>
            <:name>Invoiced</:name>
            <:value id="first-invoiced" href="../../reports/?report=income&period=last_month&measure=invoiced" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "2096.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
          <Kit.Phoenix.Roles.LabelledFact.labelled_fact supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.time(Kit.Phoenix.Time.month(reader(), 2025, 2))])]}>
            <:name>Collected</:name>
            <:value id="first-collected" href="../../reports/?report=income&period=last_month&measure=collected" words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1344.00")))]} />
          </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
        </Kit.Phoenix.Roles.FactGroup.fact_group>
      </:measures>
      <:followed_changes rest={%{"aria-labelledby": "first-changes-title"}} heading="Followed changes" heading_rest={%{id: "first-changes-title"}}>
        <Kit.Phoenix.Roles.ListLine.list_line>
          <:name href="../../record/">Riverside Choir</:name>
          <:description>Maya moved the Friday hire to the main hall</:description>
          <:age>Just now</:age>
        </Kit.Phoenix.Roles.ListLine.list_line>
      </:followed_changes>
    </Kit.Phoenix.Layouts.Home.home>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>