@flamingo-stack/openframe-frontend-core 0.0.852 → 0.0.854

package/dist/{tickets-board-SQY2Y6QV.cjs → tickets-board-YIFOVMDX.cjs}

@@ -10,9 +10,9 @@ var _chunkFDZOE5TLcjs = require('./chunk-FDZOE5TL.cjs');
 
 
 
-var _chunkP63CRPWIcjs = require('./chunk-P63CRPWI.cjs');
-require('./chunk-IUDBG3HJ.cjs');
-require('./chunk-U767P4JU.cjs');
+var _chunkFJXSKMQJcjs = require('./chunk-FJXSKMQJ.cjs');
+require('./chunk-5HMENXSR.cjs');
+require('./chunk-ACPOJE32.cjs');
 require('./chunk-KXFIYO4O.cjs');
 require('./chunk-7HH4Y27U.cjs');
 require('./chunk-QKCF77NZ.cjs');
@@ -1807,7 +1807,7 @@ require('./chunk-XIBCMGBW.cjs');
 require('./chunk-IGVAPIEW.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
-require('./chunk-W7OFAROY.cjs');
+require('./chunk-KA3L6D5N.cjs');
 require('./chunk-SSKMGH5O.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-32ASZMTV.cjs');
@@ -1816,7 +1816,7 @@ require('./chunk-4IYNDV3G.cjs');
 require('./chunk-6VOOPMP5.cjs');
 require('./chunk-ORO54HDF.cjs');
 require('./chunk-RUHKTWGB.cjs');
-require('./chunk-COWMXUHN.cjs');
+require('./chunk-4SSJ3T3N.cjs');
 require('./chunk-YSDB6HGQ.cjs');
 require('./chunk-FX35L4Y6.cjs');
 require('./chunk-KKFDRCQF.cjs');
@@ -1842,7 +1842,7 @@ function buildTicketsBoardFixture(cast) {
   const dana = assignee(cast.person("dana"));
   const alex = assignee(cast.person("alex"));
   return [
-    _chunkP63CRPWIcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
+    _chunkFJXSKMQJcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
@@ -1860,7 +1860,7 @@ function buildTicketsBoardFixture(cast) {
         tags: ["onboarding"]
       })
     ]),
-    _chunkP63CRPWIcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
+    _chunkFJXSKMQJcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
@@ -1884,7 +1884,7 @@ function buildTicketsBoardFixture(cast) {
         escalatedByUser: true
       })
     ]),
-    _chunkP63CRPWIcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
+    _chunkFJXSKMQJcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
         organizationName: _chunkFDZOE5TLcjs.DEMO_ORGANIZATIONS.acme.name,
@@ -1893,7 +1893,7 @@ function buildTicketsBoardFixture(cast) {
         activity: { kind: "waiting-external" }
       })
     ]),
