PageGroupManager Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Group manager page. Slots: trip, toolbar, bulk, pilgrims, rooms, payments.

Jump to API reference

Import

Vue
import { UiPageGroupManager } from '@ziyarago/ui-pro/vue'

Default

Group manager

Ramadan Umrah, May 2026

Trip summary slot
Toolbar slot
Pilgrims table slot
Rooming slot
Payments slot
Vue
<UiPageGroupManager title="Group manager" subtitle="Ramadan Umrah, May 2026">
  <template #trip>Trip summary slot</template>
  <template #toolbar>Toolbar slot</template>
  <template #pilgrims>Pilgrims table slot</template>
  <template #rooms>Rooming slot</template>
  <template #payments>Payments slot</template>
</UiPageGroupManager>

API reference

Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
tripTrip header with dates, route and counters; Card, StatStrip, Progress.
toolbarSearch and status filters; SearchInput, FilterChips.
bulkActions for the selected pilgrims; Button, Badge.
pilgrimsPilgrims table with documents and visa; Card, DataTable, Badge.
roomsRooming assignment; Card, RoomGrid.
paymentsPayments summary and manager contact; Card, Progress, ContactPanel.

Notes

  • Place inside AppShell; fill only the slots you need.
  • The payments card stays visible on the right and goes below the table under 860 px.