PageDashboard

Dashboard layout. Slots: header, hero, kpis, occupancy, funnel, top, activity; title/subtitle build the header.

Jump to API reference

Import

Vue
import { UiPageDashboard } from '@ziyarago/ui/vue'

Default

Dashboard

Today across all hotels

Ramadan seasonBookings are 18% ahead of last year.
Bookings1 248
Revenue, SAR3.4M
Occupancy92%

Occupancy, last 7 days

72%
80%
88%
94%
97%
91%
85%

Sales funnel

Leads420
Quotes260
Booked150
Vue
<UiPageDashboard title="Dashboard" subtitle="Today across all hotels">
  <template #hero>
    <UiHeroBanner
      title="Ramadan season"
      text="Bookings are 18% ahead of last year."
      cta="View report"
     />
  </template>
  <template #kpis>
    <UiHStack :gap="12" wrap>
      <UiKpiTile label="Bookings" value="1 248" />
      <UiKpiTile label="Revenue, SAR" value="3.4M" />
      <UiKpiTile label="Occupancy" value="92%" />
    </UiHStack>
  </template>
  <template #occupancy>
    <UiCard title="Occupancy, last 7 days">
      <UiOccupancyChart :values="[72, 80, 88, 94, 97, 91, 85]" />
    </UiCard>
  </template>
  <template #funnel>
    <UiCard title="Sales funnel">
      <UiSalesFunnel
        :steps="[{ label: 'Leads', value: 420 }, { label: 'Quotes', value: 260 }, { label: 'Booked', value: 150 }]"
       />
    </UiCard>
  </template>
</UiPageDashboard>

API reference

Dashboard template: greeting hero, KPI tiles, occupancy chart, sales funnel, top list and activity feed.

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).
heroLarge greeting/plan block; Card variant="inverse" with Ring and a Button.
kpisFour key figures; KpiTile, StatsCard or KpiInline.
occupancyPer-day occupancy chart; OccupancyChart or MiniChart.
funnelInquiry-to-payment funnel; SalesFunnel.
topRevenue leaderboard; DataTable with Progress share bars.
activityRecent actions, newest first; Timeline.

Notes

  • Place inside AppShell; fill only the slots you need.
  • hero and kpis share a row, as do occupancy/funnel and top/activity; they wrap on narrow screens.