blixify-ui-web-mcp 0.1.71 → 0.1.75

package/lib/components/data/dataTemplate/dataTemplate.groupedBoard.stories.tsx

@@ -0,0 +1,259 @@
+import { Menu, Transition } from "@headlessui/react";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import React, { useMemo, useState } from "react";
+import { DataTemplate as DataTemplateImpl } from ".";
+import { SharedSavedView } from "./dataStateModel";
+import { DataStructure } from "./model";
+
+const meta = { title: "Data/Data Template" };
+export default meta;
+
+const ENDPOINT = "https://grouped-board.local/api";
+const COLLECTION = "grouped-board";
+
+// INFO: the group sizes of a real 148,936-row leads board grouped by state —
+// a few very large groups, many small ones, blanks and stray spellings that
+// fall under Unknown
+const STATE_SIZES: [string | null, number][] = [
+  ["Selangor", 63116],
+  ["Johor", 18340],
+  ["Kuala Lumpur", 14488],
+  ["Penang", 11831],
+  ["Perak", 9141],
+  ["Negeri Sembilan", 7690],
+  ["Kedah", 6460],
+  ["Melaka", 6119],
+  ["", 5014],
+  ["Pahang", 2226],
+  [null, 2108],
+  ["Perlis", 904],
+  ["Kelantan", 533],
+  ["Terengganu", 409],
+  ["Kuantan", 221],
+  ["Putrajaya", 182],
+  ["Sabah", 38],
+  ["Sarawak", 32],
+  ["Puchong", 16],
+  ["Pulau Pinang", 12],
+  ["Pahang (Kuantan)", 11],
+  ["Kedah (Exclude Langkawi)", 9],
+  ["Cyberjaya", 9],
+  ["KL", 8],
+  ["Negri Sembilan", 7],
+  ["Pahang (non-Kuantan)", 7],
+  ["Ipoh", 3],
+  ["Labuan", 1],
+];
+
+const STATES = STATE_SIZES.map(([state]) => state).filter(
+  (state): state is string => !!state,
+);
+const STATUSES = ["New Lead", "Contacted", "Site Survey", "Closed", "Dropped"];
+
+const SCHEMA: DataStructure[] = [
+  { id: "name", name: "Name", type: "string" },
+  { id: "area", name: "State (Area)", type: "list", listSelection: STATES },
+  { id: "status", name: "Status", type: "list", listSelection: STATUSES },
+  { id: "createdAt", name: "Created At", type: "date" },
+];
+
+// INFO: rows interleaved across states, so the first page of the whole list
+// holds a few states and one Pahang row — every other band has to load itself
+const handleBuildRows = () => {
+  const pools = STATE_SIZES.map(([state, size]) => ({ state, left: size }));
+  const total = pools.reduce((sum, pool) => sum + pool.left, 0);
+  const rows: any[] = [];
+  let index = 0;
+  while (rows.length < total) {
+    const pool = pools[index % pools.length];
+    index++;
+    if (pool.left === 0) continue;
+    pool.left--;
+    const number = String(rows.length + 1).padStart(6, "0");
+    rows.push({
+      _id: `lead-${number}`,
+      name: `Load Test Lead ${number}`,
+      ...(pool.state === null ? {} : { area: pool.state }),
+      status: STATUSES[rows.length % STATUSES.length],
+      createdAt: new Date(2025, 0, 1, 0, rows.length).toISOString(),
+    });
+  }
+  return rows;
+};
+
+const handleIsIn = (list: any[], value: any) =>
+  list.some((each) =>
+    each === null ? value === null || value === undefined : each === value,
+  );
+
+const handleMatch = (row: any, query: any[]) =>
+  (Array.isArray(query) ? query : []).every((each) => {
+    if (!each?.queryId) return true;
+    const value = row[each.queryId];
+    if (each.type === "=") return value === each.value;
+    if (each.type === "in") return handleIsIn(each.value, value);
+    if (each.type === "!in") return !handleIsIn(each.value, value);
+    return true;
+  });
+
+// INFO: answers band reads, the whole-list read and the grouped count the way
+// the list endpoint does, after a short delay so loading can be watched
+const handleInstallMock = (rows: any[]) => {
+  const mock = new MockAdapter(axios, { onNoMatch: "passthrough" });
+  // INFO: e2e reads how many band reads were ever in flight at once
+  const tracker = ((window as any).__groupedBoardReads = {
+    inFlight: 0,
+    maxInFlight: 0,
+  });
+  const handleDelay = () => new Promise((resolve) => setTimeout(resolve, 400));
+  mock.onPost(`${ENDPOINT}/${COLLECTION}/list`).reply(async (config) => {
+    const body = JSON.parse(config.data ?? "{}");
+    const isBandRead =
+      !body.aggregate &&
+      (body.query ?? []).some((each: any) => each?.queryId === "area");
+    if (isBandRead) {
+      tracker.inFlight += 1;
+      tracker.maxInFlight = Math.max(tracker.maxInFlight, tracker.inFlight);
+    }
+    await handleDelay();
+    if (isBandRead) tracker.inFlight -= 1;
+    const matched = rows.filter((row) => handleMatch(row, body.query));
+    if (body.aggregate?.type === "count") {
+      const counts = new Map<any, number>();
+      matched.forEach((row) => {
+        const key = row[body.aggregate.groupId] ?? null;
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      });
+      return [
+        200,
+        {
+          data: [
+            {
+              _id: "range",
+              value: Array.from(counts, ([key, value]) => ({
+                _id: key,
+                value,
+              })),
+            },
+          ],
+        },
+      ];
+    }
+    if (body.aggregate) return [200, { data: [] }];
+    const cursor = typeof body.cursor === "number" ? body.cursor : 0;
+    const limit = typeof body.limit === "number" ? body.limit : 50;
+    return [
+      200,
+      { data: matched.slice(cursor, cursor + limit), count: matched.length },
+    ];
+  });
+  // INFO: a row typed into a band's "Add item" row joins the front of the list
+  mock.onPost(`${ENDPOINT}/${COLLECTION}/create`).reply((config) => {
+    const body = JSON.parse(config.data ?? "{}");
+    const row = { _id: `lead-new-${rows.length + 1}`, ...(body.data ?? {}) };
+    rows.unshift(row);
+    return [200, { data: row._id }];
+  });
+  mock.onPost(`${ENDPOINT}/${COLLECTION}/get`).reply((config) => {
+    const body = JSON.parse(config.data ?? "{}");
+    return [200, { data: rows.find((row) => row._id === body.id) ?? null }];
+  });
+  return mock;
+};
+
+const VIEW_NAMES = [
+  "Closed Case",
+  "Drawing",
+  "Hunting & Referral",
+  "Marketing",
+  "1.60 Nuqman's Lead Board · Closed Case",
+  "1.60 Nuqman's Lead Board · Drawing",
+  "1.60 Nuqman's Lead Board · Marketing",
+  "1.59 Mei Jun's Lead Board · Closed Case",
+  "1.59 Mei Jun's Lead Board · Drawing",
+  "1.59 Mei Jun's Lead Board · Marketing",
+  "1.49 Hazim Suhaimi's Lead Board · Closed Case",
+  "1.49 Hazim Suhaimi's Lead Board · FB & Google",
+  "1.49 Hazim Suhaimi's Lead Board · Drawing",
+  "1.42 Wang's Lead Board · Closed Case",
+  "1.42 Wang's Lead Board · FB & Google",
+  "1.42 Wang's Lead Board · Drawing",
+];
+
+const GroupedBoardDemo = () => {
+  const rows = useMemo(() => handleBuildRows(), []);
+  useMemo(() => handleInstallMock(rows), [rows]);
+  const [sharedViews, setSharedViews] = useState<SharedSavedView[]>(() => [
+    {
+      id: "closed-only",
+      name: "Closed only",
+      tabId: "general",
+      state: {
+        flexFilters: [
+          { id: "f1", columnId: "status", operator: "=", value: "Closed" },
+        ],
+      },
+    },
+    ...VIEW_NAMES.map((name, index) => ({
+      id: `view-${index}`,
+      name,
+      tabId: "general",
+      state: {},
+    })),
+  ]);
+
+  return (
+    <DataTemplateImpl
+      title="Master Leads"
+      description="148,936 leads grouped by state"
+      type="list"
+      collectionId={COLLECTION}
+      model={SCHEMA}
+      localURLEndpoint=""
+      devSettings={{
+        server: "mongoServer",
+        dbEndpoint: ENDPOINT,
+        dbAPIToken: "",
+        dbUserToken: "",
+        schemaEndpoint: "",
+        imageEndpoint: "",
+      }}
+      lib={{ axios, Menu, Transition }}
+      edit={{ listAddable: true }}
+      limit={50}
+      bareSettings={{ bareNewDTW: true, bareFlexFilters: true }}
+      organise={{
+        viewId: "general",
+        datasheetDefaults: true,
+        showGroupByFeature: true,
+        groupBy: "area",
+        paginationType: "scroll",
+        savedViews: true,
+        sharedViews,
+        onChangeSharedViews: setSharedViews,
+        renderGroupByOptions: () => [
+          { key: "area", label: "State (Area)" },
+          { key: "status", label: "Status" },
+        ],
+      }}
+    />
+  );
+};
+
+export const GroupedLargeBoard = () => (
+  <div className="w-full">
+    <div className="mb-1 font-semibold text-gray-900">
+      Data Template — a large board grouped by a list column
+    </div>
+    <div className="mb-4 text-sm text-gray-600">
+      148,936 mock leads across 28 state values (blanks included), sized like a
+      real leads board, grouped by State in scroll mode. Each read waits 400 ms.
+      Scroll up and down: every band shows its full total from the start, bands
+      not read yet draw no "Add item" rows, and bands load one at a time. The 16
+      views fold behind "+N more"; the pencil on a view renames it, and "Closed
+      only" filters every band.
+    </div>
+    <GroupedBoardDemo />
+  </div>
+);

