Service as Card

Services render in collections as cards, list items, and rows for browsing, selecting, and managing multiple services.

Display Modes

Services support all standard display modes with service-specific adaptations:

Display	Component	Best For
`cards`	`ServiceCard`	Service catalogs, marketplace
`list`	`ServiceListItem`	Simple service lists
`rows`	`ServiceRow`	Admin tables, management
`tiles`	`ServiceTile`	Visual service gallery
`kanban`	`ServiceKanbanCard`	Status-based workflows

ServiceCard

Card display for a service in a grid.

Props

interface ServiceCardProps {
  /** Service data */
  service: ServiceProps

  /** Card variant */
  variant?: 'default' | 'compact' | 'detailed'

  /** Show status badge */
  showStatus?: boolean

  /** Show metrics */
  showMetrics?: boolean

  /** Show actions */
  showActions?: boolean

  /** Actions */
  actions?: Action[]

  /** Click handler */
  onClick?: () => void

  /** Select handler */
  onSelect?: (selected: boolean) => void

  /** Selectable */
  selectable?: boolean

  /** Selected state */
  selected?: boolean
}

Usage

// Default card
<ServiceCard
  service={apiService}
  showStatus
  showMetrics
  onClick={() => navigate(`/services/${apiService.$id}`)}
/>

// Compact card
<ServiceCard
  service={webhookService}
  variant="compact"
  showStatus
  actions={[
    { id: 'edit', label: 'Edit', icon: 'Edit' },
    { id: 'delete', label: 'Delete', icon: 'Trash' }
  ]}
/>

// Detailed card with metrics
<ServiceCard
  service={integrationService}
  variant="detailed"
  showStatus
  showMetrics
  showActions
/>

// Selectable card
<ServiceCard
  service={apiService}
  selectable
  selected={selectedServices.includes(apiService.$id)}
  onSelect={(selected) => handleSelect(apiService.$id, selected)}
/>

Service Type Variants

Different service types show relevant information:

API Card

<ServiceCard service={apiService} />
// Shows:
// - API name and version
// - API type (REST/GraphQL)
// - Endpoint count
// - Request rate
// - Status badge

Integration Card

<ServiceCard service={integrationService} />
// Shows:
// - Service name (e.g., "Stripe")
// - Category (payment)
// - Connection status
// - Last sync time
// - OAuth indicator

Webhook Card

<ServiceCard service={webhookService} />
// Shows:
// - Webhook URL
// - Event types
// - Delivery success rate
// - Last delivery
// - Active/inactive badge

Queue Card

<ServiceCard service={queueService} />
// Shows:
// - Queue name
// - Queue type (FIFO/Standard)
// - Messages in queue
// - Messages in flight
// - Consumer count

ServiceListItem

List item display for a service.

Props

interface ServiceListItemProps {
  /** Service data */
  service: ServiceProps

  /** Show description */
  showDescription?: boolean

  /** Show metadata */
  showMetadata?: boolean

  /** Show status */
  showStatus?: boolean

  /** Actions */
  actions?: Action[]

  /** Click handler */
  onClick?: () => void
}

Usage

<List>
  <ServiceListItem
    service={apiService}
    showDescription
    showStatus
    onClick={() => navigate(`/services/${apiService.$id}`)}
  />
  <ServiceListItem
    service={webhookService}
    showMetadata
    actions={[
      { id: 'test', label: 'Test', icon: 'Play' },
      { id: 'disable', label: 'Disable', icon: 'StopCircle' }
    ]}
  />
</List>

ServiceRow

Table row display for a service.

Props

interface ServiceRowProps {
  /** Service data */
  service: ServiceProps

  /** Columns to display */
  columns?: ServiceColumn[]

  /** Selectable */
  selectable?: boolean

  /** Selected state */
  selected?: boolean

  /** Select handler */
  onSelect?: (selected: boolean) => void

  /** Actions */
  actions?: Action[]
}

type ServiceColumn =
  | 'name'
  | 'type'
  | 'status'
  | 'version'
  | 'baseUrl'
  | 'auth'
  | 'rateLimit'
  | 'owner'
  | 'created'
  | 'updated'
  | 'metrics'

Usage

<Table>
  <ServiceRow
    service={apiService}
    columns={['name', 'type', 'status', 'version', 'metrics']}
    selectable
    selected={selected}
    onSelect={handleSelect}
    actions={[
      { id: 'view', label: 'View', icon: 'Eye' },
      { id: 'edit', label: 'Edit', icon: 'Edit' }
    ]}
  />
</Table>

Service-Specific Columns

Different service types have unique columns:

API Rows

<ServiceRow
  service={apiService}
  columns={[
    'name',
    'type',          // REST/GraphQL
    'version',
    'endpoints',     // Endpoint count
    'requests',      // Request count
    'status'
  ]}
/>

Integration Rows

<ServiceRow
  service={integrationService}
  columns={[
    'name',
    'service',       // Third-party service
    'category',      // payment/communication/etc
    'status',        // connected/disconnected
    'lastSync',      // Last sync timestamp
    'syncStatus'     // Sync health
  ]}
/>

Webhook Rows

<ServiceRow
  service={webhookService}
  columns={[
    'url',           // Target URL
    'events',        // Event types count
    'deliveries',    // Total deliveries
    'successRate',   // Delivery success %
    'lastDelivery',  // Last delivery time
    'enabled'        // Active/inactive
  ]}
/>

ServiceTile

Image-focused tile display.

Props

interface ServiceTileProps {
  /** Service data */
  service: ServiceProps

  /** Show overlay */
  showOverlay?: boolean

  /** Overlay content */
  overlayContent?: 'name' | 'description' | 'metrics'

