Live component development with hot reload

@fieldflow360/org-ui

Active tab
app-layout

App Layout

FieldFlowAppLayout minimal usage (code only)

<FieldFlowAppLayout
  appTitle="@fieldflow360/org-ui"
  logo={<span>FF</span>}
  user={{ fullName: "Jane Doe", subtitle: "UI Engineer" }}
  userMenuActions={[
    { id: "profile", label: "Profile", onSelect: () => {} },
    { id: "logout", label: "Log out", onSelect: () => {}, tone: "danger" },
  ]}
  currentPath={pathname}
>
  <YourPageContent />
</FieldFlowAppLayout>

Per-component config examples (code only)

const toolsConfig = createFieldFlowToolsConfig({
  title: "Tools",
  userSettings: {
    enabled: true,
    href: "/settings/user/appearance",
    showThemeControls: true,
  },
  organizationSettings: {
    enabled: true,
    href: "/settings/organization/organization-info",
    options: [
      { id: "organization-danger-zone", title: "Danger Zone", href: "/settings/organization/danger-zone" },
    ],
  },
});

const orgInfo = mapOrganizationToFieldFlow(orgPayload, FieldFlowOrganizationSourceEnum.CMS);
const orgCards = mapOrganizationsToFieldFlow(orgListPayload, FieldFlowOrganizationSourceEnum.TILE_DESIGN);

Settings mobile layout (master–detail)

<FieldFlowSettingsLayout
  config={settingsConfig}
  mobileNavBackLabel="Settings"
>
  <FieldFlowSettingsPageLayout title="Appearance">
    <ThemeControls />
  </FieldFlowSettingsPageLayout>
</FieldFlowSettingsLayout>

// Mark the active page with isActive on the matching link in config.
// Mobile: nav list OR full-width detail + back button — never side-by-side.

Mobile layout (CMS-style top bar)

<FieldFlowAppLayout
  appTitle="Contractor CMS"
  logo={<Logo />}
  hideMobileShellTopBar
  mainTopBar={<TopNavBar onToggleSidebar={toggleMobileSidebar} />}
  mobileShellBarEnd={<NotificationBell />}
  sidebarNav={({ isMobile, closeMobileSidebar }) => (
    <Sidebar onNavigate={isMobile ? closeMobileSidebar : undefined} />
  )}
>
  <Page />
</FieldFlowAppLayout>

Whole component usage (code + config)

const toolsConfig = createFieldFlowToolsConfig({
  organizationSettings: {
    enabled: true,
    options: [
      { id: "organization-billing", title: "Billing", href: "/settings/organization/billing" },
    ],
  },
});

const organization = mapOrganizationToFieldFlow(
  rawOrganization,
  FieldFlowOrganizationSourceEnum.CMS
);

<FieldFlowAppLayout
  appTitle="@fieldflow360/org-ui"
  logo={<span>FF</span>}
  currentPath={pathname}
  user={{ fullName: "Developer", subtitle: "UI Engineer", avatarFallback: "DV" }}
  userMenuActions={[
    { id: "profile", label: "Profile", onSelect: openProfile },
    { id: "logout", label: "Log out", onSelect: logout, tone: "danger" },
  ]}
  toolsConfig={toolsConfig}
  breadcrumbs={[
    { id: "settings", label: "Settings", href: "/settings" },
    { id: "organization", label: "Organization", href: "/settings/organization", isCurrent: true },
  ]}
>
  <OrganizationInfo organization={organization} canEdit onEdit={openEditOrgModal} />
</FieldFlowAppLayout>