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

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

@@ -1,17 +1,26 @@
-/** One connected directory tenant, as the tenants list shows it. */
-export interface TenantRow {
+/** A customer a tenant's directory serves. */
+export interface TenantCustomer {
+  name: string;
+  /** A URL the browser can load as is. */
+  imageUrl?: string | null;
+}
+
+/** A directory's seats over its paid SKUs. */
+export interface TenantLicenseSummary {
+  assigned: number;
+  /** Absent when the provider does not report purchased seats (Google Workspace). */
+  purchased?: number | null;
+  /** Purchased minus assigned; negative when the provider counts suspended seats as assigned. */
+  unused?: number | null;
+}
+
+interface TenantRowBase {
   id: string;
   /** The tenant's own name in its directory. */
   name: string;
   /** The directory provider (`MICROSOFT_365`, `GOOGLE_WORKSPACE`); an unknown value keeps its raw name. */
   provider: string;
   domain?: string | null;
-  /** The customer the tenant belongs to. */
-  customer: {
-    name: string;
-    /** A URL the browser can load as is. */
-    imageUrl?: string | null;
-  };
   /** Users read from the directory; absent before the first read. */
   userCount?: number | null;
   /** What the last access probe found (`WRITE_ENABLED`, `DISCONNECTED`, ...). */
@@ -19,3 +28,24 @@ export interface TenantRow {
   /** When the directory was last read; absent when it never was. */
   lastReadAt?: string | null;
 }
+
+/**
+ * A tenant of the single-customer list, `TenantsTableView`'s default variant, which accepts no other row: a
+ * multi-customer host that forgets `variant` does not compile. Deleted with that variant.
+ */
+export interface TenantRow extends TenantRowBase {
+  /** The customer the tenant belongs to. */
+  customer: TenantCustomer;
+}
+
+/** A tenant of the multi-customer list (`variant="multi-customer"`): a directory serving any number of customers. */
+export interface MultiCustomerTenantRow extends TenantRowBase {
+  /** The customers the directory serves, in the order the host shows them; empty while it serves none. */
+  customers: readonly TenantCustomer[];
+  /** Of the users read, the users no customer's rule claims; absent before the first read. */
+  unattributedUserCount?: number | null;
+  /** A person paused the sync: the row says so instead of when it was last read. */
+  syncPaused?: boolean;
+  /** Absent until the licence numbers have been read. */
+  licenses?: TenantLicenseSummary | null;
+}

package/src/components/features/cloud-tenants/tenants-table-columns.ts

@@ -9,22 +9,25 @@ export interface TenantsTableColumn {
 }
 
 /**
- * Column layout of the tenants list (Figma 1699-8249: Tenant, Customers,
- * Access, open). Data-only on purpose: the live table and the route skeleton
+ * Column layout of the tenants list (Figma 3025-3536: Tenant, Customers, Licences, Access, open). A tablet drops the
+ * licence cells and keeps the funnel (3032-4579); a phone keeps the tenant, the access tag and open (3033-9343).
+ * Data-only on purpose: the live table and the route skeleton
  * read the SAME widths, so nothing shifts when the rows arrive, and a skeleton
  * never imports the table's cell renderers.
  */
 export const 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' },
+  customer: { id: 'customer', header: 'Customers', width: 'w-[220px] content-lg:w-[280px]', hideAt: 'md' },
+  licenses: { id: 'licenses', header: 'Licences', width: 'w-[150px]', hideAt: 'lg' },
+  access: { id: 'access', header: 'Access', width: 'flex-none content-md:w-[200px] content-lg:w-[216px]' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', align: 'right' },
 } satisfies Record<string, TenantsTableColumn>;
 
 /** Render order of the standalone list. */
 export const TENANTS_TABLE_COLUMNS: readonly TenantsTableColumn[] = [
   TENANT_COLUMNS.tenant,
   TENANT_COLUMNS.customer,
+  TENANT_COLUMNS.licenses,
   TENANT_COLUMNS.access,
   TENANT_COLUMNS.open,
 ];

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

@@ -5,24 +5,37 @@ 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 {
+  type ColumnDef,
+  type ColumnFiltersState,
+  DataTable,
+  type DataTableFilterOption,
+  dataTableLoadingRows,
+  type Row,
+  useDataTable,
+} from '../../ui/data-table';
 import { useLoadingScope } from '../../ui/loading-scope';
+import {
+  SingleCustomerTenantsTableView,
+  type SingleCustomerTenantsTableViewProps,
+} from './single-customer-tenants-table-view';
 import { TenantAccessCell } from './tenant-access-cell';
 import { TenantCell } from './tenant-cell';
 import { TenantCustomerCell } from './tenant-customer-cell';
-import type { TenantRow } from './tenant-row';
+import { TenantLicensesCell } from './tenant-licenses-cell';
+import type { MultiCustomerTenantRow } from './tenant-row';
 import { TENANT_COLUMNS, type TenantsTableColumn } from './tenants-table-columns';
 
-const getRowId = (row: TenantRow) => row.id;
+const getRowId = (row: MultiCustomerTenantRow) => 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 => ({
+const loadingTenant = (id: string): MultiCustomerTenantRow => ({
   id,
   name: '',
   provider: '',
-  customer: { name: '' },
+  customers: [{ name: '' }],
   accessState: '',
 });
 
@@ -45,16 +58,35 @@ function OpenTenantButton({ href, name }: { href: string; name: string }) {
   );
 }
 
+/** The columns whose header carries a funnel (Figma 3036-4860). */
+export const TENANTS_TABLE_FILTER_COLUMNS = ['tenant', 'customer', 'licenses', 'access'] as const;
+
+export type TenantsTableFilterColumn = (typeof TENANTS_TABLE_FILTER_COLUMNS)[number];
+
+/** Each column's funnel: what it offers, what is ticked. The host narrows the rows; the view only draws. */
+export interface TenantsTableFilters {
+  /** A column the host leaves out has no funnel; one with no options draws its bare label. */
+  options: Partial<Record<TenantsTableFilterColumn, DataTableFilterOption[]>>;
+  selections: Readonly<Record<TenantsTableFilterColumn, readonly string[]>>;
+  onChange: (next: Record<TenantsTableFilterColumn, string[]>) => void;
+  /** The options are in flight: the funnels draw, inert. */
+  pending?: boolean;
+}
+
 /**
  * Click handler that opens `href` in a new tab. The row is itself the details
  * link and an `<a>` cannot be nested in an `<a>`, so the button opens it by script.
  */
-export interface TenantsTableViewProps {
-  rows: TenantRow[];
+interface MultiCustomerTenantsTableViewProps {
+  /** A directory per row that serves any number of customers, with its licences and the column funnels. */
+  variant: 'multi-customer';
+  rows: MultiCustomerTenantRow[];
   /** 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;
+  getHref: (row: MultiCustomerTenantRow) => string;
   /** The search the rows answer; named by the "no match" message. */
   search?: string;
+  /** The funnels of the column headers. Absent: none, as on the product page. */
+  filters?: TenantsTableFilters;
   /** 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. */
@@ -68,14 +100,27 @@ export interface TenantsTableViewProps {
   now?: Date;
 }
 
+/** The single-customer list unless `variant` is 'multi-customer', the one that takes funnels and needs its own rows. */
+export type TenantsTableViewProps = SingleCustomerTenantsTableViewProps | MultiCustomerTenantsTableViewProps;
+
+/** The tenants list, in the layout its `variant` names. */
+export function TenantsTableView(props: TenantsTableViewProps) {
+  return props.variant === 'multi-customer' ? (
+    <MultiCustomerTenantsTableView {...props} />
+  ) : (
+    <SingleCustomerTenantsTableView {...props} />
+  );
+}
+
 /** 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 TenantsTableView({
+/** The tenants list: tenant, customers, licences, access state and a way into each tenant's details. */
+function MultiCustomerTenantsTableView({
   rows,
   getHref,
   search = '',
+  filters,
   isPending = false,
   totalCount,
   stickyHeaderOffset,
@@ -84,51 +129,75 @@ export function TenantsTableView({
   isFetchingNextPage = false,
   onLoadMore,
   now,
-}: TenantsTableViewProps) {
-  const columns = useMemo<ColumnDef<TenantRow>[]>(
-    () => [
+}: MultiCustomerTenantsTableViewProps) {
+  const filterOptions = filters?.options;
+  const filtersPending = filters?.pending ?? false;
+  const columns = useMemo<ColumnDef<MultiCustomerTenantRow>[]>(() => {
+    /**
+     * A column's funnel, while the host offers one. Declared with no options too: below lg only a filtered column keeps
+     * its header, and the column filter draws the bare label when there is nothing to choose.
+     */
+    const funnel = (id: TenantsTableFilterColumn) => {
+      const options = filterOptions?.[id];
+      return options ? { filter: { options, pending: filtersPending } } : {};
+    };
+    return [
       {
         id: TENANT_COLUMNS.tenant.id,
         header: TENANT_COLUMNS.tenant.header,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
           <TenantCell provider={row.original.provider} name={row.original.name} domain={row.original.domain} />
         ),
         enableSorting: false,
-        meta: columnMeta(TENANT_COLUMNS.tenant),
+        meta: { ...columnMeta(TENANT_COLUMNS.tenant), ...funnel('tenant') },
       },
       {
         id: TENANT_COLUMNS.customer.id,
         header: TENANT_COLUMNS.customer.header,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
           <TenantCustomerCell
-            name={row.original.customer.name}
-            imageUrl={row.original.customer.imageUrl}
+            customers={row.original.customers}
             userCount={row.original.userCount}
+            unattributedUserCount={row.original.unattributedUserCount}
+            neverRead={row.original.lastReadAt == null && row.original.userCount == null}
           />
         ),
         enableSorting: false,
-        meta: columnMeta(TENANT_COLUMNS.customer),
+        meta: { ...columnMeta(TENANT_COLUMNS.customer), ...funnel('customer') },
+      },
+      {
+        id: TENANT_COLUMNS.licenses.id,
+        header: TENANT_COLUMNS.licenses.header,
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
+          <TenantLicensesCell licenses={row.original.licenses} />
+        ),
+        enableSorting: false,
+        meta: { ...columnMeta(TENANT_COLUMNS.licenses), ...funnel('licenses') },
       },
       {
         id: TENANT_COLUMNS.access.id,
         header: TENANT_COLUMNS.access.header,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
-          <TenantAccessCell accessState={row.original.accessState} lastReadAt={row.original.lastReadAt} now={now} />
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
+          <TenantAccessCell
+            accessState={row.original.accessState}
+            lastReadAt={row.original.lastReadAt}
+            syncPaused={row.original.syncPaused}
+            now={now}
+          />
         ),
         enableSorting: false,
-        meta: columnMeta(TENANT_COLUMNS.access),
+        meta: { ...columnMeta(TENANT_COLUMNS.access), ...funnel('access') },
       },
       {
         id: TENANT_COLUMNS.open.id,
-        cell: ({ row }: { row: Row<TenantRow> }) => (
+        cell: ({ row }: { row: Row<MultiCustomerTenantRow> }) => (
           <OpenTenantButton href={getHref(row.original)} name={row.original.name} />
         ),
         enableSorting: false,
         meta: columnMeta(TENANT_COLUMNS.open),
       },
-    ],
-    [getHref, now],
-  );
+    ];
+  }, [getHref, now, filterOptions, filtersPending]);
 
   // A page's loading scope: the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
   const loading = useLoadingScope();
@@ -136,7 +205,31 @@ export function TenantsTableView({
     () => (loading ? dataTableLoadingRows(skeletonRows, loadingTenant) : null),
     [loading, skeletonRows],
   );
-  const table = useDataTable<TenantRow>({ data: loadingRows ?? rows, columns, getRowId, enableSorting: false });
+  const selections = filters?.selections;
+  const onFiltersChange = filters?.onChange;
+  const columnFilters = useMemo<ColumnFiltersState>(
+    () =>
+      TENANTS_TABLE_FILTER_COLUMNS.flatMap(id =>
+        selections && selections[id].length > 0 ? [{ id, value: selections[id] }] : [],
+      ),
+    [selections],
+  );
+  const table = useDataTable<MultiCustomerTenantRow>({
+    data: loadingRows ?? rows,
+    columns,
+    getRowId,
+    enableSorting: false,
+    state: { columnFilters },
+    onColumnFiltersChange: updater => {
+      const next = typeof updater === 'function' ? updater(columnFilters) : updater;
+      const picked = (id: TenantsTableFilterColumn) => {
+        const value = next.find(filter => filter.id === id)?.value;
+        return Array.isArray(value) ? (value as string[]) : [];
+      };
+      const selected = Object.fromEntries(TENANTS_TABLE_FILTER_COLUMNS.map(id => [id, picked(id)]));
+      onFiltersChange?.(selected as Record<TenantsTableFilterColumn, string[]>);
+    },
+  });
 
   return (
     // Dim, don't unmount, the stale rows while a deferred search refetches.
@@ -152,7 +245,9 @@ export function TenantsTableView({
           skeletonRows={skeletonRows}
           emptyState={{
             title: 'No tenants match',
-            description: `Nothing matches "${search}". Try a different name, domain or customer.`,
+            description: search
+              ? `Nothing matches "${search}". Try a different name, domain or customer.`
+              : 'Nothing matches the selected filters. Try adjusting them.',
           }}
           rowClassName="mb-[var(--spacing-system-xxs)]"
           rowHref={getHref}

package/src/components/features/devices/device-directory.ts

@@ -0,0 +1,55 @@
+import { presentationFor } from '../../../utils/presentation-for';
+import type { DeviceRow } from './types';
+
+/** The schema's `DirectoryUserLink`: who a device is tied to in a directory. */
+export type DeviceDirectoryUserLink = 'PRIMARY' | 'SHARED' | 'NONE';
+
+/** The schema's `DirectorySource`: a directory that knows a device. */
+export type DeviceDirectorySource = 'MICROSOFT_365' | 'GOOGLE_WORKSPACE';
+
+const USER_LINK_LABELS = {
+  PRIMARY: 'Primary user',
+  SHARED: 'Shared',
+  NONE: 'No user',
+} satisfies Record<DeviceDirectoryUserLink, string>;
+
+const SOURCE_LABELS = {
+  MICROSOFT_365: 'M365',
+  GOOGLE_WORKSPACE: 'GOOGLE',
+} satisfies Record<DeviceDirectorySource, string>;
+
+/** The USER funnel's option (Figma 1136:64807). A value this build does not know keeps its own name. */
+export function directoryUserLinkLabel(link: string): string {
+  return presentationFor(USER_LINK_LABELS, link) ?? link;
+}
+
+/** The SOURCES tag: which directory knows the device. */
+export function directorySourceLabel(source: string): string {
+  return presentationFor(SOURCE_LABELS, source) ?? source;
+}
+
+const EMPTY_USER = '—';
+
+// The row carries the wire's string: a member compared to it is typed here, so a misspelt one fails to compile.
+const PRIMARY_LINK: DeviceDirectoryUserLink = 'PRIMARY';
+const SHARED_LINK: DeviceDirectoryUserLink = 'SHARED';
+
+/**
+ * The USER cell's two lines (Figma 865:55733): the primary user over "Primary user", "Shared" over how many, or the
+ * empty mark when nobody is tied to the device.
+ */
+export function directoryUserLines(
+  device: Pick<DeviceRow, 'directoryUserLink' | 'directoryUserName' | 'directoryUserCount'>,
+): {
+  name: string;
+  detail: string | null;
+} {
+  if (device.directoryUserLink === PRIMARY_LINK) {
+    return { name: device.directoryUserName ?? EMPTY_USER, detail: USER_LINK_LABELS.PRIMARY };
+  }
+  if (device.directoryUserLink === SHARED_LINK) {
+    const count = device.directoryUserCount ?? 0;
+    return { name: USER_LINK_LABELS.SHARED, detail: `${count} recent ${count === 1 ? 'user' : 'users'}` };
+  }
+  return { name: EMPTY_USER, detail: null };
+}

package/src/components/features/devices/devices-filter-toolbar.tsx

@@ -29,6 +29,8 @@ export interface DevicesFilterToolbarProps {
   selectedTags: FilterModalProps['selectedTags'];
   onTagsChange: FilterModalProps['onTagsChange'];
   isLoading?: boolean;
+  /** The search field's prompt. Default "Search for Devices". */
+  searchPlaceholder?: string;
 
   /**
    * When true (default), pins the toolbar at the top with the same negative-margin
@@ -67,6 +69,7 @@ export function DevicesFilterToolbar({
   selectedTags,
   onTagsChange,
   isLoading,
+  searchPlaceholder = 'Search for Devices',
   sticky = true,
   toolbarRef,
 }: DevicesFilterToolbarProps) {
@@ -87,7 +90,7 @@ export function DevicesFilterToolbar({
             onSearchChange={onSearchChange}
             onTagRemove={onTagRemove}
             onClearAll={onClearAll}
-            placeholder="Search for Devices"
+            placeholder={searchPlaceholder}
             addMorePlaceholder="Add More..."
           />
         </div>

package/src/components/features/devices/devices-panel-view.tsx

@@ -99,6 +99,8 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
   hideColumns?: string[];
   /** Filter keys to drop from the funnels and the grid row; the column itself stays. */
   hideFilters?: string[];
+  /** Adds the USER and SOURCES columns and funnels, for a tenant with directories. Default: neither. */
+  directoryColumns?: boolean;
   /** Message shown when the list is empty. */
   emptyMessage?: string;
   /** Drawn instead of the toolbar and the list: the pristine, genuinely empty panel. */
@@ -151,6 +153,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   actionsColumn,
   hideColumns,
   hideFilters,
+  directoryColumns = false,
   emptyMessage = 'No devices found. Try adjusting your search or filters.',
   emptyState,
   noOrganizations = false,
@@ -164,11 +167,17 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
   const scoped = useLoadingScope();
   const loading = scoped || loadingGiven;
   const gridColumns =
-    filterColumns ?? getDeviceFilterColumns(deviceFilters).filter(column => !hideFilters?.includes(column.key));
+    filterColumns ??
+    getDeviceFilterColumns(deviceFilters, { directoryColumns }).filter(column => !hideFilters?.includes(column.key));
 
   const list = (
     <>
-      <DevicesFilterToolbar {...toolbar} isLoading={loading} />
+      <DevicesFilterToolbar
+        {...toolbar}
+        // `devices(search)` also matches the primary user's name once directories are in play (Figma 865:55733).
+        searchPlaceholder={directoryColumns ? 'Search for Devices and Users' : undefined}
+        isLoading={loading}
+      />
       {viewMode === 'table' ? (
         <DevicesTableBody
           devices={devices}
@@ -187,6 +196,7 @@ export function DevicesPanelView<T extends DeviceRow = DeviceRow>({
           onColumnFiltersChange={onColumnFiltersChange}
           actionsColumn={actionsColumn}
           hideColumns={hideColumns}
+          directoryColumns={directoryColumns}
           disableColumnFilters={hideFilters}
           totalCount={loading ? undefined : totalCount}
           footerSlot={