Resource Detail

Resource detail view with availability schedule

SaaSResource

Overview

ResourceDetail displays comprehensive resource information including name, type, status badge, description, location, capacity, weekly availability schedule, and custom attributes. Supports loading skeleton, error state, close button, and a select/book action for active resources.

Usage

import { ResourceDetail } from "@leanicon/web-builder-library/saas";

<ResourceDetail
  resource={{
    id: "room-1",
    name: "Conference Room A",
    type: "meeting-room",
    status: "active",
    description: "Large meeting room with projector and whiteboard.",
    location: "Building A, Floor 2",
    capacity: { min: 1, max: 10, unit: "people" },
  }}
  onSelect={(r) => console.log("Selected:", r.id)}
  onClose={() => console.log("Close")}
/>;

Variants

Default (Active)

Conference Room A

Active

meeting-room

Description

Large meeting room with projector and whiteboard.

Location

Building A, Floor 2

Capacity

1-10 people

Default (Dark)

Conference Room A

Active

meeting-room

Description

Large meeting room with projector and whiteboard.

Location

Building A, Floor 2

Capacity

1-10 people

Maintenance Status

Projector HP-2000

Maintenance

equipment

Description

High-definition projector for presentations.

Location

Storage Room B

This resource is currently maintenance

With Custom Attributes

Conference Room A

Active

meeting-room

Description

Large meeting room with projector and whiteboard.

Location

Building A, Floor 2

Capacity

1-10 people

Additional Details

wifiAvailable

projectorYes

whiteboardYes

With Error

Conference Room A

Active

meeting-room

Failed to load availability schedule. Please try again.

Loading

Props

Name	Type	Default	Required	Description
`resource`	`ResourceData`	—	Yes	Full resource data
`loading`	`boolean`	`false`	No	Whether component is in loading state
`error`	`string`	—	No	Error message to display
`labels`	`Record<string, string>`	—	No	Optional label overrides
`className`	`string`	—	No	Custom class name
`onSelect`	`((resource: ResourceData) => void)`	—	No	Called when select/book is clicked
`onClose`	`(() => void)`	—	No	Called to close the detail view