46 lines
1.3 KiB
Svelte
46 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import ActivityLists from './activity-lists.svelte';
|
|
import BillingTrend from './billing-trend.svelte';
|
|
import MetricCards from './metric-cards.svelte';
|
|
import RoomSummary from './room-summary.svelte';
|
|
import { formatDate, formatMoney, formatValue } from '$lib/record-utils';
|
|
import type { PageData } from './$types';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Dashboard | Clearity</title>
|
|
</svelte:head>
|
|
|
|
<div class="flex flex-col gap-6">
|
|
<div class="flex flex-col gap-1">
|
|
<h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>
|
|
<p class="text-sm text-muted-foreground">
|
|
Operational overview for clients, contracts, bookings, rooms, and billing.
|
|
</p>
|
|
</div>
|
|
|
|
<MetricCards metrics={data.metrics} monthLabel={data.meta.monthLabel} {formatMoney} />
|
|
|
|
<div class="grid gap-4 xl:grid-cols-2">
|
|
<BillingTrend
|
|
records={data.billingTrend}
|
|
description={data.meta.billingTrendDescription}
|
|
{formatMoney}
|
|
/>
|
|
<RoomSummary metrics={data.metrics} summary={data.roomSummary} />
|
|
</div>
|
|
|
|
<ActivityLists
|
|
upcomingBookings={data.upcomingBookings}
|
|
contractsEndingSoon={data.contractsEndingSoon}
|
|
recentInvoices={data.recentInvoices}
|
|
{formatDate}
|
|
{formatMoney}
|
|
{formatValue}
|
|
/>
|
|
|
|
<p class="text-xs text-muted-foreground">{data.meta.overdueInvoiceBasis}</p>
|
|
</div>
|