ResourceTimelinebeta

<script lang="ts">
  import { ResourceTimeline } from '@urbicon-ui/blocks';
  import { addDays, isoToDate } from '@urbicon-ui/blocks/date';

  interface Booking {
    roomId: string;
    guest: string;
    /** The first night of the stay. */
    checkIn: string;
    /** The morning the guest leaves — not a night. */
    checkOut: string;
    state: 'confirmed' | 'option' | 'blocked';
  }

  const houses = [
    { id: 'cala', label: 'Cala · Menorca' },
    { id: 'firn', label: 'Firn · Engadin' }
  ];

  const rooms = [
    { id: 'cala-01', label: 'Cala 01', description: 'Garden Room', groupId: 'cala' },
    { id: 'cala-04', label: 'Cala 04', description: 'Room', groupId: 'cala' },
    { id: 'cala-07', label: 'Cala 07', description: 'Corner Room', groupId: 'cala' },
    { id: 'firn-02', label: 'Firn 02', description: 'Room', groupId: 'firn' },
    { id: 'firn-05', label: 'Firn 05', description: 'Suite', groupId: 'firn' }
  ];

  const states = [
    { id: 'confirmed', label: 'Confirmed', color: 'oklch(0.62 0.13 250)' },
    { id: 'option', label: 'Option', color: 'oklch(0.83 0.13 90)' },
    { id: 'blocked', label: 'Blocked', color: 'oklch(0.62 0.02 260)' }
  ];

  const bookings: Booking[] = [
    // Weber leaves on the 18th and Haldar arrives the same morning: the two bars
    // meet without touching. Drop the −1 below and they overlap into two rows.
    {
      roomId: 'firn-02',
      guest: 'Weber',
      checkIn: '2026-06-15',
      checkOut: '2026-06-18',
      state: 'confirmed'
    },
    {
      roomId: 'firn-02',
      guest: 'Haldar',
      checkIn: '2026-06-18',
      checkOut: '2026-06-24',
      state: 'confirmed'
    },
    {
      roomId: 'cala-01',
      guest: 'Lindqvist',
      checkIn: '2026-06-12',
      checkOut: '2026-06-18',
      state: 'confirmed'
    },
    {
      roomId: 'cala-04',
      guest: 'Bianchi',
      checkIn: '2026-06-15',
      checkOut: '2026-06-19',
      state: 'option'
    },
    {
      roomId: 'cala-07',
      guest: 'Amaral',
      checkIn: '2026-06-16',
      checkOut: '2026-07-02',
      state: 'confirmed'
    },
    {
      roomId: 'firn-05',
      guest: 'Repainting',
      checkIn: '2026-06-17',
      checkOut: '2026-06-21',
      state: 'blocked'
    }
  ];

  let picked = $state('');
</script>

<div class="w-full">
  <ResourceTimeline
    view="days"
    days={14}
    value={new Date(2026, 5, 15)}
    locale="en-US"
    resources={rooms}
    groups={houses}
    items={bookings}
    categories={states}
    getResourceId={(booking) => booking.roomId}
    getCategoryId={(booking) => booking.state}
    getLabel={(booking) => booking.guest}
    onItemClick={(booking, room) => (picked = `${booking.guest} · ${room.label}`)}
    getRange={(booking) => ({
      // Both ends are nights: the stay's last night is check-out minus one day.
      start: booking.checkIn,
      end: addDays(isoToDate(booking.checkOut), -1)
    })}
  />

  <p class="text-text-secondary mt-3 text-sm">
    {picked ? `Selected: ${picked}` : 'Pick a bar to select a stay.'}
  </p>
</div>

<script lang="ts">
  import { ResourceTimeline } from '@urbicon-ui/blocks';
  import { toIso } from '@urbicon-ui/blocks/date';

  interface Stay {
    id: string;
    roomId: string;
    guest: string;
    from: string;
    /** Inclusive: the last night, not the check-out morning. */
    to: string;
  }

  const rooms = [
    { id: 'firn-02', label: 'Firn 02', description: 'Room' },
    { id: 'firn-05', label: 'Firn 05', description: 'Corner Room' },
    { id: 'firn-08', label: 'Firn 08', description: 'Suite' }
  ];

  const stays: Stay[] = [
    { id: 's1', roomId: 'firn-02', guest: 'Weber', from: '2026-06-15', to: '2026-06-17' },
    { id: 's2', roomId: 'firn-05', guest: 'Haldar', from: '2026-06-18', to: '2026-06-21' },
    { id: 's3', roomId: 'firn-08', guest: 'Ferreira', from: '2026-06-16', to: '2026-06-18' }
  ];

  let status = $state('');
