blixify-ui-web-mcp 0.1.26 → 0.1.28

package/lib/components/data/dataWrapper/dataWrapper.utils.stories.tsx

@@ -0,0 +1,852 @@
+// INFO: DTW plumbing — flex filters, hidden columns, persisted view state and
+// SSE live updates.
+
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "../../action/button";
+import { Loading } from "../../display/loading";
+import { FlexFilterData } from "../flexFilter/model";
+import { DataTemplateWrapper } from "./index";
+import {
+  STORY_LIVE_ENDPOINT,
+  STORY_NAMES,
+  handleBuildStoryRecords,
+  handleEmitStoryEnvelope,
+  handleInstallStoryLiveStream,
+  storyWorkspace,
+  useStoryBackend,
+} from "./storyBackend.fixtures";
+import { Tabs } from "../../navigation/tabs";
+import { Tag } from "../../display/tag";
+
+const meta = {
+  title: "Data/Data Wrapper/Utils",
+  decorators: [
+    (Story: () => React.ReactElement) => (
+      <div className="bg-white min-h-screen p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+// INFO: SSE live updates, served by the story backend's stand-in EventSource.
+// bareSocketName="dtw-test-collection" → list room.
+// bareSocketName="dtw-test-collection-{id}" → document room (wired automatically
+// when the consumer passes the room in bareSettings on the read/update DTW).
+//
+// Expected behaviour:
+//   List view  — insert prepends a row; update patches in-place; delete removes.
+//   Read view  — update pushes new data into the form; delete navigates back to list.
+//   isLive indicator (green dot) appears when EventSource connects.
+//   isLiveOffline indicator (yellow dot) appears when navigator goes offline.
+const DTW_SSE_COLLECTION = "dtw-test-collection";
+
+const DTWSseLiveSchema = [
+  { id: "clientName", name: "Client Name", type: "string" as const },
+  {
+    id: "status",
+    name: "Status",
+    type: "list" as const,
+    listSelection: ["Draft", "Active", "Closed"],
+    optional: true,
+  },
+  {
+    id: "createdAt",
+    name: "Created At",
+    type: "date" as const,
+    optional: true,
+  },
+];
+
+const DTW_SSE_STATUSES = ["Draft", "Active", "Closed"];
+
+const handleBuildSseRecord = (index: number) => ({
+  _id: `live-${index}`,
+  clientName: STORY_NAMES[index % STORY_NAMES.length],
+  status: DTW_SSE_STATUSES[index % DTW_SSE_STATUSES.length],
+  createdAt: new Date(Date.now() - index * 3_600_000).toISOString(),
+});
+
+export const DTWSseLive = () => {
+  const dataRefreshRef: any = useRef(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const storeRef = useRef<any[]>(
+    handleBuildStoryRecords(8, handleBuildSseRecord),
+  );
+  const nextIndexRef = useRef<number>(9);
+  const mount = useStoryBackend({
+    collections: { [DTW_SSE_COLLECTION]: storeRef.current },
+    live: true,
+  });
+
+  useEffect(() => handleInstallStoryLiveStream(), []);
+
+  // INFO: a change made by "someone else" — written straight to the store and
+  // pushed down the live stream, never through this DTW
+  const handleSimulateRemoteChange = (type: "insert" | "update" | "delete") => {
+    const store = storeRef.current;
+    if (type === "insert") {
+      const record = handleBuildSseRecord(nextIndexRef.current++);
+      record.createdAt = new Date().toISOString();
+      store.unshift(record);
+      handleEmitStoryEnvelope(DTW_SSE_COLLECTION, "insert", record);
+      return;
+    }
+    const target = store[0];
+    if (!target) return;
+    if (type === "update") {
+      const status =
+        DTW_SSE_STATUSES[
+          (DTW_SSE_STATUSES.indexOf(target.status) + 1) %
+            DTW_SSE_STATUSES.length
+        ];
+      store[0] = { ...target, status };
+      handleEmitStoryEnvelope(DTW_SSE_COLLECTION, "update", store[0]);
+      return;
+    }
+    store.splice(0, 1);
+    handleEmitStoryEnvelope(DTW_SSE_COLLECTION, "delete", { _id: target._id });
+  };
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) return <Loading />;
+
+  // INFO: room name follows SocketWrapper convention —
+  //   list view  → "{collection}"
+  //   read/update view → "{collection}-{id}"
+  const bareSocketName =
+    viewType === "list"
+      ? DTW_SSE_COLLECTION
+      : `${DTW_SSE_COLLECTION}-${selectedId}`;
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW — SSE Live Updates
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        <code>bareSocketName</code> + <code>workspace.sseEndpoint</code>. The
+        green dot in the table header appears when the stream connects. The
+        buttons below make a change as another user would — it arrives without a
+        refresh. Edits made here are pushed to the stream too.
+      </div>
+      <div className="mb-4 flex flex-row gap-x-2">
+        <Button
+          type="light"
+          size="small"
+          text="Someone adds a record"
+          onClick={() => handleSimulateRemoteChange("insert")}
+        />
+        <Button
+          type="light"
+          size="small"
+          text="Someone updates the first"
+          onClick={() => handleSimulateRemoteChange("update")}
+        />
+        <Button
+          type="light"
+          size="small"
+          text="Someone deletes the first"
+          onClick={() => handleSimulateRemoteChange("delete")}
+        />
+      </div>
+      <DataTemplateWrapper
+        ref={dataRefreshRef}
+        title="Live Collection"
+        type={viewType}
+        id={selectedId}
+        collectionId={DTW_SSE_COLLECTION}
+        schema={DTWSseLiveSchema}
+        workspace={{
+          ...storyWorkspace(),
+          // INFO: sseEndpoint flows through parseWorkspaceSettings →
+          // devSettings.sseEndpoint → buildSSEUrl → EventSource
+          sseEndpoint: STORY_LIVE_ENDPOINT,
+        }}
+        edit={{
+          allEditable: true,
+          disabledUpdate: false,
+          disableBatchUpdate: false,
+          deleteBtn: true,
+        }}
+        bareSettings={{
+          bareCompactMode: true,
+          bareNewDTW: true,
+          // INFO: room switches between list room and document room depending on view type
+          bareSocketName,
+          bareUpdateActionComponent:
+            viewType === "read"
+              ? (data) => (
+                  <Button
+                    type="normal"
+                    text="Update"
+                    onClick={() => {
+                      setSelectedId(data._id);
+                      setViewType("update");
+                    }}
+                  />
+                )
+              : undefined,
+        }}
+        organise={{
+          sort: { sortId: "createdAt", type: "desc" as const },
+          breadcrumbType: "button",
+        }}
+        handleNavigate={handleNavigate}
+        limit={10}
+      />
+    </div>
+  );
+};
+DTWSseLive.storyName = "DTW SSE Live";
+
+const DEMO_JOB_COLLECTION = "demo-field-jobs";
+const DEMO_JOB_STATUSES = [
+  "Not Completed",
+  "In Progress",
+  "Completed",
+  "Cancelled",
+];
+
+const DemoJobSchema = [
+  { id: "title", name: "Title", type: "string" as const },
+  { id: "verified", name: "Verified", type: "boolean" as const },
+  {
+    id: "status",
+    name: "Status",
+    type: "list" as const,
+    listSelection: DEMO_JOB_STATUSES,
+    listSelectionColour: ["red", "yellow", "green", "dark"],
+  },
+  { id: "startDate", name: "Clock In", type: "date" as const },
+  { id: "endDate", name: "Clock Out", type: "date" as const },
+  { id: "operationDay", name: "Operation Day", type: "number" as const },
+  { id: "crew", name: "Crew Lead", type: "string" as const },
+  { id: "hoursWorked", name: "Hours Worked", type: "number" as const },
+];
+
+// INFO: incidentData_count stands in for the count the server's bareListPipeline
+// lookup adds to each row
+const handleBuildJobRecord = (index: number) => {
+  const start = new Date(Date.now() - index * 86_400_000);
+  return {
+    _id: `job-${index}`,
+    title: `Job ${String(index).padStart(3, "0")}`,
+    verified: index % 3 !== 0,
+    status: DEMO_JOB_STATUSES[index % DEMO_JOB_STATUSES.length],
+    startDate: start.toISOString(),
+    endDate: new Date(start.getTime() + 6 * 3_600_000).toISOString(),
+    operationDay: (index % 4) + 1,
+    crew: STORY_NAMES[index % STORY_NAMES.length],
+    hoursWorked: 4 + (index % 5),
+    incidentData_count: index % 5 === 0 ? (index % 3) + 1 : 0,
+  };
+};
+
+export const DTWFlexFilters = () => {
+  const mount = useStoryBackend({
+    collections: {
+      [DEMO_JOB_COLLECTION]: handleBuildStoryRecords(36, handleBuildJobRecord),
+    },
+  });
+  const dataRef = useRef<any>(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const [listMobileView, setListMobileView] = useState(false);
+  // INFO: live applied flex filters, fed by bareOnFlexFiltersChange. Card active
+  // state is DERIVED from this rather than click history, so a card highlights
+  // only while its filter is actually applied — and de-highlights on its own if
+  // the user edits or clears that row in the flex filter panel.
+  const [liveFilters, setLiveFilters] = useState<FlexFilterData[]>([]);
+
+  // INFO: set mobile view when browser width is smaller than 640px
+  useEffect(() => {
+    const handleResize = () => {
+      setListMobileView(window.innerWidth < 640);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) return <Loading />;
+
+  // INFO: two mutually-exclusive cards on DIFFERENT columns. Clicking a card
+  // applies its filter; clicking a different card switches to it even if the
+  // previous card was never unclicked. Since the cards target different columns
+  // this switch clears one column and applies another in the SAME tick — the
+  // exact clear+apply sequence the ref-backed commit keeps correct within a
+  // tick. Requires bareSettings.bareFlexFilters.
+  const quickFilterCards: {
+    label: string;
+    description: string;
+    columnIds: string[];
+    filters: FlexFilterData[];
+  }[] = [
+    {
+      label: "Completed cycles",
+      description: "status = Completed",
+      columnIds: ["status"],
+      filters: [
+        {
+          id: "card-status",
+          columnId: "status",
+          operator: "=",
+          value: "Completed",
+        },
+      ],
+    },
+    {
+      label: "Verified only",
+      description: "verified = true",
+      columnIds: ["verified"],
+      filters: [
+        {
+          id: "card-verified",
+          columnId: "verified",
+          operator: "=",
+          value: "true",
+        },
+      ],
+    },
+    {
+      // INFO: filters on a bareListPipeline-derived column (incidentData_count).
+      // value 0 is falsy, so this also exercises the badge fix — the old
+      // truthiness count would have skipped it even though it filters.
+      label: "Has incidents",
+      description: "incident count > 0",
+      columnIds: ["incidentData_count"],
+      filters: [
+        {
+          id: "card-incidents",
+          columnId: "incidentData_count",
+          operator: ">",
+          value: 0,
+        },
+      ],
+    },
+  ];
+
+  // INFO: a card is active only when every one of its filters is actually
+  // present in the live applied filters — matched by column, operator and value
+  // (value compared as string since the panel stores e.g. boolean as "true").
+  const handleIsCardActive = (card: (typeof quickFilterCards)[number]) =>
+    card.filters.every((cardFilter) =>
+      liveFilters.some(
+        (live) =>
+          live.columnId === cardFilter.columnId &&
+          live.operator === cardFilter.operator &&
+          String(live.value) === String(cardFilter.value),
+      ),
+    );
+
+  // INFO: mutually exclusive — clicking the active card clears it; clicking any
+  // other card clears every card column then applies the clicked one, so only
+  // one card's filter is ever applied even if the previous was never unclicked.
+  const handleToggleCardFilter = (card: (typeof quickFilterCards)[number]) => {
+    if (handleIsCardActive(card)) {
+      dataRef.current?.handleClearFlexFilters(card.columnIds);
+      return;
+    }
+    const allCardColumnIds = quickFilterCards.flatMap((c) => c.columnIds);
+    dataRef.current?.handleClearFlexFilters(allCardColumnIds);
+    dataRef.current?.handleApplyFlexFilters(card.filters);
+  };
+
+  return (
+    <div className="w-full min-h-screen">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW - Card-Driven Flex Filters
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Mutually-exclusive cards on different columns. Clicking a card applies
+        its filter via <code>ref.handleApplyFlexFilters</code>; clicking another
+        switches to it — clearing the first column and applying the second in
+        one go — even if the first was never unclicked. Click the active card
+        again to clear it. The "Has incidents" card filters a{" "}
+        <code>bareListPipeline</code> column with value <code>0</code>, so the
+        filter badge counts it correctly. Seeded rows show up in the flex filter
+        panel and stay clearable by the user.
+      </div>
+      <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
+        {quickFilterCards.map((card) => {
+          const isActive = handleIsCardActive(card);
+          return (
+            <button
+              key={card.label}
+              type="button"
+              onClick={() => handleToggleCardFilter(card)}
+              className={`rounded-lg border p-4 text-left text-sm transition-colors ${
+                isActive
+                  ? "border-primary-500 bg-primary-50"
+                  : "border-gray-200 hover:bg-primary-50"
+              }`}
+            >
+              <p className="font-medium text-gray-900">{card.label}</p>
+              <p className="mt-1 text-xs text-gray-500">{card.description}</p>
+              {isActive && (
+                <p className="mt-2 text-xs font-medium text-primary-600">
+                  Applied — click to clear
+                </p>
+              )}
+            </button>
+          );
+        })}
+      </div>
+      <DataTemplateWrapper
+        ref={dataRef}
+        title="Flex Filters"
+        description=""
+        type={viewType}
+        id={selectedId}
+        collectionId={DEMO_JOB_COLLECTION}
+        schema={DemoJobSchema}
+        workspace={storyWorkspace()}
+        edit={{
+          allEditable: true,
+          disabledUpdate: false,
+          disableBatchUpdate: false,
+          deleteBtn: true,
+        }}
+        organise={{
+          breadcrumbType: "button",
+          sort: { sortId: "endDate", type: "desc" },
+        }}
+        bareSettings={{
+          bareCompactMode: true,
+          bareNewDTW: true,
+          bareListMobileView: listMobileView,
+          bareFlexFilters: true,
+          bareOnFlexFiltersChange: setLiveFilters,
+          bareListMobileFloatingSearch: true,
+          bareListTablePinColumns: { left: ["title"] },
+          bareListPipeline: [
+            {
+              spaceReferenceId: "demo-incidents",
+              spaceReferenceAs: "incidentData",
+              condition: [
+                { type: "=", fromColumnId: "_id", toColumnId: "jobId" },
+              ],
+              referenceSpaceLabel: [],
+              referenceQuery: [{ type: "=", queryId: "crashed", value: false }],
+              referenceShowCount: true,
+            },
+          ],
+          bareListDescription: (key, value) => {
+            if (key === "incidentData_count") {
+              if (value) {
+                return <Tag tagText={value} size="small" color="red" />;
+              }
+            }
+            return undefined;
+          },
+        }}
+        handleNavigate={handleNavigate}
+        limit={10}
+      />
+    </div>
+  );
+};
+DTWFlexFilters.storyName = "DTW Flex Filters";
+
+// INFO: Story used by the hide-columns e2e block, which answers its requests
+// with page.route under the dtw-test-collection alias. It adds one
+// developer-hidden column to prove users can never toggle it back on.
+const DataWrapperHideColumnSchema = [
+  {
+    id: "clientName",
+    name: "Client Name",
+    type: "string" as const,
+    optional: true,
+  },
+  {
+    id: "clientPhone",
+    name: "Client Phone",
+    type: "string" as const,
+    optional: true,
+  },
+  { id: "address", name: "Address", type: "string" as const, optional: true },
+  {
+    id: "internalRef",
+    name: "Internal Ref",
+    type: "string" as const,
+    optional: true,
+    hide: true,
+  },
+];
+
+// INFO: a deliberately wide schema — the view settings panel has to stay usable
+// on a collection with dozens of fields (Space runs to 24+), so the column list
+// scrolls and the search box earns its place
+const DataWrapperWideSchema = [
+  ...DataWrapperHideColumnSchema,
+  { id: "email", name: "Email", type: "email" as const, optional: true },
+  { id: "city", name: "City", type: "string" as const, optional: true },
+  { id: "state", name: "State", type: "string" as const, optional: true },
+  { id: "postcode", name: "Postcode", type: "string" as const, optional: true },
+  { id: "country", name: "Country", type: "string" as const, optional: true },
+  {
+    id: "status",
+    name: "Status",
+    type: "list" as const,
+    listSelection: ["New", "Active", "On Hold", "Closed"],
+    listSelectionColour: ["blue", "green", "yellow", "red"],
+    optional: true,
+  },
+  {
+    id: "priority",
+    name: "Priority",
+    type: "list" as const,
+    listSelection: ["Low", "Medium", "High"],
+    listSelectionColour: ["green", "yellow", "red"],
+    optional: true,
+  },
+  { id: "owner", name: "Owner", type: "string" as const, optional: true },
+  { id: "team", name: "Team", type: "string" as const, optional: true },
+  { id: "source", name: "Source", type: "string" as const, optional: true },
+  {
+    id: "contractValue",
+    name: "Contract Value",
+    type: "number" as const,
+    optional: true,
+  },
+  {
+    id: "outstanding",
+    name: "Outstanding Amount",
+    type: "number" as const,
+    optional: true,
+  },
+  {
+    id: "startDate",
+    name: "Start Date",
+    type: "date" as const,
+    optional: true,
+  },
+  { id: "endDate", name: "End Date", type: "date" as const, optional: true },
+  {
+    id: "lastContact",
+    name: "Last Contact",
+    type: "date" as const,
+    optional: true,
+  },
+  {
+    id: "followUpDate",
+    name: "Follow Up Date",
+    type: "date" as const,
+    optional: true,
+  },
+  {
+    id: "verified",
+    name: "Verified",
+    type: "boolean" as const,
+    optional: true,
+  },
+  {
+    id: "subscribed",
+    name: "Subscribed",
+    type: "boolean" as const,
+    optional: true,
+  },
+  { id: "remarks", name: "Remarks", type: "textArea" as const, optional: true },
+  {
+    id: "internalNotes",
+    name: "Internal Notes",
+    type: "textArea" as const,
+    optional: true,
+  },
+];
+
+const handleBuildContactRecord = (index: number) => ({
+  _id: `contact-${index}`,
+  clientName: STORY_NAMES[index % STORY_NAMES.length],
+  clientPhone: `01${2000000 + index * 1379}`,
+  address: `${index} Jalan Contoh, 50450 Kuala Lumpur`,
+  internalRef: `REF-${1000 + index}`,
+  email: `contact${index}@example.com`,
+  city: ["Kuala Lumpur", "Penang", "Johor Bahru", "Ipoh"][index % 4],
+  state: ["Selangor", "Penang", "Johor", "Perak"][index % 4],
+  postcode: String(50000 + index * 17),
+  country: "Malaysia",
+  status: ["New", "Active", "On Hold", "Closed"][index % 4],
+  priority: ["Low", "Medium", "High"][index % 3],
+  owner: STORY_NAMES[(index + 3) % STORY_NAMES.length],
+  team: ["North", "South", "Central"][index % 3],
+  source: ["Referral", "Website", "Event"][index % 3],
+  contractValue: 5000 + index * 750,
+  outstanding: (index % 4) * 1250,
+  startDate: new Date(Date.now() - index * 86_400_000 * 7).toISOString(),
+  endDate: new Date(Date.now() + index * 86_400_000 * 30).toISOString(),
+  lastContact: new Date(Date.now() - index * 86_400_000).toISOString(),
+  followUpDate: new Date(Date.now() + index * 86_400_000 * 2).toISOString(),
+  verified: index % 2 === 0,
+  subscribed: index % 3 === 0,
+  remarks: index % 4 === 0 ? "Prefers a call in the morning." : "",
+  internalNotes: "",
+});
+
+export const DataWrapperHideColumnTest = () => {
+  const mount = useStoryBackend({
+    collections: {
+      "dtw-test-collection": handleBuildStoryRecords(
+        24,
+        handleBuildContactRecord,
+      ),
+    },
+    yieldToE2E: true,
+  });
+  const dataRefreshRef: any = useRef(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW Hide Column Test
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Exercises bareSettings.bareViewSettings — the client-only column hiding
+        control for bare DTWs. Internal Ref is hidden by the schema and must
+        never appear in the toggle list.
+      </div>
+      <DataTemplateWrapper
+        ref={dataRefreshRef}
+        title="Checklist"
+        type={viewType}
+        id={selectedId}
+        collectionId={"dtw-test-collection"}
+        schema={DataWrapperHideColumnSchema}
+        workspace={storyWorkspace()}
+        edit={{
+          allEditable: true,
+          disabledUpdate: false,
+          disableBatchUpdate: false,
+          deleteBtn: true,
+        }}
+        bareSettings={{
+          bareCompactMode: true,
+          bareNewDTW: true,
+          bareOffline: false,
+          bareViewSettings: true,
+          bareFlexFilters: true,
+        }}
+        organise={{
+          breadcrumbType: "button",
+          persistViewState: "session",
+        }}
+        handleNavigate={handleNavigate}
+        limit={10}
+      />
+    </div>
+  );
+};
+DataWrapperHideColumnTest.storyName = "DTW Hide Column Test";
+
+export const DTWPersistView = () => {
+  const mount = useStoryBackend({
+    collections: {
+      [DEMO_JOB_COLLECTION]: handleBuildStoryRecords(36, handleBuildJobRecord),
+    },
+  });
+  const dataRef = useRef<any>(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const [selectedTab, setSelectedTab] = useState("a");
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="w-full min-h-screen">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW - Persisted View
+      </div>
+      <p className="text-sm text-gray-500">
+        Persist filters, sort, page index, searched value and user hidden
+        columns in session storage / local storage
+      </p>
+      <Tabs
+        tabs={[
+          { id: "a", name: "Tab A", href: "#" },
+          { id: "b", name: "Tab B", href: "#" },
+        ]}
+        selectedId={selectedTab}
+        onClick={(id) => {
+          setSelectedTab(id);
+        }}
+      />
+      <DataTemplateWrapper
+        // INFO: remount per tab so persisted view state hydrates from the
+        // matching persistKey — it is only read on mount
+        key={selectedTab}
+        ref={dataRef}
+        title="Persisted View"
+        description=""
+        type={viewType}
+        id={selectedId}
+        collectionId={DEMO_JOB_COLLECTION}
+        schema={DemoJobSchema}
+        workspace={storyWorkspace()}
+        edit={{
+          allEditable: true,
+          disabledUpdate: false,
+          disableBatchUpdate: false,
+          deleteBtn: true,
+        }}
+        organise={{
+          breadcrumbType: "button",
+          persistViewState: "session",
+          persistKey: selectedTab,
+        }}
+        bareSettings={{
+          bareCompactMode: true,
+          bareNewDTW: true,
+          bareViewSettings: true,
+          bareFlexFilters: true,
+          bareListMobileFloatingSearch: true,
+          bareListFilterQuery: [
+            {
+              type: "=",
+              queryId: "verified",
+              value: selectedTab === "a" ? true : false,
+            },
+          ],
+        }}
+        handleNavigate={handleNavigate}
+        limit={10}
+      />
+    </div>
+  );
+};
+DTWPersistView.storyName = "DTW Persisted View";
+
+export const DataWrapperViewSettingsWide = () => {
+  const mount = useStoryBackend({
+    collections: {
+      "dtw-test-collection": handleBuildStoryRecords(
+        24,
+        handleBuildContactRecord,
+      ),
+    },
+  });
+  const dataRefreshRef: any = useRef(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  // INFO: the same panel behaves two ways — per user by default, or schema level
+  // once onChangeHide / onChangeDrag are wired to write the shared schema
+  const [schemaMode, setSchemaMode] = useState<boolean>(false);
+  const [model, setModel] = useState<any[]>(DataWrapperWideSchema);
+  const [lastChange, setLastChange] = useState<string>("none");
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  const handleChangeHide = (updatedModel: any[]) => {
+    setModel(updatedModel);
+    setLastChange(
+      `hide → ${
+        updatedModel
+          .filter((eachColumn) => eachColumn.hide)
+          .map((eachColumn) => eachColumn.id)
+          .join(", ") || "(none)"
+      }`,
+    );
+  };
+
+  const handleChangeDrag = (dragId: string, dropId: string) => {
+    setLastChange(`order → ${dragId} before ${dropId}`);
+  };
+
+  const handleToggleMode = () => {
+    setModel(DataWrapperWideSchema);
+    setLastChange("none");
+    setSchemaMode((previous) => !previous);
+  };
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW View Settings — 23 columns
+      </div>
+      <div className="text-sm font-light mb-3 text-gray-500">
+        The shape a Space collection actually has. Open the sliders icon: the
+        column list scrolls with a shade on the cut edge, the search box narrows
+        it, the handle reorders, and Sort and Rows per page stay pinned below.
+        On a phone the same panel opens as a modal.
+      </div>
+      <div className="mb-4 flex flex-row items-center gap-x-3">
+        <Button
+          type={schemaMode ? "normal" : "light"}
+          size="small"
+          text={schemaMode ? "Schema mode" : "Per user mode"}
+          onClick={handleToggleMode}
+        />
+        <span className="text-xs text-gray-500">
+          {schemaMode
+            ? "onChangeHide / onChangeDrag are wired — the change is handed back to write to the schema for everyone"
+            : "no callbacks — the hide and the order stay in this user's persisted view state"}
+        </span>
+      </div>
+      {schemaMode && (
+        <div className="mb-4 text-xs text-primary-600">
+          last change: {lastChange}
+        </div>
+      )}
+      <DataTemplateWrapper
+        // INFO: a fresh instance per mode so the panel re-reads the model
+        key={schemaMode ? "schema" : "user"}
+        ref={dataRefreshRef}
+        title="Wide Collection"
+        type={viewType}
+        id={selectedId}
+        collectionId={"dtw-test-collection"}
+        schema={schemaMode ? model : DataWrapperWideSchema}
+        workspace={storyWorkspace()}
+        edit={{ allEditable: true, deleteBtn: true }}
+        bareSettings={{
+          bareCompactMode: true,
+          bareNewDTW: true,
+          bareFlexFilters: true,
+        }}
+        organise={{
+          breadcrumbType: "button",
+          persistViewState: "session",
+          ...(schemaMode
+            ? { onChangeHide: handleChangeHide, onChangeDrag: handleChangeDrag }
+            : {}),
+        }}
+        handleNavigate={handleNavigate}
+        limit={10}
+      />
+    </div>
+  );
+};
+DataWrapperViewSettingsWide.storyName = "DTW View Settings";