License List

License management table with key display, seat allocation, and expiration warnings

SaaSProducts

Overview

LicenseList displays software licenses in a table with masked license keys, status badges, seat allocation bars, and expiration warnings. Supports pagination, per-row actions (view, revoke, regenerate, manage seats) based on license status, and a "Create License" button. Includes empty, error, and loading states.

Usage

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

<LicenseList
  licenses={licenses}
  totalCount={100}
  page={1}
  pageSize={10}
  onPageChange={setPage}
  onFiltersChange={setFilters}
  onView={(license) => router.push(`/licenses/${license.id}`)}
  onRevoke={(license) => revokeLicense(license.id)}
  onRegenerate={(license) => regenerateLicense(license.id)}
  onManageSeats={(license) => openSeatManager(license.id)}
  onCreate={() => router.push("/licenses/new")}
/>;

Variants

Empty

No licenses found

Licenses will appear here when issued.

With Error

Failed to load licenses. Please try again.

Dark

No licenses found

Licenses will appear here when issued.

Default with Data (code only)

<LicenseList
  licenses={[
    {
      id: "lic-001",
      customerId: "cust-123",
      productId: "prod-1",
      productName: "Enterprise Suite",
      key: "ABCD-EFGH-IJKL-MNOP",
      type: "subscription_linked",
      status: "active",
      seatCount: 10,
      allocatedSeats: 7,
      seatAllocationType: "automatic",
      validFrom: "2024-01-01T00:00:00Z",
      validUntil: "2025-01-01T00:00:00Z",
      createdAt: "2024-01-01T00:00:00Z",
      updatedAt: "2024-01-01T00:00:00Z",
    },
  ]}
  totalCount={1}
  page={1}
  pageSize={10}
  onPageChange={(page) => setPage(page)}
  onFiltersChange={(filters) => setFilters(filters)}
  onView={(license) => router.push(`/licenses/${license.id}`)}
  onRevoke={(license) => revokeLicense(license.id)}
  onRegenerate={(license) => regenerateLicense(license.id)}
  onManageSeats={(license) => openSeatManager(license.id)}
  onCreate={() => router.push("/licenses/new")}
/>