</script>

<div class="w-full">
  <ResourceTimeline
    value={new Date(2026, 5, 15)}
    locale="en-US"
    resources={rooms}
    items={stays}
    getResourceId={(stay) => stay.roomId}
    getRange={(stay) => ({ start: stay.from, end: stay.to })}
    getLabel={(stay) => stay.guest}
    onCellClick={(room, date) => (status = `New booking: ${room.label} · ${toIso(date)}`)}
    onItemClick={(stay) => (status = `${stay.guest} is already booked here`)}
  >
    {#snippet cell({ isOccupied, isDisabled })}
      <!-- Painted on free nights only; the click itself is onCellClick's job, so
           the cell keeps its single tab stop and works from the keyboard too. -->
      {#if !isOccupied && !isDisabled}
        <span class="text-text-tertiary grid h-full place-items-center text-xs opacity-50">+</span>
      {/if}
    {/snippet}
  </ResourceTimeline>

  <p class="text-text-secondary mt-3 text-sm">
    {status || 'Click a free night, or press Enter on one.'}
  </p>
</div>

<script lang="ts">
  import { Calendar, ResourceTimeline } from '@urbicon-ui/blocks';
  import type { CalendarEvent, DateCategory, TimelineResource } from '@urbicon-ui/blocks';

  // One array, two views. These are `CalendarEvent`s (the shape a Calendar
  // already holds), and the timeline reads them through its accessors instead of
  // a converted copy: `getResourceId` finds the lane, `getRange` the nights.
  const events: CalendarEvent[] = [
    {
      id: 'b1',
      title: 'Lindqvist',
      start: new Date(2026, 5, 15),
      end: new Date(2026, 5, 18),
      categoryId: 'garden',
      meta: { roomId: 'r-01' }
    },
    {
      id: 'b2',
      title: 'Amaral',
      start: new Date(2026, 5, 16),
      end: new Date(2026, 5, 21),
      categoryId: 'suite',
      meta: { roomId: 'r-02' }
    },
    {
      id: 'b3',
      title: 'Weber',
      start: new Date(2026, 5, 19),
      end: new Date(2026, 5, 20),
      categoryId: 'garden',
      meta: { roomId: 'r-01' }
    }
  ];

  // The same categories drive both legends: `DateCategory` is one type across
  // Calendar, Planner and ResourceTimeline, so nothing is mapped here either.
  const categories: DateCategory[] = [
    { id: 'garden', label: 'Garden Room', color: 'oklch(0.62 0.13 250)' },
    { id: 'suite', label: 'Suite', color: 'oklch(0.72 0.15 60)' }
  ];

  const rooms: TimelineResource[] = [
    { id: 'r-01', label: 'Room 01', description: 'Garden Room' },
    { id: 'r-02', label: 'Room 02', description: 'Suite' }
  ];
</script>

<div class="space-y-6">
  <ResourceTimeline
    view="days"
    days={10}
    size="sm"
    value={new Date(2026, 5, 14)}
    locale="en-GB"
    resources={rooms}
    items={events}
    {categories}
    getResourceId={(event) => String(event.meta?.roomId ?? '')}
    getRange={(event) => ({ start: event.start, end: event.end ?? event.start })}
    getCategoryId={(event) => event.categoryId}
    getLabel={(event) => event.title}
  />

  <!-- The same three stays as month bars: one axis instead of two, which is the
       whole difference between the two views. -->
  <Calendar
    view="month"
    views={['month']}
    defaultDate={new Date(2026, 5, 14)}
    showViewSwitcher={false}
    showEventList={false}
    size="sm"
    locale="en-GB"
    {events}
    {categories}
  />
</div>

<script lang="ts">
  import { ResourceTimeline } from '@urbicon-ui/blocks';

  interface Stay {
    id: string;
    roomId: string;
    guest: string;
    firstNight: string;
    lastNight: string;
  }

  const rooms = [
    { id: 'cala-01', label: 'Cala 01', description: 'Garden Room' },
    { id: 'cala-07', label: 'Cala 07', description: 'Corner Room' },
    { id: 'cala-11', label: 'Cala 11', description: 'Suite' }
  ];

  const stays: Stay[] = [
    {
      id: 's1',
      roomId: 'cala-01',
      guest: 'Amaral',
      firstNight: '2026-06-10',
      lastNight: '2026-06-17'
    },
    {
      id: 's2',
      roomId: 'cala-07',
      guest: 'Bianchi',
      firstNight: '2026-06-13',
      lastNight: '2026-06-25'
    },
    {
      id: 's3',
      roomId: 'cala-11',
      guest: 'Marek',
      firstNight: '2026-06-17',
      lastNight: '2026-06-19'
    }
  ];
</script>

<ResourceTimeline
  size="lg"
  value={new Date(2026, 5, 15)}
  locale="en-US"
  resources={rooms}
  items={stays}
  getResourceId={(stay) => stay.roomId}
  getRange={(stay) => ({ start: stay.firstNight, end: stay.lastNight })}
  getLabel={(stay) => `${stay.guest}, ${stay.firstNight} to ${stay.lastNight}`}
>
  {#snippet span({ item, totalDays, isStart, isEnd })}
    <span class="truncate">
      {isStart ? '' : '… '}{item.guest} · {totalDays} nights{isEnd ? '' : ' …'}
    </span>
  {/snippet}
</ResourceTimeline>

<script lang="ts">
  import { ResourceTimeline } from '@urbicon-ui/blocks';

  interface Stay {
    id: string;
    roomId: string;
    guest: string;
    firstNight: string;
    lastNight: string;
    state: 'confirmed' | 'option';
  }

  const rooms = [
    { id: 'duna-03', label: 'Duna 03', description: 'Room' },
    { id: 'duna-06', label: 'Duna 06', description: 'Garden Room' },
    { id: 'duna-09', label: 'Duna 09', description: 'Suite' }
  ];

  const states = [
    { id: 'confirmed', label: 'Confirmed', color: 'oklch(0.62 0.13 250)' },
    { id: 'option', label: 'Option', color: 'oklch(0.83 0.13 90)' }
  ];

  const stays: Stay[] = [
    {
      id: 's1',
      roomId: 'duna-03',
      guest: 'Varela',
      firstNight: '2026-06-15',
      lastNight: '2026-06-17',
      state: 'confirmed'
    },
    {
      id: 's2',
      roomId: 'duna-06',
      guest: 'Camacho',
      firstNight: '2026-06-17',
      lastNight: '2026-06-20',
      state: 'option'
    },
    {
      id: 's3',
      roomId: 'duna-09',
      guest: 'Pons',
      firstNight: '2026-06-16',
      lastNight: '2026-06-21',
      state: 'confirmed'
    }
  ];
</script>

<ResourceTimeline
  variant="ghost"
  value={new Date(2026, 5, 15)}
  locale="en-US"
  resources={rooms}
  items={stays}
  categories={states}
  getResourceId={(stay) => stay.roomId}
  getCategoryId={(stay) => stay.state}
  getRange={(stay) => ({ start: stay.firstNight, end: stay.lastNight })}
  getLabel={(stay) => stay.guest}
  slotClasses={{
    base: 'bg-surface-elevated border-border-subtle rounded-2xl border px-4 pb-3',
    header: 'border-b-0',
    headerTitle: 'text-text-tertiary text-xs tracking-[0.18em] uppercase',
    corner: 'bg-transparent',
    dayHeaderRow: 'border-b-0',
    dayHeaderWeekday: 'text-text-tertiary',
    dayHeaderDate: 'text-text-secondary font-normal',
    laneHeader: 'bg-transparent',
    laneLabel: 'text-2xs text-text-secondary tracking-[0.14em] uppercase',
    laneDescription: 'hidden',
    span: 'rounded-full shadow-[var(--blocks-shadow-sm)]',
    legend: 'justify-end'
  }}
/>

<script lang="ts">
  import { ResourceTimeline } from '@urbicon-ui/blocks';
  import { toIso } from '@urbicon-ui/blocks/date';

  let { data } = $props();
  let bookings = $state(data.bookings);

  async function load(range: { start: Date; end: Date }) {
    const query = new URLSearchParams({ from: toIso(range.start), to: toIso(range.end) });
    bookings = await fetch(`/api/bookings?${query}`).then((r) => r.json());
  }
</script>

<ResourceTimeline
  view="days"
  days={14}
  resources={data.rooms}
  items={bookings}
  getResourceId={(b) => b.roomId}
  getRange={(b) => ({ start: b.firstNight, end: b.lastNight })}
  onNavigate={(_date, range) => load(range)}
/>