-    _chunkP63CRPWIcjs.columnFromTicketStatus.call(void 0, 
+    _chunkFJXSKMQJcjs.columnFromTicketStatus.call(void 0, 
       "RESOLVED",
       [
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
@@ -1929,7 +1929,7 @@ function TicketsBoardScreen({ compact = false }) {
   const cast = _chunkLHV2R6QUcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkP63CRPWIcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFJXSKMQJcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
 }
 
 

package/dist/types/data-sync.d.ts

@@ -1,11 +1,14 @@
 /**
  * Every system a shared page's records are mirrored from, with the name a page shows for it. THE list: `DataSync`,
- * `DataSyncLine`'s marks, the docs hook and every host that answers a `sync` read it.
+ * `DataSyncLine`'s and `DataSyncIcon`'s marks, the docs hook and every host that answers a `sync` read it.
  */
 export declare const DATA_SYNC_SOURCES: {
     readonly clickup: "ClickUp";
     readonly hubspot: "HubSpot";
     readonly github: "GitHub";
+    readonly openframe: "OpenFrame";
+    readonly stripe: "Stripe";
+    readonly quickbooks: "QuickBooks";
 };
 export type DataSyncSource = keyof typeof DATA_SYNC_SOURCES;
 export declare function isDataSyncSource(value: unknown): value is DataSyncSource;

package/dist/types/data-sync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-sync.d.ts","sourceRoot":"","sources":["../../src/types/data-sync.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAExE;AAED;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,MAAM,EAAE,cAAc,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB"}
+{"version":3,"file":"data-sync.d.ts","sourceRoot":"","sources":["../../src/types/data-sync.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;CAOpB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAExE;AAED;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,MAAM,EAAE,cAAc,CAAC;IACvB,mFAAmF;IACnF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB"}

package/dist/types/data-sync.js

@@ -1,7 +1,10 @@
 const DATA_SYNC_SOURCES = {
   clickup: "ClickUp",
   hubspot: "HubSpot",
-  github: "GitHub"
+  github: "GitHub",
+  openframe: "OpenFrame",
+  stripe: "Stripe",
+  quickbooks: "QuickBooks"
 };
 function isDataSyncSource(value) {
   return typeof value === "string" && Object.prototype.hasOwnProperty.call(DATA_SYNC_SOURCES, value);

package/dist/types/index.cjs

@@ -28,7 +28,10 @@ var AVAILABLE_SVG_ICONS = [
 var DATA_SYNC_SOURCES = {
   clickup: "ClickUp",
   hubspot: "HubSpot",
-  github: "GitHub"
+  github: "GitHub",
+  openframe: "OpenFrame",
+  stripe: "Stripe",
+  quickbooks: "QuickBooks"
 };
 function isDataSyncSource(value) {
   return typeof value === "string" && Object.prototype.hasOwnProperty.call(DATA_SYNC_SOURCES, value);

package/dist/utils/presentation-for.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The entry of a value → presentation table for a value off the wire, `undefined` for one the table does not know.
+ * Own keys only: `in` or a bare index would answer `toString` or `constructor` with the prototype's function.
+ */
+export declare function presentationFor<K extends string, V>(map: Readonly<Record<K, V>>, key: string | null | undefined): V | undefined;
+//# sourceMappingURL=presentation-for.d.ts.map

package/dist/utils/presentation-for.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation-for.d.ts","sourceRoot":"","sources":["../../src/utils/presentation-for.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,EACjD,GAAG,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAC3B,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC7B,CAAC,GAAG,SAAS,CAEf"}

package/dist/utils/presentation-for.js

@@ -0,0 +1,7 @@
+"use client";
+function presentationFor(map, key) {
+  return key != null && Object.prototype.hasOwnProperty.call(map, key) ? map[key] : void 0;
+}
+export {
+  presentationFor
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.852",
+  "version": "0.0.854",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/features/cloud-tenants/index.ts

@@ -1,27 +1,32 @@
 'use client';
 
-export { TenantsTableView } from './tenants-table-view';
-export type { TenantsTableViewProps } from './tenants-table-view';
+export { TENANTS_TABLE_FILTER_COLUMNS, TenantsTableView } from './tenants-table-view';
+export type { TenantsTableFilterColumn, TenantsTableFilters, TenantsTableViewProps } from './tenants-table-view';
 export { TenantCell } from './tenant-cell';
 export type { TenantCellProps } from './tenant-cell';
 export { TenantCustomerCell } from './tenant-customer-cell';
 export type { TenantCustomerCellProps } from './tenant-customer-cell';
+export { TenantLicensesCell } from './tenant-licenses-cell';
+export type { TenantLicensesCellProps } from './tenant-licenses-cell';
 export { TenantAccessCell } from './tenant-access-cell';
 export type { TenantAccessCellProps } from './tenant-access-cell';
 export { TENANT_COLUMNS, TENANTS_TABLE_COLUMNS } from './tenants-table-columns';
 export type { TenantsTableColumn } from './tenants-table-columns';
-export type { TenantRow } from './tenant-row';
+export type { MultiCustomerTenantRow, TenantCustomer, TenantLicenseSummary, TenantRow } from './tenant-row';
 export {
   accessStateTag,
   formatLastRead,
   lastReadAt,
+  licenseSummaryLines,
   providerMark,
   TENANT_EMPTY_VALUE,
+  unattributedLabel,
   usersCountLabel,
 } from './tenant-presentation';
 export type {
   ProviderLogo,
   ProviderMark,
+  TenantLicenseLines,
   TenantStatusTag,
   TenantAccessState,
   TenantProvider,

package/src/components/features/cloud-tenants/single-customer-tenants-table-view.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+// Lib main's tenants list, one customer per tenant: `TenantsTableView`'s default variant, the list a host renders while
+// tenant-management-v2 is off. Its markup is lib main's to the class; it is deleted with that variant.
+
+import { useMemo } from 'react';
+import { cn } from '../../../utils/cn';
+import { openInNewTab } from '../../../utils/open-in-new-tab';
+import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
+import { Button } from '../../ui/button';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { SquareAvatar } from '../../ui/square-avatar';
+import { Tag } from '../../ui/tag';
+import { TruncateText } from '../../ui/truncate-text';
+import { TenantCell } from './tenant-cell';
+import { accessStateTag, formatLastRead, usersCountLabel } from './tenant-presentation';
+import type { TenantRow } from './tenant-row';
+import type { TenantsTableColumn } from './tenants-table-columns';
+
+/** Column layout of the single-customer list (Figma 1699-8249: Tenant, Customers, Access, open). */
+const SINGLE_CUSTOMER_TENANT_COLUMNS = {
+  tenant: { id: 'tenant', header: 'Tenant', width: 'flex-1 min-w-0' },
+  customer: { id: 'customer', header: 'Customers', width: 'w-[220px] content-lg:w-[340px]', hideAt: 'md' },
+  access: { id: 'access', header: 'Access', width: 'w-[200px] content-lg:w-[216px]' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+} satisfies Record<string, TenantsTableColumn>;
+
+const getRowId = (row: TenantRow) => row.id;
+
+const columnMeta = ({ width, hideAt, align }: TenantsTableColumn) => ({ width, hideAt, align });
+
+/** A tenant still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingTenant = (id: string): TenantRow => ({
+  id,
+  name: '',
+  provider: '',
+  customer: { name: '' },
+  accessState: '',
+});
+
+/** CUSTOMERS column: customer logo + name over the synced user count. */
+function SingleCustomerTenantCustomerCell({
+  name,
+  imageUrl,
+  userCount,
+}: {
+  name: string;
+  imageUrl?: string | null;
+  userCount?: number | null;
+}) {
+  // While the tenant is read (a loading scope) the user count is a bar too (its label is never empty).
+  const loading = useLoadingScope();
+  return (
+    <div className="flex min-w-0 flex-col justify-center">
+      <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+        <SquareAvatar src={imageUrl ?? undefined} alt={name} fallback={name} size="xs" variant="square" />
+        <TruncateText>{name}</TruncateText>
+      </div>
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
+        {usersCountLabel(userCount)}
+      </TruncateText>
+    </div>
+  );
+}
+
+/** ACCESS column: the access tag over "Last read: ...". */
+function SingleCustomerTenantAccessCell({
+  accessState,
+  lastReadAt,
+  now,
+}: {
+  accessState: string;
+  lastReadAt?: string | null;
+  now?: Date;
+}) {
+  // While the tenant is read (a loading scope) the access tag and its last read are their loading forms.
+  const loading = useLoadingScope();
+  return (
+    <div className="flex min-w-0 flex-col justify-center gap-[var(--spacing-system-xxs)]">
+      <Tag {...accessStateTag(accessState)} loading={loading} className="self-start" />
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
+        {`Last read: ${formatLastRead(lastReadAt, now)}`}
+      </TruncateText>
+    </div>
+  );
+}
+
+/** The row's open-in-new-tab button: static chrome, drawn real and inert while the row is read. */
+function OpenTenantButton({ href, name }: { href: string; name: string }) {
+  const loading = useLoadingScope();
+  return (
+    // The row itself is the details link; a nested `<a>` is invalid, so this opens the same href.
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
+        variant="outline"
+        size="icon"
+        leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+        aria-label={`Open ${name} in new tab`}
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}
+
+export interface SingleCustomerTenantsTableViewProps {
+  /** The default: one customer per tenant, no licences and no funnels. */
+  variant?: 'single-customer';
+  rows: TenantRow[];
+  /** Where a row leads: the row is a link to it, and its last cell opens it in a new tab. */
+  getHref: (row: TenantRow) => string;
+  /** The search the rows answer; named by the "no match" message. */
+  search?: string;
+  /** Funnels belong to the multi-customer list. */
+  filters?: never;
+  /** The rows on screen are the previous result of a search still loading: they dim. */
+  isPending?: boolean;
+  /** All matching tenants, loaded or not. Default: the rows given. */
+  totalCount?: number;
+  stickyHeaderOffset?: string;
+  skeletonRows?: number;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onLoadMore?: () => void;
+  /** The clock "Last read" is relative to. Default: the moment of the render. */
+  now?: Date;
+}
+
+/** The rows a loading tenants table draws when the host states none (a typical page of tenants). */
+const TENANTS_TABLE_SKELETON_ROWS = 20;
+
+/** The tenants list: tenant, customer, access state and a way into each tenant's details. */
+export function SingleCustomerTenantsTableView({
+  rows,
+  getHref,
+  search = '',
+  isPending = false,
+  totalCount,
+  stickyHeaderOffset,
+  skeletonRows = TENANTS_TABLE_SKELETON_ROWS,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  onLoadMore,
+  now,
+}: SingleCustomerTenantsTableViewProps) {
+  const columns = useMemo<ColumnDef<TenantRow>[]>(
+    () => [
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.tenant.id,
+        header: SINGLE_CUSTOMER_TENANT_COLUMNS.tenant.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <TenantCell provider={row.original.provider} name={row.original.name} domain={row.original.domain} />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.tenant),
+      },
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.customer.id,
+        header: SINGLE_CUSTOMER_TENANT_COLUMNS.customer.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <SingleCustomerTenantCustomerCell
+            name={row.original.customer.name}
+            imageUrl={row.original.customer.imageUrl}
+            userCount={row.original.userCount}
+          />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.customer),
+      },
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.access.id,
+        header: SINGLE_CUSTOMER_TENANT_COLUMNS.access.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <SingleCustomerTenantAccessCell
+            accessState={row.original.accessState}
+            lastReadAt={row.original.lastReadAt}
+            now={now}
+          />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.access),
+      },
+      {
+        id: SINGLE_CUSTOMER_TENANT_COLUMNS.open.id,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <OpenTenantButton href={getHref(row.original)} name={row.original.name} />
+        ),
+        enableSorting: false,
+        meta: columnMeta(SINGLE_CUSTOMER_TENANT_COLUMNS.open),
+      },
+    ],
+    [getHref, now],
+  );
+
+  // A page's loading scope: the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loading = useLoadingScope();
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows, loadingTenant) : null),
+    [loading, skeletonRows],
+  );
+  const table = useDataTable<TenantRow>({ data: loadingRows ?? rows, columns, getRowId, enableSorting: false });
+
+  return (
+    // Dim, don't unmount, the stale rows while a deferred search refetches.
+    <div className={cn('transition-opacity duration-200', isPending && 'opacity-60')}>
+      <DataTable table={table}>
+        <DataTable.Header
+          stickyHeader={stickyHeaderOffset !== undefined}
+          stickyHeaderOffset={stickyHeaderOffset}
+          rightSlot={<DataTable.RowCount itemName="result" totalCount={totalCount ?? rows.length} loading={loading} />}
+        />
+        <DataTable.Body
+          loadingCells
+          skeletonRows={skeletonRows}
+          emptyState={{
+            title: 'No tenants match',
+            description: `Nothing matches "${search}". Try a different name, domain or customer.`,
+          }}
+          rowClassName="mb-[var(--spacing-system-xxs)]"
+          rowHref={getHref}
+        />
+        {rows.length > 0 && onLoadMore && (
+          <DataTable.InfiniteFooter
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            onLoadMore={onLoadMore}
+          />
+        )}
+      </DataTable>
+    </div>
+  );
+}

package/src/components/features/cloud-tenants/tenant-access-cell.tsx

@@ -8,20 +8,27 @@ import { accessStateTag, formatLastRead } from './tenant-presentation';
 export interface TenantAccessCellProps {
   accessState: string;
   lastReadAt?: string | null;
+  /** A person paused the sync: said instead of the last read. */
+  syncPaused?: boolean;
   /** The clock "Last read" is relative to. Default: the moment of the render. */
   now?: Date;
 }
 
-/** ACCESS column: the access tag over "Last read: ...". */
-export function TenantAccessCell({ accessState, lastReadAt, now }: TenantAccessCellProps) {
+/** ACCESS column: the access tag over "Last read: ..." or "Sync paused"; a phone keeps the tag alone (Figma 3033-9343). */
+export function TenantAccessCell({ accessState, lastReadAt, syncPaused = false, now }: TenantAccessCellProps) {
   // While the tenant is read (a loading scope) the access tag and its last read are their loading forms.
   const loading = useLoadingScope();
+  const line = syncPaused ? 'Sync paused' : lastReadAt ? `Last read: ${formatLastRead(lastReadAt, now)}` : null;
   return (
     <div className="flex min-w-0 flex-col justify-center gap-[var(--spacing-system-xxs)]">
       <Tag {...accessStateTag(accessState)} loading={loading} className="self-start" />
-      <TruncateText variant="h6" tone="secondary" loading={loading}>
-        {`Last read: ${formatLastRead(lastReadAt, now)}`}
-      </TruncateText>
+      {(loading || line) && (
+        <div className="hidden min-w-0 content-md:block">
+          <TruncateText variant="h6" tone="secondary" loading={loading}>
+            {line ?? ''}
+          </TruncateText>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/features/cloud-tenants/tenant-customer-cell.tsx

@@ -3,27 +3,63 @@
 import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { TruncateText } from '../../ui/truncate-text';
-import { usersCountLabel } from './tenant-presentation';
+import { lowercaseUsersCountLabel, TENANT_EMPTY_VALUE, unattributedLabel } from './tenant-presentation';
+import type { TenantCustomer } from './tenant-row';
 
 export interface TenantCustomerCellProps {
-  name: string;
-  /** A URL the browser can load as is. */
-  imageUrl?: string | null;
+  /** In the host's order: the cell names the first and counts the rest. */
+  customers: readonly TenantCustomer[];
   userCount?: number | null;
+  /** Users no customer's rule claims: while there are any, the count line says how many, in the warning colour. */
+  unattributedUserCount?: number | null;
+  /** Nothing has been read from this directory yet: the count line says so. */
+  neverRead?: boolean;
 }
 
-/** CUSTOMERS column: customer logo + name over the synced user count. */
-export function TenantCustomerCell({ name, imageUrl, userCount }: TenantCustomerCellProps) {
+/**
+ * CUSTOMERS column: the first customer's logo + name and "+N" for the rest, over the synced user count — or
+ * "30 of 412 unattributed" while some users belong to no customer, or "Never read" before the first read.
+ */
+export function TenantCustomerCell({
+  customers,
+  userCount,
+  unattributedUserCount,
+  neverRead = false,
+}: TenantCustomerCellProps) {
   // While the tenant is read (a loading scope) the user count is a bar too (its label is never empty).
   const loading = useLoadingScope();
+  const [first] = customers;
+  const more = customers.length - 1;
+  const unattributed = unattributedLabel(unattributedUserCount, userCount);
   return (
     <div className="flex min-w-0 flex-col justify-center">
-      <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-        <SquareAvatar src={imageUrl ?? undefined} alt={name} fallback={name} size="xs" variant="square" />
-        <TruncateText>{name}</TruncateText>
-      </div>
-      <TruncateText variant="h6" tone="secondary" loading={loading}>
-        {usersCountLabel(userCount)}
+      {first ? (
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+          <SquareAvatar
+            src={first.imageUrl ?? undefined}
+            alt={first.name}
+            fallback={first.name}
+            size="xs"
+            variant="square"
+          />
+          <TruncateText>{first.name}</TruncateText>
+          {more > 0 && (
+            <span className="shrink-0 text-ods-text-secondary text-h4">
+              +{more}
+              <span className="sr-only">{more === 1 ? ' more customer' : ' more customers'}</span>
+            </span>
+          )}
+        </div>
+      ) : (
+        <TruncateText>{TENANT_EMPTY_VALUE}</TruncateText>
+      )}
+      <TruncateText
+        variant="h6"
+        tone="secondary"
+        loading={loading}
+        className={unattributed ? 'text-ods-warning' : undefined}
+      >
+        {unattributed ?? (neverRead ? 'Never read' : lowercaseUsersCountLabel(userCount))}
       </TruncateText>
     </div>
   );

package/src/components/features/cloud-tenants/tenant-licenses-cell.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { TruncateText } from '../../ui/truncate-text';
+import { licenseSummaryLines } from './tenant-presentation';
+import type { TenantLicenseSummary } from './tenant-row';
+
+export interface TenantLicensesCellProps {
+  licenses?: TenantLicenseSummary | null;
+}
+
+/** LICENCES column: assigned of purchased over what is unused (Figma 3025-3536). */
+export function TenantLicensesCell({ licenses }: TenantLicensesCellProps) {
+  // While the tenant is read (a loading scope) both lines are bars.
+  const loading = useLoadingScope();
+  const { value, detail, warning } = licenseSummaryLines(licenses);
+  return (
+    <div className="flex min-w-0 flex-col justify-center">
+      <TruncateText loading={loading}>{value}</TruncateText>
+      {(loading || detail) && (
+        <TruncateText variant="h6" tone="secondary" loading={loading} className={cn(warning && 'text-ods-warning')}>
+          {detail ?? ''}
+        </TruncateText>
+      )}
+    </div>
+  );
+}

package/src/components/features/cloud-tenants/tenant-presentation.ts

@@ -11,10 +11,12 @@
 import type { ComponentType, SVGProps } from 'react';
 import { formatRelativeTimeFrom } from '../../../utils/date-utils';
 import { formatDate } from '../../../utils/format-date';
+import { presentationFor } from '../../../utils/presentation-for';
 import { GoogleLogoIcon } from '../../icons-v2-generated/brand-logos/google-logo-icon';
 import { Office365LogoIcon } from '../../icons-v2-generated/brand-logos/office-365-logo-icon';
 import { CodingForkIcon } from '../../icons-v2-generated/coding/coding-fork-icon';
 import type { TagProps } from '../../ui/tag';
+import type { TenantLicenseSummary } from './tenant-row';
 
 /** What a cell shows when it has no value. */
 export const TENANT_EMPTY_VALUE = '—';
@@ -33,10 +35,6 @@ export type TenantAccessState =
 /** The directory providers a tenant connects to. */
 export type TenantProvider = 'MICROSOFT_365' | 'GOOGLE_WORKSPACE';
 
-function presentationFor<K extends string, V>(map: Record<K, V>, key: string | null | undefined): V | undefined {
-  return key != null && key in map ? map[key as K] : undefined;
-}
-
 // Colours read off the Figma list (node 1699-8249): red for the two states that
 // need the customer's admin, grey for read-only, outline for write-available,
 // green for write-enabled. NOT_AUTHORISED has no frame of its own
@@ -109,3 +107,47 @@ export function usersCountLabel(count: number | null | undefined): string {
   if (count == null) return TENANT_EMPTY_VALUE;
   return `${count} ${count === 1 ? 'User' : 'Users'}`;
 }
+
+/** The multi-customer list's count line (Figma 3025-3536): "227 users", the empty mark before the first read. */
+export function lowercaseUsersCountLabel(count: number | null | undefined): string {
+  if (count == null) return TENANT_EMPTY_VALUE;
+  return `${count} ${count === 1 ? 'user' : 'users'}`;
+}
+
+/**
+ * "30 of 412 unattributed" while some synced users belong to no customer (no customer's rule claims them), or `null`
+ * while every user is attributed or nothing has been read.
+ */
+export function unattributedLabel(
+  unattributed: number | null | undefined,
+  users: number | null | undefined,
+): string | null {
+  if (unattributed == null || unattributed <= 0) return null;
+  return users == null ? `${unattributed} unattributed` : `${unattributed} of ${users} unattributed`;
+}
+
+/** The share of purchased seats left unused that the list calls out: every row of Figma 3025-3536 falls on its side. */
+const UNUSED_WARNING_SHARE = 0.1;
+
+export interface TenantLicenseLines {
+  value: string;
+  detail: string | null;
+  /** The detail is worth a look: draw it in the warning colour. */
+  warning: boolean;
+}
+
+/**
+ * The LICENCES cell: "118 of 120" over "2 unused"; "88 assigned" over "Total not available" where the provider reports
+ * no purchased seats; the empty mark until the numbers have been read.
+ */
+export function licenseSummaryLines(summary: TenantLicenseSummary | null | undefined): TenantLicenseLines {
+  if (!summary) return { value: TENANT_EMPTY_VALUE, detail: null, warning: false };
+  const { assigned, purchased } = summary;
+  if (purchased == null) return { value: `${assigned} assigned`, detail: 'Total not available', warning: false };
+  const unused = summary.unused ?? purchased - assigned;
+  return {
+    value: `${assigned} of ${purchased}`,
+    detail: unused < 0 ? `${-unused} over` : `${unused} unused`,
+    warning: unused > 0 && unused / purchased >= UNUSED_WARNING_SHARE,
+  };
+}