Skip to main content

Configuration

The Loom Loyalty Hub uses tenant configuration from the Platform API and local UI customization in hub.config.ts.

Runtime Configuration​

The browser resolves the organization code from the first hostname label. After sign-in, ConfigProvider fetches the signed-in environment's configuration with GET /hub-configs; it does not load /__config.js or read Cloudflare KV. The provider selects the matching environment row and maps it to HubRuntimeConfig.

Create and manage Hub configurations in the Dashboard's Organization → Hub Configs page. Hub domains are managed separately in Organization → Hub Domains.

HubRuntimeConfig Interface​

interface HubRuntimeConfig {
  organizationId: string;
  organizationEnvironmentId: string;
  organizationCode: string;
  apiEndpoint: string;
  customDomain?: string;
  name?: string;
  branding?: Partial<BrandingConfig>;
  features?: Record<string, boolean>;
  uiSettings?: {
    showApiExplorer?: boolean;
    defaultListView?: "table" | "cards";
  };
  entityOverrides?: Record<string, EntityOverride>;
  customComponents?: CustomComponentsConfig;
}

Example Configuration​

{
  "organizationId": "org_01HXYZ123",
  "organizationEnvironmentId": "env_01HXYZ123",
  "organizationCode": "acme",
  "apiEndpoint": "https://api.loomloyalty.com",
  "branding": {
    "primaryColor": "#0e7490",
    "secondaryColor": "#d97706",
    "logoUrl": "https://cdn.acme.com/logo.svg"
  },
  "features": {
    "customComponents": true,
    "analytics": true,
    "auditLog": false
  },
  "uiSettings": {
    "showApiExplorer": false,
    "defaultListView": "table"
  },
  "entityOverrides": {
    "customer": {
      "label": {
        "singular": "Member",
        "plural": "Members"
      }
    }
  }
}

Branding​

Primary Colors​

The Hub supports custom brand colors via CSS custom properties:

/* These are set automatically by BrandingProvider */
:root {
  --brand-primary: #0e7490;
  --brand-secondary: #d97706;
}

Use in components:

<span className="text-brand-primary">Branded text</span>
<div className="bg-brand-secondary/10">Branded background</div>

Provide a logo URL in the branding config:

{
  "branding": {
    "logoUrl": "https://cdn.example.com/logo.svg",
    "faviconUrl": "https://cdn.example.com/favicon.ico"
  }
}

Entity Overrides​

Customize how entities are displayed in the UI:

Label Override​

Rename entities to match your business terminology:

{
  "entityOverrides": {
    "customer": {
      "label": {
        "singular": "Member",
        "plural": "Members"
      }
    },
    "tier": {
      "label": {
        "singular": "Level",
        "plural": "Levels"
      }
    }
  }
}

Hide Entities​

Hide entities from navigation:

{
  "entityOverrides": {
    "internal_audit": {
      "hidden": true
    }
  }
}

Read-Only Entities​

Make entities read-only (no create/edit/delete):

{
  "entityOverrides": {
    "transaction": {
      "readonly": true
    }
  }
}

Custom Icons​

Override the default icon for an entity:

{
  "entityOverrides": {
    "customer": {
      "icon": "users"
    }
  }
}

Feature Flags​

Enable or disable features per tenant:

{
  "features": {
    "customComponents": true,
    "analytics": true,
    "auditLog": true,
    "multiLanguage": false,
    "advancedFilters": true
  }
}

Using Feature Flags in Code​

import { useFeatures } from "@/hooks/use-features";

function MyComponent() {
  const { isEnabled } = useFeatures();

  if (isEnabled("analytics")) {
    return <AnalyticsDashboard />;
  }

  return <BasicDashboard />;
}

UI Settings​

API Explorer​

Show or hide the API explorer in settings:

{
  "uiSettings": {
    "showApiExplorer": true
  }
}

Default List View​

Set the default view for entity lists:

{
  "uiSettings": {
    "defaultListView": "cards"
  }
}

Options: "table" | "cards"

Managing configuration​

Hub configuration is Platform API data, scoped to an organization environment. Use the Dashboard to update branding, feature flags, UI settings, entity overrides, and Hub domains. The Hub reloads its configuration after a user authenticates for that environment; no separate KV seeding or Worker-side configuration deployment is required.

Environment Variables​

VariableDescriptionRequired
VITE_API_BASE_URLBackend API URLYes
VITE_WORKOS_CLIENT_IDWorkOS client IDFor auth
VITE_USE_REAL_APIUse real API vs mockNo (default: false)

Next Steps​