package/lib/components/data/dataTemplate/dataTemplate.stories.tsx

@@ -1368,3 +1368,165 @@ export const GroupByPagePagination = () => (
     <GroupByScrollPaginationDemo paginationType="page" />
   </div>
 );
+
+const DEFAULTS_COLLECTION = "demo-workspace-defaults";
+const DEFAULTS_MEMBERS = [
+  { key: "u1", label: "Aisha Rahman" },
+  { key: "u2", label: "Ben Tan" },
+];
+const DEFAULTS_SCHEMA: DataStructure[] = [
+  { id: "name", name: "Name", type: "string" },
+  {
+    id: "stage",
+    name: "Stage",
+    type: "list",
+    listSelection: ["New", "Quoted", "Won"],
+    optional: true,
+  },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: ["Open", "Waiting", "Closed"],
+    optional: true,
+  },
+  { id: "owner", name: "Owner", type: "person", optional: true },
+  { id: "amount", name: "Amount", type: "number", optional: true },
+  { id: "due", name: "Due", type: "date", optional: true },
+];
+
+const handleInstallDefaultsMock = (store: any[]) => {
+  const mock = new MockAdapter(axios, { onNoMatch: "passthrough" });
+  const renderUrl = (type: string) =>
+    `${DEMO_ENDPOINT}/${DEFAULTS_COLLECTION}/${type}`;
+  const handleParse = (config: any) => JSON.parse(config?.data ?? "{}");
+  const handleMatch = (row: any, query: any[]) =>
+    (query ?? []).every((eachQuery: any) => {
+      const value = row[eachQuery.queryId];
+      const handleIn = (list: any[]) =>
+        list.some((each) => (each === null ? value == null : each === value));
+      if (eachQuery.type === "=") return value === eachQuery.value;
+      if (eachQuery.type === "in") return handleIn(eachQuery.value);
+      if (eachQuery.type === "!in") return !handleIn(eachQuery.value);
+      return true;
+    });
+  mock.onPost(renderUrl("list")).reply((config) => {
+    const body = handleParse(config);
+    const rows = store.filter((each) => handleMatch(each, body.query));
+    // INFO: a grouped sum, in the shape the list endpoint answers one with
+    if (body.aggregate?.type === "sum") {
+      const totals: { [key: string]: any } = {};
+      rows.forEach((each) => {
+        const key = each[body.aggregate.groupId] ?? null;
+        const total = (totals[String(key)] = totals[String(key)] ?? {
+          _id: key,
+          value: 0,
+        });
+        total.value += Number(each[body.aggregate.queryId]) || 0;
+      });
+      return [200, { data: [{ _id: "range", value: Object.values(totals) }] }];
+    }
+    return [200, { data: rows, count: rows.length }];
+  });
+  mock.onPost(renderUrl("create")).reply((config) => {
+    const row = { ...handleParse(config).data, _id: `r${store.length + 1}` };
+    store.push(row);
+    (window as any).__defaultsWrites = [
+      ...((window as any).__defaultsWrites ?? []),
+      { type: "create", data: row },
+    ];
+    return [200, { success: true, data: row }];
+  });
+  mock.onPost(renderUrl("update")).reply((config) => {
+    const body = handleParse(config);
+    const row = store.find((each) => each._id === body.id);
+    if (row) Object.assign(row, body.data);
+    (window as any).__defaultsWrites = [
+      ...((window as any).__defaultsWrites ?? []),
+      { type: "update", id: body.id, data: body.data },
+    ];
+    return [200, { success: true }];
+  });
+  mock
+    .onPost(`${DEMO_ENDPOINT}/spaces/list`)
+    .reply(200, { data: [], count: 0 });
+  return mock;
+};
+
+const WorkspaceDefaultsDemo = () => {
+  const store = React.useMemo(
+    () => [
+      {
+        _id: "r1",
+        name: "Rooftop survey",
+        stage: "New",
+        status: "Open",
+        owner: "u1",
+        amount: 1200,
+        due: new Date(Date.now() - 2 * 86400000).toISOString(),
+      },
+      {
+        _id: "r2",
+        name: "Inverter quote",
+        stage: "Quoted",
+        status: "Waiting",
+        owner: "u2",
+        amount: 5400.5,
+        due: new Date().toISOString(),
+      },
+      {
+        _id: "r3",
+        name: "Panel install",
+        stage: "Won",
+        status: "Closed",
+        owner: "u1",
+        amount: 18000,
+      },
+    ],
+    [],
+  );
+  React.useMemo(() => handleInstallDefaultsMock(store), [store]);
+
+  return (
+    <DataTemplateImpl
+      title="Workspace defaults"
+      description=""
+      type="list"
+      collectionId={DEFAULTS_COLLECTION}
+      model={DEFAULTS_SCHEMA}
+      localURLEndpoint=""
+      devSettings={{ ...demoDevSettings, organisationMembers: DEFAULTS_MEMBERS }}
+      lib={{ axios, Menu, Transition, papaParser: Papa }}
+      edit={{
+        allEditable: true,
+        listAddable: true,
+        activityLog: {
+          enableLogs: true,
+          logsCollectionId: `${DEFAULTS_COLLECTION}-logs`,
+          currentUserId: "u1",
+        },
+      }}
+      bareSettings={{ bareNewDTW: true }}
+      organise={{
+        groupBy: "stage",
+        showGroupByFeature: true,
+        dateWarnings: true,
+        datasheetDefaults: true,
+        renderGroupByOptions: () => [
+          { key: "stage", label: "Stage" },
+          { key: "owner", label: "Owner" },
+        ],
+        onFetchCommentCounts: async () => ({ r1: 3 }),
+      }}
+    />
+  );
+};
+
+export const WorkspaceDefaults = () => (
+  <div className="w-full">
+    <div className="font-semibold mb-1 text-gray-900">
+      Data Template — workspace defaults
+    </div>
+    <WorkspaceDefaultsDemo />
+  </div>
+);

