@flamingo-stack/openframe-frontend-core 0.0.710 → 0.0.712

package/src/components/features/devices/devices-grid-filters.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { Filter02Icon } from '../../icons-v2-generated';
+import { FiltersDropdown } from '../filters-dropdown';
+import type { DeviceFilterColumn } from './devices-table-columns';
+
+export interface DevicesGridFiltersProps {
+  filterColumns: DeviceFilterColumn[];
+  /** Current filter values keyed by column id (same shape as table's tableFilters). */
+  currentFilters: Record<string, string[]>;
+  /** Called with the next filters Record on apply/reset. Should write to URL params. */
+  onFilterChange: (filters: Record<string, string[]>) => void;
+  /** Server-side count for the "N results" tail. */
+  totalCount?: number;
+  /**
+   * The facet query is still out. Keeps every filterable column in the row even
+   * though its options haven't arrived, the LABELS are static, so the row can
+   * be drawn at its real height instead of collapsing to nothing and pushing the
+   * grid down a row the moment the facets land. Used by the panel's Suspense
+   * fallback, which renders this inert.
+   */
+  isLoading?: boolean;
+}
+
+/**
+ * DevicesGridFilters, horizontal row of dropdown filters shown above the
+ * devices grid. Mirrors the column-header filters from the table view so the
+ * same filter set is available in both layouts.
+ */
+export function DevicesGridFilters({
+  filterColumns,
+  currentFilters,
+  onFilterChange,
+  totalCount,
+  isLoading = false,
+}: DevicesGridFiltersProps) {
+  const filterableColumns = filterColumns.filter(
+    c => c.filterable && (isLoading || (c.filterOptions && c.filterOptions.length > 0)),
+  );
+
+  if (filterableColumns.length === 0 && totalCount === undefined) {
+    return null;
+  }
+
+  return (
+    <div className="sticky top-[96px] z-10 flex flex-wrap items-start gap-[var(--spacing-system-m)] bg-ods-bg px-[var(--spacing-system-m)]">
+      {filterableColumns.map(column => {
+        const selected = currentFilters[column.key] ?? [];
+        const active = selected.length > 0;
+
+        return (
+          <FiltersDropdown
+            key={column.key}
+            triggerElement={
+              <button
+                type="button"
+                className="group inline-flex cursor-pointer select-none items-center gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)]"
+                aria-label={`Filter by ${column.label}`}
+              >
+                <span className="whitespace-nowrap uppercase text-ods-text-secondary transition-colors text-h5 group-hover:text-ods-text-primary">
+                  {column.label}
+                </span>
+                <Filter02Icon
+                  className={cn(
+                    'h-4 w-4 transition-colors',
+                    active ? 'text-ods-accent' : 'text-ods-text-secondary group-hover:text-ods-text-primary',
+                  )}
+                />
+              </button>
+            }
+            sections={[
+              {
+                id: column.key,
+                title: column.label,
+                type: 'checkbox',
+                options: column.filterOptions ?? [],
+                allowSelectAll: true,
+              },
+            ]}
+            currentFilters={{ [column.key]: selected }}
+            onApply={applied => {
+              const next = applied[column.key] ?? [];
+              onFilterChange({ ...currentFilters, [column.key]: next });
+            }}
+            onReset={() => onFilterChange({ ...currentFilters, [column.key]: [] })}
+            placement="bottom-start"
+            dropdownClassName="min-w-60"
+          />
+        );
+      })}
+      {totalCount !== undefined && (
+        <div className="absolute inset-y-0 right-0 flex items-center">
+          <span className="whitespace-nowrap text-ods-text-secondary text-h6">{totalCount} results</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/features/devices/devices-grid.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type React from 'react';
+import { useRouter } from '../../../embed-shims/next-navigation';
+import { DeviceCardSkeleton, DeviceCardSkeletonGrid } from '../../loading/device-card-skeleton';
+import { DeviceCard } from '../../ui';
+import { getDeviceName } from './device-name';
+import { getDeviceOperatingSystem, getDeviceStatusConfig } from './device-status';
+import { useDevicesViewConfig } from './devices-view-config';
+import type { DeviceRow } from './types';
+
+export interface DevicesGridProps<T extends DeviceRow = DeviceRow> {
+  devices: T[];
+  isLoading: boolean;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  sentinelRef?: React.RefObject<HTMLDivElement | null>;
+  emptyMessage?: string;
+}
+
+export function DevicesGrid<T extends DeviceRow = DeviceRow>({
+  devices,
+  isLoading,
+  hasNextPage,
+  isFetchingNextPage,
+  sentinelRef,
+  emptyMessage = 'No devices found. Try adjusting your search or filters.',
+}: DevicesGridProps<T>) {
+  const router = useRouter();
+  const { getDeviceHref } = useDevicesViewConfig();
+
+  const handleDeviceClick = (device: T) => {
+    const href = device.machineId || device.id ? getDeviceHref?.(device) : undefined;
+    if (href) router.push(href);
+  };
+
+  return (
+    <div className="space-y-4">
+      {isLoading && devices.length === 0 ? (
+        <DeviceCardSkeletonGrid count={12} />
+      ) : devices.length === 0 ? (
+        <div className="flex h-64 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card">
+          <p className="text-ods-text-secondary">{emptyMessage}</p>
+        </div>
+      ) : (
+        <>
+          <div className="grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-3">
+            {devices.map(device => {
+              const statusConfig = getDeviceStatusConfig(device.status);
+              return (
+                <DeviceCard
+                  key={device.id || device.machineId}
+                  device={{
+                    id: device.id,
+                    machineId: device.machineId,
+                    name: getDeviceName(device),
+                    organization: device.organization || device.machineId,
+                    lastSeen: device.lastSeen,
+                    operatingSystem: getDeviceOperatingSystem(device.osType),
+                  }}
+                  statusTag={
+                    device.status
+                      ? {
+                          label: statusConfig.label,
+                          variant: statusConfig.variant,
+                        }
+                      : undefined
+                  }
+                  onDeviceClick={() => handleDeviceClick(device)}
+                  actions={{
+                    moreButton: {
+                      visible: false,
+                    },
+                  }}
+                  className="h-full"
+                />
+              );
+            })}
+            {isFetchingNextPage && Array.from({ length: 4 }, (_, i) => <DeviceCardSkeleton key={`skeleton-${i}`} />)}
+          </div>
+          {hasNextPage && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/features/devices/devices-list.tsx

@@ -0,0 +1,357 @@
+'use client';
+
+import { type ReactNode, useCallback, useMemo } from 'react';
+import { useStickyToolbar } from '../../../hooks/ui/use-sticky-toolbar';
+import { type ColumnFiltersState, DataTable, type NoDataProps, type OnChangeFn } from '../../ui';
+import { DevicesFilterToolbar } from './devices-filter-toolbar';
+import { DevicesTableBody, getDeviceActionsColumn, getDeviceFilterColumns } from './devices-table-columns';
+import type { DeviceFilters, DeviceRow } from './types';
+import { useTagFilterModal } from './use-tag-filter-modal';
+
+/**
+ * What the user has narrowed the list down to. One shape for every surface, so a
+ * caller can keep it in the URL, in local state, or hand it straight to a server
+ * filter without translating between vocabularies.
+ */
+export interface DevicesListNarrowing {
+  search: string;
+  statuses: string[];
+  osTypes: string[];
+  organizationIds: string[];
+  /** Chips as typed. `key:value` narrows; a bare word stays visible and filters nothing. */
+  tags: string[];
+}
+
+export const EMPTY_DEVICES_NARROWING: DevicesListNarrowing = {
+  search: '',
+  statuses: [],
+  osTypes: [],
+  organizationIds: [],
+  tags: [],
+};
+
+/** True when anything at all is narrowing the list, an empty list then means "no matches", not "nothing here". */
+export function isNarrowed(narrowing: DevicesListNarrowing): boolean {
+  return (
+    narrowing.search.trim().length > 0 ||
+    narrowing.statuses.length > 0 ||
+    narrowing.osTypes.length > 0 ||
+    narrowing.organizationIds.length > 0 ||
+    narrowing.tags.length > 0
+  );
+}
+
+export interface DevicesListProps<T extends DeviceRow = DeviceRow> {
+  /**
+   * The rows to render, already narrowed. This component never filters and never
+   * fetches, see the module docstring.
+   */
+  devices: T[];
+  isLoading?: boolean;
+
+  /**
+   * Facet counts behind the column funnels and the mobile filter modal, **from
+   * the server**, the `deviceFilters` query, scoped the same way the rows are.
+   *
+   * NEVER derive these from `devices`. Counts computed off the loaded rows read
+   * as facts about the list and are not: they change with every page fetched and
+   * disagree with the server the moment anything is narrowed. A surface with no
+   * facet query of its own passes `null` (or omits this) and the table drops the
+   * funnels entirely, a control that opens onto nothing is worse than none.
+   */
+  deviceFilters?: DeviceFilters | null;
+  /**
+   * The facet query has not answered yet, keeps the funnels drawn but inert,
+   * so they don't appear out of nowhere when it does. Key it on the DATA
+   * (`!deviceFilters`), never on a react-query `isLoading`, which reads false
+   * before the request has started.
+   */
+  filtersPending?: boolean;
+
+  /**
+   * True while the rows on screen are the PREVIOUS result and a refetch is in
+   * flight (deferred query variables, see `useDeferredQuery`). Dims them,
+   * rather than tearing the list down to a skeleton on every keystroke.
+   */
+  isPending?: boolean;
+
+  /**
+   * Row count beside the column header: the server's total for the CURRENT
+   * narrowing (a connection's `filteredCount`), not the number of rows fetched
+   * so far. Honest at any point precisely because the narrowing is the server's
+   * too, a count taken from a client-side filter would contradict it.
+   */
+  totalCount?: number;
+
+  /** Controlled narrowing. Omit both to render a read-only list (skeletons, previews). */
+  narrowing?: DevicesListNarrowing;
+  onNarrowingChange?: (next: DevicesListNarrowing) => void;
+
+  /** Column ids to drop, e.g. `['organization']` when the list is already scoped to one customer. */
+  hideColumns?: string[];
+  /** Filter keys to drop from the funnels AND the modal; the column itself stays. */
+  hideFilters?: string[];
+  /** Per-row overflow menu. Omit for a read-only list. */
+  rowActions?: (device: T) => ReactNode;
+
+  /**
+   * Shown when the list is empty and nothing is narrowing it, the design's
+   * `data-placeholder`: icon over title over description, rendered by the
+   * table's own `DataTableEmpty`.
+   */
+  emptyState?: NoDataProps;
+  /**
+   * Shown when narrowing is what emptied it. Defaults to the table's standard
+   * "no results" state (search icon, "Try adjusting your search or filters"),
+   * which is the right answer on every list, override only to name the rows.
+   */
+  narrowedEmptyState?: NoDataProps;
+
+  skeletonRows?: number;
+  infiniteScroll?: {
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    onLoadMore: () => void;
+    skeletonRows?: number;
+  };
+
+  /**
+   * Pins the search / tag toolbar to the top of the scroll area, as the fleet
+   * list does. On by default: a list long enough to scroll is exactly the one
+   * whose search must stay reachable. Turn it off only where something else is
+   * already pinned at the top.
+   */
+  stickyToolbar?: boolean;
+  /**
+   * Overrides the wrapper around the toolbar and the table. By default it adds
+   * NO gap while the toolbar is pinned, the pinned row carries its own `p-l`,
+   * and a gap on top of it doubles the space under the search box.
+   */
+  /**
+   * Where the column header parks once the rows scroll under it. Defaults to the
+   * MEASURED height of the pinned toolbar, so the two never overlap and never
+   * leave a gap, the toolbar grows and shrinks with the tag-chip row, and is
+   * shorter on a phone. Only pass this to park the header somewhere else.
+   */
+  stickyHeaderOffset?: string;
+  className?: string;
+}
+
+const NOOP = () => {};
+
+/**
+ * The devices list, search + tag chips + column funnels over the shared devices
+ * table, identical on every surface that shows devices.
+ *
+ * **It does not fetch, and it does not filter.** That is the whole point: in
+ * Relay the rows are a CONNECTION, and every surface has a different one
+ * (`devices` for the fleet, `scriptSchedule.assignedDevices` for a schedule's
+ * assignment, `availableDevices` for its picker). Baking a query in would tie
+ * the list to exactly one of them; taking `devices` + a controlled
+ * {@link DevicesListNarrowing} lets one component serve all of them.
+ *
+ * It follows that the narrowing this component reports belongs in the caller's
+ * QUERY, every devices connection takes the same `filter` / `search`, so every
+ * surface narrows server-side, over the whole list rather than the pages fetched
+ * so far. The funnel options come from the server too (`deviceFilters`), or not
+ * at all; see the `deviceFilters` prop.
+ *
+ * The rows-in / narrowing-out split is also what makes the two data layers
+ * coexist: the fleet list is still react-query over raw POST, the schedule reads
+ * Relay. When devices move to Relay, the natural next step is a colocated
+ * fragment on `Device` that each caller spreads on its own connection, the
+ * props here do not change.
+ */
+export function DevicesList<T extends DeviceRow = DeviceRow>({
+  devices,
+  isLoading,
+  deviceFilters = null,
+  filtersPending,
+  isPending,
+  totalCount,
+  narrowing = EMPTY_DEVICES_NARROWING,
+  onNarrowingChange = NOOP,
+  hideColumns,
+  hideFilters,
+  rowActions,
+  emptyState,
+  narrowedEmptyState,
+  skeletonRows = 8,
+  infiniteScroll,
+  stickyToolbar = true,
+  stickyHeaderOffset,
+  className,
+}: DevicesListProps<T>) {
+  const patch = useCallback(
+    (next: Partial<DevicesListNarrowing>) => onNarrowingChange({ ...narrowing, ...next }),
+    [narrowing, onNarrowingChange],
+  );
+
+  const filterColumns = useMemo(() => {
+    const hidden = new Set(hideFilters ?? []);
+    return getDeviceFilterColumns(deviceFilters).filter(column => !hidden.has(column.key));
+  }, [deviceFilters, hideFilters]);
+
+  // The column funnels speak in column ids; the narrowing speaks in the backend's
+  // field names. This pair is the only place that translation lives.
+  const columnFilters = useMemo<ColumnFiltersState>(
+    () => [
+      ...(narrowing.statuses.length ? [{ id: 'status', value: narrowing.statuses }] : []),
+      ...(narrowing.osTypes.length ? [{ id: 'os', value: narrowing.osTypes }] : []),
+      ...(narrowing.organizationIds.length ? [{ id: 'organization', value: narrowing.organizationIds }] : []),
+    ],
+    [narrowing.statuses, narrowing.osTypes, narrowing.organizationIds],
+  );
+
+  const onColumnFiltersChange = useCallback<OnChangeFn<ColumnFiltersState>>(
+    updater => {
+      const next = typeof updater === 'function' ? updater(columnFilters) : updater;
+      const pick = (id: string) => (next.find(f => f.id === id)?.value as string[] | undefined) ?? [];
+      patch({ statuses: pick('status'), osTypes: pick('os'), organizationIds: pick('organization') });
+    },
+    [columnFilters, patch],
+  );
+
+  // The mobile modal hands back one flat params object keyed by backend field.
+  const handleModalParams = useCallback(
+    (params: Record<string, unknown>) => {
+      const pick = (key: string) => (params[key] as string[] | undefined) ?? [];
+      patch({
+        statuses: pick('statuses'),
+        osTypes: pick('osTypes'),
+        organizationIds: pick('organizationIds'),
+        tags: pick('tags'),
+      });
+    },
+    [patch],
+  );
+
+  const {
+    isOpen: filterModalOpen,
+    open: openFilterModal,
+    close: closeFilterModal,
+    isMdUp,
+    filterGroups,
+    tagFilterKeys,
+    handleFilterChange: handleModalFilterChange,
+    handleTagsChange: handleModalTagsChange,
+  } = useTagFilterModal({
+    tags: narrowing.tags,
+    deviceFilters,
+    columns: filterColumns,
+    setParams: handleModalParams,
+  });
+
+  const tagOptions = useMemo(() => narrowing.tags.map(tag => ({ label: tag, value: tag })), [narrowing.tags]);
+
+  // The modal reads the current selection back in column-keyed form.
+  const tableFilters = useMemo(
+    () => ({ status: narrowing.statuses, os: narrowing.osTypes, organization: narrowing.organizationIds }),
+    [narrowing.statuses, narrowing.osTypes, narrowing.organizationIds],
+  );
+
+  const handleTagRemove = useCallback(
+    (value: string) => patch({ tags: narrowing.tags.filter(tag => tag !== value) }),
+    [patch, narrowing.tags],
+  );
+
+  const handleTagSubmit = useCallback(
+    (value: string) => {
+      const trimmed = value.trim();
+      if (!trimmed) return;
+      patch({ search: '', tags: narrowing.tags.includes(trimmed) ? narrowing.tags : [...narrowing.tags, trimmed] });
+    },
+    [patch, narrowing.tags],
+  );
+
+  const handleClearAll = useCallback(() => patch({ search: '', tags: [] }), [patch]);
+
+  const narrowed = isNarrowed(narrowing);
+
+  // Nothing here at all, the design's placeholder, and the one state with
+  // nothing to search: the box is dropped rather than left over an empty list.
+  // Narrowing that empties the list is NOT this case; there the toolbar is the
+  // only way back, so it stays (as does the column header above).
+  const isEmptyState = !isLoading && !isPending && !narrowed && devices.length === 0;
+
+  // The toolbar publishes its own height on the wrapper below, and the column
+  // header parks at exactly that. Measured, not a constant: the toolbar gains a
+  // row when the first tag chip lands and is shorter on a phone, and a fixed
+  // offset would either cover the first rows or leave a strip of them showing
+  // through above the header.
+  const { toolbarRef, containerStyle, stickyHeaderOffset: measuredOffset } = useStickyToolbar();
+  const headerOffset = stickyHeaderOffset ?? (stickyToolbar ? measuredOffset : undefined);
+
+  const actionsColumn = useMemo(() => (rowActions ? getDeviceActionsColumn<T>(rowActions) : undefined), [rowActions]);
+
+  return (
+    // No gap under a pinned toolbar: its own `p-l` is the space below the search
+    // box, and a gap here would double it. An unpinned toolbar has no padding of
+    // its own, so there it is the gap that separates the two.
+    <div
+      className={className ?? (stickyToolbar ? 'flex flex-col' : 'flex flex-col gap-[var(--spacing-system-l)]')}
+      style={containerStyle}
+    >
+      {!isEmptyState && (
+        <DevicesFilterToolbar
+          sticky={stickyToolbar}
+          toolbarRef={toolbarRef}
+          searchValue={narrowing.search}
+          onSearchChange={value => patch({ search: value })}
+          tags={tagOptions}
+          onTagRemove={handleTagRemove}
+          onClearAll={handleClearAll}
+          onSubmit={handleTagSubmit}
+          onOpenFilterModal={openFilterModal}
+          isFilterModalOpen={filterModalOpen}
+          onCloseFilterModal={closeFilterModal}
+          filterGroups={filterGroups}
+          onFilterChange={handleModalFilterChange}
+          currentFilters={isMdUp === false ? tableFilters : undefined}
+          tagFilterKeys={tagFilterKeys}
+          selectedTags={narrowing.tags}
+          onTagsChange={handleModalTagsChange}
+        />
+      )}
+
+      {/* Dim (don't unmount) the stale rows while a refetch is in flight, the
+          subtle fade is the pending feedback, and the search box above keeps its
+          focus because nothing under it is torn down. */}
+      <div className={`transition-opacity duration-200 ${isPending ? 'opacity-60' : ''}`}>
+        <DevicesTableBody
+          devices={devices}
+          isLoading={isLoading}
+          // Column labels above nothing explain nothing, but they stay while
+          // loading (the skeleton rows are what they label), while a refetch is
+          // pending, and whenever narrowing is what emptied the list, since the
+          // funnels live in that header and removing it would strip the only way
+          // to undo the filter.
+          showHeader={isLoading || isPending || devices.length > 0 || narrowed}
+          // Narrowed: `undefined` is what asks the table for its own standard
+          // "no results found / try adjusting your search or filters" state.
+          emptyState={narrowed ? narrowedEmptyState : emptyState}
+          skeletonRows={skeletonRows}
+          stickyHeaderOffset={headerOffset}
+          deviceFilters={deviceFilters}
+          filtersPending={filtersPending}
+          columnFilters={columnFilters}
+          onColumnFiltersChange={onColumnFiltersChange}
+          actionsColumn={actionsColumn}
+          hideColumns={hideColumns}
+          disableColumnFilters={hideFilters}
+          totalCount={totalCount}
+          footerSlot={
+            infiniteScroll && (
+              <DataTable.InfiniteFooter
+                hasNextPage={infiniteScroll.hasNextPage}
+                isFetchingNextPage={infiniteScroll.isFetchingNextPage}
+                onLoadMore={infiniteScroll.onLoadMore}
+                skeletonRows={infiniteScroll.skeletonRows}
+              />
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+'use client';
+
+import { BoxArchiveIcon, GridIcon, PlusCircleIcon, TableCellIcon } from '../../icons-v2-generated';
+import type { PageActionButton } from '../../ui';
+
+/**
+ * The panel header's contents, declared once for both the loaded panel and its
+ * `Suspense` fallback.
+ *
+ * Same reasoning as `scripts-table-columns` on the scripts pages: a loading
+ * state that RE-DECLARES the chrome it stands in for drifts from it, silently,
+ * and only in the frame nobody screenshots. Reading one declaration is what
+ * makes the two identical by construction rather than by review.
+ */
+
+/** The table/grid switch. Fed by the `viewMode` URL param, so it needs no data. */
+export const DEVICE_VIEW_MODE_ITEMS = [
+  { id: 'table', icon: <TableCellIcon className="h-6 w-6" /> },
+  { id: 'grid', icon: <GridIcon className="h-6 w-6" /> },
+];
+
+export interface DevicePanelActionsOptions {
+  /** Shows the "Archive" button linking to the archived-devices page. */
+  archiveHref?: string;
+  showAddDevice?: boolean;
+  noOrganizations?: boolean;
+  /** Destination of the "Add Customer" button shown when the tenant has no customers. */
+  addCustomerHref?: string;
+  isCheckingOrganizations?: boolean;
+  /**
+   * Accent the "Add Device" button, the panel's pristine-empty state, which is
+   * the ONE thing here that needs the list to have answered. Left off while
+   * loading: it changes the button's colour, never its size, so the header does
+   * not move when the real answer lands.
+   */
+  accent?: boolean;
+  onAddDevice?: () => void;
+  /**
+   * Loading. Every button the loaded header will have is still rendered, same
+   * labels, same icons, same widths, but inert and without its destination, so
+   * the header is pixel-identical and nothing is clickable before the panel can
+   * honour the click.
+   */
+  disabled?: boolean;
+}
+
+/**
+ * The panel's header buttons. Every input is a prop or a URL value, nothing
+ * here is derived from the device query, which is what lets the fallback build
+ * the same set the loaded panel will.
+ */
+export function buildDevicePanelActions({
+  archiveHref,
+  showAddDevice = true,
+  noOrganizations = false,
+  addCustomerHref,
+  isCheckingOrganizations = false,
+  accent = false,
+  onAddDevice,
+  disabled = false,
+}: DevicePanelActionsOptions): PageActionButton[] {
+  const result: PageActionButton[] = [];
+
+  if (archiveHref) {
+    result.push({
+      label: 'Archive',
+      // A disabled `href` still renders a live link, so the loading copy carries
+      // no destination at all rather than a navigable one it cannot honour.
+      ...(disabled ? { disabled: true } : { href: archiveHref }),
+      icon: <BoxArchiveIcon className="h-5 w-5 text-ods-text-secondary" />,
+      variant: 'outline',
+    });
+  }
+
+  if (!showAddDevice) return result;
+
+  // A device must belong to an organization. With none, "Add Device" is disabled
+  // and an "Add Customer" action appears beside it.
+  if (noOrganizations) {
+    result.push({
+      label: 'Add Customer',
+      ...(disabled || !addCustomerHref ? { disabled: true } : { href: addCustomerHref }),
+      icon: <PlusCircleIcon className="h-5 w-5 text-ods-text-secondary" />,
+      variant: 'outline',
+    });
+  }
+
+  result.push({
+    label: 'Add Device',
+    onClick: disabled ? undefined : onAddDevice,
+    disabled: disabled || noOrganizations || isCheckingOrganizations,
+    icon: <PlusCircleIcon className={`h-5 w-5 ${accent ? 'text-ods-text-on-accent' : 'text-ods-text-secondary'}`} />,
+    variant: accent ? 'accent' : 'outline',
+  });
+
+  return result;
+}