TenantCard

Display tenant organization information in a Material Design 3 card. Shows tenant name, slug, status badge, and member count with optional click interaction.

Installation

import { TenantCard } from '@happyvertical/smrt-tenancy/svelte';

Basic Usage

Display tenant information in a simple card.

<TenantCard tenant={tenant} />

With Status and Member Count

Add status badge and member count for more context.

<TenantCard
  tenant={tenant}
  status="active"
  memberCount={24}
/>
<TenantCard
  tenant={tenant}
  status="trial"
  memberCount={5}
/>

Interactive Cards

Make cards clickable for tenant selection or navigation.

<script lang="ts">
  let selectedTenant = $state<string | null>(null);
</script>

<TenantCard
  tenant={tenant}
  onclick={() => selectedTenant = tenant.id}
  selected={selectedTenant === tenant.id}
  status="active"
  memberCount={24}
/>

Status Variants

Different status badges automatically style based on tenant state.

<TenantCard tenant={tenant} status="active" />
<TenantCard tenant={tenant} status="trial" />
<TenantCard tenant={tenant} status="suspended" />
<TenantCard tenant={tenant} status="inactive" />

Props

TypeScript

import type { Tenant } from '@happyvertical/smrt-tenancy';

interface Props {
  tenant: Tenant;
  status?: string;
  memberCount?: number;
  onclick?: () => void;
  selected?: boolean;
}

Multi-Tenancy Integration

TenantCard works seamlessly with the smrt-tenancy module:

import { TenantsCollection } from '@happyvertical/smrt-tenancy';

// List all tenants user has access to
const tenants = await TenantsCollection.create({ db });
const userTenants = await tenants.list({
  where: {
    memberships: {
      userId: currentUser.id,
      status: 'active'
    }
  }
});

// Display in cards
{#each userTenants as tenant}
  <TenantCard
    {tenant}
    status={tenant.status}
    memberCount={tenant.memberCount}
    onclick={() => switchTenant(tenant.id)}
  />
{/each}

Use Cases

• Tenant switcher dropdown or modal
• Admin dashboard showing all tenants
• Organization selector during onboarding
• Multi-tenant workspace navigation
• Tenant management interfaces