package/lib/components/data/dataWrapper/README.md

@@ -287,9 +287,40 @@ bareSettings={{
 | Less Than 2 | `crew.1` does not exist |
 | Between 2 and 5 | `crew.1` exists, `crew.5` does not |
 
-Two conditions on one list may each be met by a different row. Referenced records and listObjects are not offered on Firebase or `unionCollections` lists.
+Two conditions on one list may each be met by a different row.
 
-The standalone `FlexFilter` takes both as `extras={{ references, listObjects: true }}`; pass the same object to `renderFlexFilterConditions` when building the query.
+**Filtering on related rows and their count**
+
+`bareFlexFilterRelated` names other collections whose rows point to these rows, such as a referrer's referrals. Each entry has a `name`, its `collection`, the column there that points here (`foreignField`), the column here it matches (`localField`: `_id` for a reference column, or a contact column), and its `structure`. The key becomes part of the lookup alias, so it may hold only letters, digits, `_` and `-`. The lookup names a variable after `localField`, so it may hold only letters, digits and `_`. An entry that breaks either rule is left out of the filter.
+
+The filters then offer `<Name> › <Field>` and `<Name> › Count`. The count is the number of that collection's rows pointing to the record that match the conditions on its fields. Field conditions with no count condition ask for at least one such row.
+
+```tsx
+bareSettings={{
+  bareFlexFilters: true,
+  bareFlexFilterRelated: {
+    referrals: {
+      name: "Referrals",
+      collection: "referrals",
+      localField: "phone",
+      foreignField: "referrerPhone",
+      structure: ReferralSchema,
+    },
+  },
+}}
+
+// "Referrals › Referral Date between 1 and 31 Oct" with "Referrals › Count
+// Greater Than 3" is sent as one condition on the row count:
+// { type: ">", queryId: "rel_referrals_count", value: 3,
+//   related: { collection: "referrals", localField: "phone", foreignField: "referrerPhone",
+//              alias: "rel_referrals", query: [{ type: "><", queryId: "referralDate", value: [...] }] } }
+```
+
+`ReadQuery` sends a `related` condition as a `pipeline` lookup with `referenceShowCount`, which MongoWrapper joins and counts before its `$match`, and leaves `rel_<key>_count` out of the rows it returns. The match is exact, so a contact column only matches a phone number stored in the same format. The lookup runs for every row the list's own read scope allows, before its other conditions, so index `foreignField` on a large collection: without it each row scans the whole related collection.
+
+Referenced records, listObjects and related rows are not offered on Firebase or `unionCollections` lists.
+
+The standalone `FlexFilter` takes all three as `extras={{ references, listObjects: true, related }}`; pass the same object to `renderFlexFilterConditions` when building the query.
 
 **8. newTabUrl (Optional)**
 
@@ -1226,13 +1257,24 @@ needs to know about the other.
   (`handleFormSubmit`, `handleUpdateSelectedData`, `handleDeleteModal`, `handleExportReadPDF`)
   target the panel instance. `handleRefresh()` refreshes both.
 
+### Adding a row in scroll mode
+
+With `organise.paginationType: "scroll"` and `edit.listAddable`, an Add button holds the bottom of the screen instead of an empty row after the last record. It opens the new row at the top of the table.
+
+### bareSettings.bareFormDrawer
+
+Create and edit open in the same panel over the list, so the list keeps its scroll, page
+and filters, and reloads when the panel closes. Off by default. Placement comes from
+`viewSettings.readDrawer` when set; on phones the sheet takes 90% of the height. A click
+outside or Escape closes the form, and asks first once something has been edited.
+
 ### viewSettings.readDrawer
 
 | Name            | Type                                                                 | Default        | Description                                                                         |
 | --------------- | -------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------- |
 | `anchor`        | `"bottom" \| "right" \| "responsive"`                                | `"responsive"` | `responsive` = right panel above the `sm` breakpoint (640px), bottom sheet below it |
 | `maxWidth`      | `"lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl"` | `"3xl"`        | Panel width for the right anchor                                                    |
-| `maxHeight`     | `"50" \| "75" \| "100"`                                              | `"75"`         | Sheet height for the bottom anchor                                                  |
+| `maxHeight`     | `"50" \| "75" \| "90" \| "100"`                                            | `"75"`         | Sheet height for the bottom anchor                                                  |
 | `title`         | `string`                                                             | `title` prop   | Panel header title                                                                  |
 | `desc`          | `string`                                                             | —              | Panel header description                                                            |
 | `disableExpand` | `boolean`                                                            | `false`        | Hides the panel's expand-to-page button, leaving the peek as the only read surface  |

package/lib/components/data/flexFilter/flexFilterRelated.stories.tsx

@@ -0,0 +1,182 @@
+import { Transition } from "@headlessui/react";
+import axios from "axios";
+import React, { useState } from "react";
+import { StorySection } from "../../storyUtils";
+import { Loading } from "../../display/loading";
+import { DataStructure, DevSettings } from "../dataTemplate/model";
+import { DataTemplateWrapper } from "../dataWrapper";
+import {
+  STORY_API_ENDPOINT,
+  STORY_NAMES,
+  storyWorkspace,
+  useStoryBackend,
+} from "../dataWrapper/storyBackend.fixtures";
+import {
+  FlexFilter,
+  FlexFilterRelatedSet,
+  renderFlexFilterConditions,
+} from ".";
+import { FlexFilterData } from "./model";
+
+const meta = { title: "Data/Flex Filter/Related Rows" };
+export default meta;
+
+const USER_COLLECTION = "demo-rel-users";
+const REFERRAL_COLLECTION = "demo-rel-referrals";
+const REFERRAL_STATUSES = ["New", "Quoted", "Installed"];
+
+const userSchema: DataStructure[] = [
+  { id: "name", name: "Name", type: "string" },
+  { id: "phone", name: "Phone", type: "contact" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: ["Active", "Inactive"],
+  },
+];
+
+const referralSchema: DataStructure[] = [
+  { id: "referredName", name: "Referred Name", type: "string" },
+  { id: "referrerPhone", name: "Referrer Phone", type: "contact" },
+  { id: "referralDate", name: "Referral Date", type: "date" },
+  {
+    id: "status",
+    name: "Status",
+    type: "list",
+    listSelection: REFERRAL_STATUSES,
+  },
+];
+
+const related: FlexFilterRelatedSet = {
+  referrals: {
+    name: "Referrals",
+    collection: REFERRAL_COLLECTION,
+    localField: "phone",
+    foreignField: "referrerPhone",
+    structure: referralSchema,
+  },
+};
+
+// INFO: this month's dates, and last month's, so a date filter splits them
+const handleThisMonth = (day: number) => {
+  const date = new Date();
+  date.setDate(Math.min(day, 28));
+  date.setHours(10, 0, 0, 0);
+  return date.toISOString();
+};
+const handleLastMonth = (day: number) => {
+  const date = new Date();
+  date.setDate(1);
+  date.setMonth(date.getMonth() - 1);
+  date.setDate(Math.min(day, 28));
+  date.setHours(10, 0, 0, 0);
+  return date.toISOString();
+};
+
+const users = STORY_NAMES.slice(0, 8).map((name, index) => ({
+  _id: `user-${index + 1}`,
+  name,
+  phone: `6012${String(1000000 + index)}`,
+  status: index % 4 === 3 ? "Inactive" : "Active",
+}));
+
+// INFO: user n has n referrals this month and (7 - n) last month, so "more
+// than 3 this month" and "more than 3 in total" pick different people
+const referrals = users.flatMap((eachUser, index) => [
+  ...Array.from({ length: index }, (_, row) => ({
+    _id: `ref-${index}-now-${row}`,
+    referredName: STORY_NAMES[(index + row + 3) % STORY_NAMES.length],
+    referrerPhone: eachUser.phone,
+    referralDate: handleThisMonth(row + 2),
+    status: REFERRAL_STATUSES[row % REFERRAL_STATUSES.length],
+  })),
+  ...Array.from({ length: 7 - index }, (_, row) => ({
+    _id: `ref-${index}-last-${row}`,
+    referredName: STORY_NAMES[(index + row + 7) % STORY_NAMES.length],
+    referrerPhone: eachUser.phone,
+    referralDate: handleLastMonth(row + 2),
+    status: REFERRAL_STATUSES[(row + 1) % REFERRAL_STATUSES.length],
+  })),
+]);
+
+const extras = { related };
+
+const devSettings: DevSettings = {
+  server: "mongoServer",
+  dbEndpoint: STORY_API_ENDPOINT,
+  imageEndpoint: "",
+  uploadEndpoint: "",
+  dbAPIToken: "",
+  dbUserToken: "",
+  schemaEndpoint: "",
+  bucketName: "",
+  organisationMembers: [],
+};
+
+export const RelatedRows = () => {
+  const mount = useStoryBackend({
+    collections: {
+      [USER_COLLECTION]: users,
+      [REFERRAL_COLLECTION]: referrals,
+    },
+  });
+  const [filters, setFilters] = useState<FlexFilterData[]>([
+    { id: "init", columnId: "", operator: "=", value: undefined },
+  ]);
+  const query = renderFlexFilterConditions(filters, userSchema, extras);
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="flex flex-col space-y-12">
+      <StorySection
+        title="Referrers filtered on their referrals"
+        description="User 1 has no referrals this month and user 8 has seven; last month it is the other way round. Try Referrals › Referral Date between the 1st and the end of this month, with Referrals › Count Greater Than 3."
+      >
+        <DataTemplateWrapper
+          title="Referrers"
+          type="list"
+          collectionId={USER_COLLECTION}
+          schema={userSchema}
+          workspace={storyWorkspace()}
+          limit={20}
+          organise={{ breadcrumbType: "hidden" }}
+          bareSettings={{
+            bareNewDTW: true,
+            bareFlexFilters: true,
+            bareFlexFilterRelated: related,
+          }}
+        />
+      </StorySection>
+
+      <StorySection
+        title="Standalone filter (notification audience)"
+        description="The same related datasheet on the bare FlexFilter, with the query it builds."
+      >
+        <div className="flex flex-col">
+          <div className="max-w-[700px]">
+            <FlexFilter
+              structure={userSchema}
+              extras={extras}
+              filters={filters}
+              onChange={setFilters}
+              devSettings={devSettings}
+              dbModule={axios}
+              variant="bare"
+              lib={{ Transition }}
+            />
+          </div>
+          <div className="mt-4 p-4 bg-gray-50 rounded-lg border">
+            <p className="text-sm font-semibold mb-2">
+              Generated Query Conditions ({query.length})
+            </p>
+            <pre className="text-xs whitespace-pre-wrap">
+              {JSON.stringify(query, null, 2)}
+            </pre>
+          </div>
+        </div>
+      </StorySection>
+    </div>
+  );
+};