  /** Click handler */
  onClick?: () => void
}

Usage

<Tiles>
  <ServiceTile
    service={integrationService}
    showOverlay
    overlayContent="name"
    onClick={() => navigate(`/integrations/${integrationService.$id}`)}
  />
</Tiles>

Best for integration marketplaces where each service has a distinctive logo/icon.

ServiceKanbanCard

Kanban board card for workflow-based service management.

Props

interface ServiceKanbanCardProps {
  /** Service data */
  service: ServiceProps

  /** Show details */
  compact?: boolean

  /** Draggable */
  draggable?: boolean

  /** Click handler */
  onClick?: () => void
}

Usage

<Kanban
  columns={[
    {
      id: 'pending',
      title: 'Pending',
      items: pendingServices
    },
    {
      id: 'active',
      title: 'Active',
      items: activeServices
    },
    {
      id: 'deprecated',
      title: 'Deprecated',
      items: deprecatedServices
    }
  ]}
  renderCard={(service) => (
    <ServiceKanbanCard
      service={service}
      draggable
      onClick={() => viewService(service)}
    />
  )}
/>

Collections

Using services in collections.

Service Grid

<Collection
  of="Service"
  display="cards"
  things={services}
  columns={3}
  gap={4}
/>

// Or with specific display component
<Cards
  of="Service"
  things={services}
  columns={3}
  renderCard={(service) => (
    <ServiceCard
      service={service}
      variant="detailed"
      showMetrics
    />
  )}
/>

Service Table

<Collection
  of="Service"
  display="rows"
  things={services}
/>

// Or with Table component
<Rows
  of="Service"
  things={services}
  columns={['name', 'type', 'status', 'version', 'metrics']}
  selectable
  onSelectionChange={handleSelectionChange}
/>

Service List

<Collection
  of="Service"
  display="list"
  things={services}
  filter={(service) => service.active}
  sort="name"
/>

// Or with List component
<List
  of="Service"
  things={services}
  renderItem={(service) => (
    <ServiceListItem
      service={service}
      showDescription
      showStatus
    />
  )}
/>

Filtering and Sorting

Filter by Type

<Collection
  of="Service"
  display="cards"
  things={services}
  filter={(service) => service.$type === 'API'}
/>

Filter by Status

<Collection
  of="Service"
  display="rows"
  things={services}
  filter={(service) => service.active}
/>

Sort by Name

<Collection
  of="Service"
  display="cards"
  things={services}
  sort="name"
/>

Sort by Metrics

<Collection
  of="Service"
  display="rows"
  things={services}
  sort={(a, b) => {
    const aRequests = a.metrics?.requests || 0
    const bRequests = b.metrics?.requests || 0
    return bRequests - aRequests
  }}
/>

Service-Specific Collections

API Catalog

<Cards
  of="Service"
  things={apiServices}
  columns={3}
  renderCard={(service) => (
    <ServiceCard
      service={service}
      showStatus
      showMetrics
      actions={[
        { id: 'docs', label: 'View Docs', icon: 'Book' },
        { id: 'test', label: 'Test API', icon: 'Play' }
      ]}
    />
  )}
/>

Integration Marketplace

<Tiles
  of="Service"
  things={integrations}
  columns={4}
  renderCard={(service) => (
    <ServiceTile
      service={service}
      showOverlay
      overlayContent="name"
      onClick={() => installIntegration(service)}
    />
  )}
/>

Webhook Management

<Rows
  of="Service"
  things={webhooks}
  columns={[
    'url',
    'events',
    'deliveries',
    'successRate',
    'enabled'
  ]}
  selectable
  bulkActions={[
    { id: 'enable', label: 'Enable' },
    { id: 'disable', label: 'Disable' },
    { id: 'delete', label: 'Delete' }
  ]}
/>

Service Status Board

<Kanban
  of="Service"
  columns={[
    { id: 'healthy', title: 'Healthy', items: healthyServices },
    { id: 'degraded', title: 'Degraded', items: degradedServices },
    { id: 'down', title: 'Down', items: downServices }
  ]}
  renderCard={(service) => (
    <ServiceKanbanCard
      service={service}
      compact
      onClick={() => viewServiceHealth(service)}
    />
  )}
/>

Metrics Display

Services show context-appropriate metrics in card/list views:

API Metrics

Total requests
Requests per second
Average latency
Error rate
Uptime percentage

Integration Metrics

Connection status
Last sync time
Records synced
Sync errors
OAuth expiry

Webhook Metrics

Total deliveries
Success rate
Failed deliveries
Average latency
Last delivery time

Queue Metrics

Messages in queue
Messages in flight
Messages processed
Average wait time
Consumer count

Empty States

<Collection
  of="Service"
  display="cards"
  things={[]}
  empty={
    <EmptyState
      icon="Server"
      title="No services yet"
      description="Create your first service to get started"
      action={{
        label: "Create Service",
        href: "/services/new"
      }}
    />
  }
/>

Loading States

<Collection
  of="Service"
  display="cards"
  things={services}
  loading={isLoading}
  loadingComponent={
    <div className="grid grid-cols-3 gap-4">
      <ServiceCardSkeleton />
      <ServiceCardSkeleton />
      <ServiceCardSkeleton />
    </div>
  }
/>

Summary

Services render in collections as:

ServiceCard - Card grid display with metrics and status
ServiceListItem - Simple list display
ServiceRow - Table row with customizable columns
ServiceTile - Image-focused tile display
ServiceKanbanCard - Workflow board card

Each service type (API, Integration, Webhook, etc.) shows relevant properties and metrics appropriate for its context.

Service as Card

On this page