blixify-ui-web-mcp 0.1.19 → 0.1.21

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

@@ -1,2125 +0,0 @@
-// INFO: consumer fixtures — the DataTemplateWrapper configurations the apps
-// (KPJ on Blixify Space, Verdant) run in production, copied field for field,
-// so a library change can be checked against the real shapes before an app
-// upgrades. Every story mocks its own API and opens without a server.
-import React from "react";
-import MockAdapter from "axios-mock-adapter";
-import axios from "axios";
-import { DataTemplateWrapper } from "./index";
-import { Button } from "../../action/button";
-import { ButtonGroup } from "../../action/buttonGroup";
-import { Loading } from "../../display/loading";
-import {
-  MeraqueWorkOrderSchema,
-  PostCheckListTestSchema,
-  VerdantSimulatorSchema,
-} from "../testSchema";
-import { useEffect, useRef, useState } from "react";
-
-const meta = {
-  title: "Data/Data Wrapper/Consumer Fixtures",
-  // INFO: these stories are whole pages — Storybook's default padded frame
-  // would put a white border around the grey page
-  parameters: { layout: "fullscreen" },
-  decorators: [
-    (Story: () => React.ReactElement) => (
-      <div className="bg-gray-100 min-h-screen p-4">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-const VERDANT_ENDPOINT = "https://verdant-fixture.blixify.invalid/api/data";
-const IMAGE_COLLECTION = "verdant-installer-precheck-images";
-
-const handleClone = (value: any) =>
-  value === null || value === undefined
-    ? value
-    : JSON.parse(JSON.stringify(value));
-
-const handleInstallMock = (
-  collection: string,
-  store: any[],
-  counters: { update: number },
-  onCount: () => void,
-) => {
-  const mock = new MockAdapter(axios, {
-    onNoMatch: "passthrough",
-    delayResponse: 50,
-  });
-  const handleParseBody = (config: any) => {
-    try {
-      return JSON.parse(config?.data ?? "{}");
-    } catch (err) {
-      return {};
-    }
-  };
-  mock
-    .onPost(`${VERDANT_ENDPOINT}/${collection}/list`)
-    .reply(() => [200, { data: handleClone(store), count: store.length }]);
-  mock
-    .onPost(`${VERDANT_ENDPOINT}/${collection}/count`)
-    .reply(() => [200, { data: store.length, count: store.length }]);
-  mock.onPost(`${VERDANT_ENDPOINT}/${collection}/get`).reply((config) => {
-    const body = handleParseBody(config);
-    return [
-      200,
-      {
-        // INFO: clone like a real HTTP response would — the list view decorates
-        // the rows it receives, and a shared object would leak that into the
-        // read view
-        data: handleClone(
-          store.find((eachRow) => eachRow._id === body.id) ?? null,
-        ),
-      },
-    ];
-  });
-  mock.onPost(`${VERDANT_ENDPOINT}/${collection}/update`).reply((config) => {
-    counters.update += 1;
-    onCount();
-    const body = handleParseBody(config);
-    const index = store.findIndex((eachRow) => eachRow._id === body.id);
-    if (index >= 0) store[index] = { ...store[index], ...(body.data ?? {}) };
-    return [200, { success: true }];
-  });
-  return mock;
-};
-
-// INFO: Verdant passes its own isMobile flag to every list; the fixtures derive
-// it from the viewport so the phone card list + floating search show up on a
-// narrow tunnel
-const useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState<boolean>(
-    typeof window !== "undefined" && window.innerWidth < 768,
-  );
-  useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth < 768);
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return isMobile;
-};
-
-const workspace = {
-  apiEndpointType: "mongoDB" as const,
-  apiEndpoint: VERDANT_ENDPOINT,
-  apiEndpointToken: "",
-  apiUserToken: "",
-  assetEndpoint: "",
-  assetUploadEndpoint: "",
-};
-
-// ---------------------------------------------------------------------------
-// KPJ · Grant proposal form
-// The shape of Blixify Space's kpj-projects module (a MOHE ReDI-style grant
-// application): tabs on a left rail, sections with descriptions, a radio list,
-// a pill boolean and a wide nested sheet — trimmed to three tabs.
-// ---------------------------------------------------------------------------
-const LONG_ENDPOINT = "https://longform.blixify.invalid/api/data";
-const LONG_COLLECTION = "long-proposals";
-
-const LongFormSchema = [
-  {
-    id: "title",
-    name: "Research Title",
-    type: "string" as const,
-    tabId: "A. Identification",
-    groupId: "Research Details",
-  },
-  {
-    id: "abbreviation",
-    name: "Title Abbreviation",
-    type: "string" as const,
-    optional: true,
-    tabId: "A. Identification",
-    groupId: "Research Details",
-  },
-  {
-    id: "status",
-    name: "Status",
-    type: "list" as const,
-    listSelection: ["Draft", "Submitted", "Approved"],
-    optional: true,
-    tabId: "A. Identification",
-    groupId: "Application Details",
-  },
-  {
-    id: "cluster",
-    name: "Research Cluster",
-    type: "list" as const,
-    listView: "radioview" as const,
-    listSelection: [
-      "Food Safety & Security",
-      "Basic Infrastructure",
-      "Climate Change & Environment",
-      "Health",
-      "Education & Civil Society",
-      "National Security",
-      "Social & Economic Wellbeing",
-      "Frontier Technologies",
-    ],
-    tabId: "B. Classification",
-    groupId: "Alignment",
-  },
-  {
-    id: "humanSubjects",
-    name: "Involves human subjects",
-    type: "boolean" as const,
-    enableRadioButtons: true,
-    optional: true,
-    tabId: "B. Classification",
-    groupId: "Ethics",
-  },
-  {
-    id: "dayLog",
-    name: "Daily Log",
-    type: "listObject" as const,
-    listFlexTable: true,
-    listFlexCategories: [{ title: "Day 1" }, { title: "Day 2" }],
-    optional: true,
-    tabId: "C. Site Log",
-    groupId: "Checklist",
-    objectData: [
-      {
-        id: "panels",
-        name: "Panels installed",
-        type: "number" as const,
-        optional: true,
-      },
-      {
-        id: "inverters",
-        name: "Inverters mounted",
-        type: "number" as const,
-        optional: true,
-      },
-      {
-        id: "cablesMetres",
-        name: "Cable run (m)",
-        type: "number" as const,
-        optional: true,
-      },
-      {
-        id: "earthing",
-        name: "Earthing points",
-        type: "number" as const,
-        optional: true,
-      },
-      {
-        id: "brackets",
-        name: "Roof brackets",
-        type: "number" as const,
-        optional: true,
-      },
-      {
-        id: "optimisers",
-        name: "Optimisers fitted",
-        type: "number" as const,
-        optional: true,
-      },
-      {
-        id: "crew",
-        name: "Crew on site",
-        type: "number" as const,
-        optional: true,
-      },
-    ],
-  },
-];
-
-const sampleRecord = {
-  _id: "long-01",
-  title: "",
-  abbreviation: "",
-  status: "Draft",
-  cluster: "",
-  humanSubjects: undefined,
-  dayLog: [
-    {
-      category: "Day 1",
-      title: "Morning shift",
-      panels: 24,
-      inverters: 1,
-      cablesMetres: 120,
-      earthing: 4,
-      brackets: 48,
-      optimisers: 24,
-      crew: 4,
-    },
-    {
-      category: "Day 2",
-      title: "Commissioning",
-      panels: 0,
-      inverters: 1,
-      cablesMetres: 30,
-      earthing: 2,
-      brackets: 0,
-      optimisers: 0,
-      crew: 2,
-    },
-  ],
-};
-
-const handleInstallLongFormMock = (
-  store: any[],
-  counters: { update: number },
-  onCount: () => void,
-) => {
-  const mock = new MockAdapter(axios, {
-    onNoMatch: "passthrough",
-    delayResponse: 50,
-  });
-  const handleParseBody = (config: any) => {
-    try {
-      return JSON.parse(config?.data ?? "{}");
-    } catch (err) {
-      return {};
-    }
-  };
-  mock
-    .onPost(`${LONG_ENDPOINT}/${LONG_COLLECTION}/list`)
-    .reply(() => [200, { data: handleClone(store), count: store.length }]);
-  mock.onPost(`${LONG_ENDPOINT}/${LONG_COLLECTION}/get`).reply((config) => {
-    const body = handleParseBody(config);
-    return [
-      200,
-      { data: store.find((eachRow) => eachRow._id === body.id) ?? null },
-    ];
-  });
-  mock.onPost(`${LONG_ENDPOINT}/${LONG_COLLECTION}/update`).reply((config) => {
-    counters.update += 1;
-    onCount();
-    const body = handleParseBody(config);
-    const index = store.findIndex((eachRow) => eachRow._id === body.id);
-    if (index >= 0) store[index] = { ...store[index], ...(body.data ?? {}) };
-    return [200, { success: true }];
-  });
-  return mock;
-};
-
-export const KPJGrantProposalForm = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const [, setTick] = useState<number>(0);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">(
-    "update",
-  );
-  const [selectedId, setSelectedId] = useState<string | undefined>("long-01");
-  const storeRef = useRef<any[]>([JSON.parse(JSON.stringify(sampleRecord))]);
-  const countersRef = useRef({ update: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallLongFormMock(
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  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">
-        KPJ · Grant Proposal Form
-      </div>
-      <div className="text-sm font-light mb-2 text-gray-500">
-        Three tabs on a left rail with numbered steps and completion ticks,
-        sections as white cards with descriptions, a step bar with a counter, an
-        eight-option radio list in two columns, a Yes / No pill boolean, and a
-        seven-column daily log that scrolls sideways with its first column
-        pinned.
-      </div>
-      <div className="mb-4 text-xs text-gray-600 font-mono">
-        update calls:{" "}
-        <span data-testid="longform-update-count">
-          {countersRef.current.update}
-        </span>
-      </div>
-      <DataTemplateWrapper
-        title="Grant Proposal"
-        type={viewType}
-        id={selectedId}
-        collectionId={LONG_COLLECTION}
-        schema={LongFormSchema}
-        workspace={{
-          apiEndpointType: "mongoDB",
-          apiEndpoint: LONG_ENDPOINT,
-          apiEndpointToken: "",
-          apiUserToken: "",
-          assetEndpoint: "",
-          assetUploadEndpoint: "",
-        }}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          deleteBtn: false,
-          enableUpdateDraft: true,
-        }}
-        bareSettings={{ bareNewDTW: true, bareSaveOnTabChange: true }}
-        organise={{
-          breadcrumbType: "button",
-          tabAlign: "left",
-          tabDescriptions: {
-            "A. Identification":
-              "Core proposal metadata: title, abbreviation and application status.",
-            "B. Classification":
-              "Research alignment, cluster and ethics declarations.",
-            "C. Site Log": "Day-by-day installation counts.",
-          },
-          groupDescriptions: {
-            "Research Details": "What the study is called.",
-            "Application Details":
-              "Where the application sits in the pipeline.",
-            Checklist:
-              "One row per day; scroll sideways for the later columns.",
-          },
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Verdant · Installer pre-installation checklist
-// components/base/installer/InstallerChecklistComponent.tsx, checklistType
-// "preCheckList", desktop tab titles. tabAlign "stepper", draft saves on every
-// tab change, action bar at the bottom, no custom action component in the
-// update view.
-// ---------------------------------------------------------------------------
-
-const PRECHECK_COLLECTION = "verdant-installer-precheck";
-
-const TAB_BASIC = "Basic Information";
-const TAB_MATERIAL = "Material & Equipment Check";
-const TAB_PANEL = "Panel Layout & System Design";
-const TAB_ROOF = "Roof Condition Verification";
-const TAB_AGREEMENT = "Client Agreement & Briefing";
-
-const imageField = {
-  type: "multipleImage" as const,
-  imageCollectionName: IMAGE_COLLECTION,
-  fileExtension: "image/*,video/*,.dng",
-  compressfileQuality: 1,
-  maxFileSize: 1.5,
-};
-
-const PreChecklistSchema: any[] = [
-  // renderBasicInformationSchema
-  {
-    id: "clientName",
-    name: "Client Name",
-    type: "string",
-    groupId: "1. Basic Information",
-    tabId: TAB_BASIC,
-  },
-  {
-    id: "address",
-    name: "Address",
-    type: "string",
-    groupId: "1. Basic Information",
-    tabId: TAB_BASIC,
-  },
-  {
-    id: "date",
-    name: "Actual Installation Date",
-    type: "date",
-    groupId: "1. Basic Information",
-    tabId: TAB_BASIC,
-  },
-  {
-    id: "systemSize",
-    name: "System Size (kWp)",
-    type: "number",
-    groupId: "1. Basic Information",
-    tabId: TAB_BASIC,
-  },
-  {
-    id: "panelNumbers",
-    name: "Total Panels to be Installed",
-    type: "number",
-    groupId: "1. Basic Information",
-    tabId: TAB_BASIC,
-  },
-  // renderSafetyCheckSchema
-  {
-    id: "safetyHarnessPrepared",
-    name: "Safety harness prepared and worn",
-    type: "boolean",
-    enableCheckbox: true,
-    defaultValue: false,
-    groupId: "1. Safety Check",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "rubberCoveredShoes",
-    name: "Rubber/Covered shoe prepared and worn",
-    type: "boolean",
-    enableCheckbox: true,
-    defaultValue: false,
-    groupId: "1. Safety Check",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "safetyCheckImage",
-    name: "Safety Attire Images",
-    ...imageField,
-    groupId: "1. Safety Check",
-    tabId: TAB_MATERIAL,
-  },
-  // renderMaterialEquipmentCheckSchema
-  {
-    id: "componentsVerification",
-    name: "Material Verification",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "componentsVerificationImage",
-    name: "Upload Material Images",
-    ...imageField,
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "componentsRemarks",
-    name: "Material Verification Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "wattageConfirmation",
-    name: "Panel Wattage Confirmation",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "wattageRemarks",
-    name: "Panel Wattage Confirmation Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "panelBrand",
-    name: "Panel Brand",
-    type: "list",
-    listSelection: ["Jinko 580W", "Longi 590W", "Canadian Solar 575W"],
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "systemType",
-    name: "System Type",
-    type: "list",
-    listSelection: [
-      "Microinverter",
-      "String Inverter",
-      "Microinverter + BESS",
-      "String Inverter + BESS",
-    ],
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "inverterModel",
-    name: "Inverter Model",
-    type: "string",
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "dataLoggerSN",
-    name: "Data Logger SN",
-    type: "string",
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "serialNumber",
-    name: "Inverter Serial Number",
-    type: "string",
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "batterySerialNumber",
-    name: "Battery Serial Number",
-    type: "string",
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-    hideWhen: [
-      {
-        type: "!in",
-        queryId: "systemType",
-        value: ["Microinverter + BESS", "String Inverter + BESS"],
-      },
-    ],
-  },
-  // INFO: the string-settings sheet lives in the post-installation checklist
-  // (renderRoofAndPanelStructure); it sits here so the fixture also exercises
-  // the FlexTable inside a stepper form
-  {
-    id: "stringInverterSettings",
-    name: "String Inverter Settings",
-    type: "listObject",
-    listFlexTable: true,
-    listFlexCategories: [
-      { title: "String Number", description: "String 1 to String 4" },
-    ],
-    listFlexMaxRows: 4,
-    optional: true,
-    groupId: "2. Materials Specifications and Condition",
-    tabId: TAB_MATERIAL,
-    objectData: [
-      {
-        id: "voltageCheck",
-        name: "Voltage Check (VoC)",
-        type: "number",
-        minNumber: 0.1,
-      },
-      {
-        id: "cableLength",
-        name: "Cable Length (meters)",
-        type: "number",
-        minNumber: 1,
-      },
-      { id: "tiltAngle", name: "Tilt Angle (°)", type: "number" },
-      {
-        id: "orientation",
-        name: "Orientation",
-        type: "list",
-        listSelection: [
-          "North",
-          "South",
-          "East",
-          "West",
-          "North-East",
-          "North-West",
-          "South-East",
-          "South-West",
-        ],
-        listNewValue: true,
-      },
-    ],
-    hideWhen: [
-      {
-        type: "!in",
-        queryId: "systemType",
-        value: ["String Inverter", "String Inverter + BESS"],
-      },
-    ],
-  },
-  {
-    id: "clientDBCondition",
-    name: "Client DB Condition Verification",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "3. Client DB Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "conditionRemarks",
-    name: "Client DB Condition Verification Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "3. Client DB Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "conditionPictures",
-    name: "Pictures of Condition",
-    ...imageField,
-    groupId: "3. Client DB Condition",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "skyliftArrivalImage",
-    name: "Skylift Arrival Images",
-    ...imageField,
-    optional: true,
-    groupId: "4. Skylift Arrival",
-    tabId: TAB_MATERIAL,
-  },
-  {
-    id: "skyliftArrivalTime",
-    name: "Skylift Arrival Time",
-    type: "date",
-    showTime: true,
-    optional: true,
-    groupId: "4. Skylift Arrival",
-    tabId: TAB_MATERIAL,
-  },
-  // renderPanelLayoutSystemDesignSchema
-  {
-    id: "placementAgreement",
-    name: "Client Agreement in Layout and Placement",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "1. Panel Layout and Inverter Placement",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "placementRemarks",
-    name: "Client Agreement in Layout and Placement Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "1. Panel Layout and Inverter Placement",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "placementImage",
-    name: "Upload New Layout with Installer Draft Image (If disagreement with current layout)",
-    ...imageField,
-    optional: true,
-    groupId: "1. Panel Layout and Inverter Placement",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "inverterLocationImage",
-    name: "Inverter Location Images",
-    ...imageField,
-    groupId: "2. Inverter Location",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "routingLengthOptimization",
-    name: "Client has been briefed and agrees on cable and casing placement?",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "3. Cable and Casing Placement",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "routingRemarks",
-    name: "Issues with cable and casing placement",
-    type: "textArea",
-    optional: true,
-    groupId: "3. Cable and Casing Placement",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "existingDamageNoted",
-    name: "No Existing Damage Noted",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "4. Existing Damage in the House now",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "existingDamagePhoto",
-    name: "Upload Existing Damage Photo (If Noted)",
-    ...imageField,
-    optional: true,
-    groupId: "4. Existing Damage in the House now",
-    tabId: TAB_PANEL,
-  },
-  {
-    id: "existingDamageRemarks",
-    name: "Existing Damage Noted Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "4. Existing Damage in the House now",
-    tabId: TAB_PANEL,
-  },
-  // renderRoofConditionVerificationSchema
-  {
-    id: "freeDamage",
-    name: "Free of Damage Confirmation",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "1. Roof Condition Verification",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "freeDamageRemarks",
-    name: "Roof Condition Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "1. Roof Condition Verification",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "freeDamageImage",
-    name: "Roof Condition Images",
-    ...imageField,
-    groupId: "1. Roof Condition Verification",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "roofStructureConfirmation",
-    name: "Roof Structure Confirmation",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "3. Roof Structure",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "roofStructureRemarks",
-    name: "Roof Structure Confirmation Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "3. Roof Structure",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "roofMaterials",
-    name: "Roof Materials",
-    type: "list",
-    listSelection: [
-      "Clay Tiles",
-      "Concrete Tiles",
-      "Metal Deck",
-      "Asbestos",
-      "Other",
-    ],
-    groupId: "3. Roof Structure",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "trussDimension",
-    name: "Truss Dimension",
-    type: "list",
-    listSelection: ["2x1", "2x2", "2x3", "Other"],
-    groupId: "3. Roof Structure",
-    tabId: TAB_ROOF,
-  },
-  {
-    id: "trussDimensionOther",
-    name: "Truss Dimension (Other)",
-    type: "string",
-    groupId: "3. Roof Structure",
-    tabId: TAB_ROOF,
-    hideWhen: [{ type: "!=", queryId: "trussDimension", value: "Other" }],
-  },
-  {
-    id: "ladderAccessPointImage",
-    name: "Ladder Access Point Images",
-    ...imageField,
-    groupId: "3. Roof Structure",
-    tabId: TAB_ROOF,
-  },
-  // renderClientAgreementBriefingSchema
-  {
-    id: "briefingProvided",
-    name: "Client has been briefed on cable layout, remarks and damage found.",
-    type: "boolean",
-    enableCheckbox: true,
-    optional: true,
-    groupId: "1. Client Agreement & Briefing",
-    tabId: TAB_AGREEMENT,
-  },
-  {
-    id: "customerRemarks",
-    name: "Briefing Provided Remarks",
-    type: "textArea",
-    optional: true,
-    groupId: "1. Client Agreement & Briefing",
-    tabId: TAB_AGREEMENT,
-  },
-  {
-    id: "customerSignature",
-    name: "Customer's Signature",
-    type: "signature",
-    groupId: "1. Client Agreement & Briefing",
-    tabId: TAB_AGREEMENT,
-  },
-];
-
-const preChecklistRecord = {
-  _id: "precheck-01",
-  clientName: "Tan Wei Ling",
-  address: "12, Jalan Setia Impian 3, Setia Alam, 40170 Shah Alam",
-  date: new Date("2026-09-02T01:00:00.000Z"),
-  systemSize: 8.7,
-  panelNumbers: 15,
-  safetyHarnessPrepared: true,
-  rubberCoveredShoes: true,
-  componentsVerification: true,
-  panelBrand: "Jinko 580W",
-  systemType: "String Inverter",
-  inverterModel: "Huawei SUN2000-8KTL-L1",
-  dataLoggerSN: "DL-2026-00418",
-  serialNumber: "HV2260041812",
-  stringInverterSettings: [
-    {
-      category: "String Number",
-      title: "String 1",
-      voltageCheck: 412.5,
-      cableLength: 18,
-      tiltAngle: 15,
-      orientation: "South",
-    },
-    {
-      category: "String Number",
-      title: "String 2",
-      voltageCheck: 408.1,
-      cableLength: 22,
-      tiltAngle: 15,
-      orientation: "South-West",
-    },
-  ],
-  clientDBCondition: true,
-  roofMaterials: "Concrete Tiles",
-  trussDimension: "2x2",
-};
-
-export const VerdantInstallerPreChecklist = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const isMobile = useIsMobile();
-  const [, setTick] = useState<number>(0);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">(
-    "update",
-  );
-  const [selectedId, setSelectedId] = useState<string | undefined>(
-    "precheck-01",
-  );
-  const storeRef = useRef<any[]>([
-    JSON.parse(JSON.stringify(preChecklistRecord)),
-  ]);
-  const countersRef = useRef({ update: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMock(
-      PRECHECK_COLLECTION,
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  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">
-        Verdant · Installer Pre-Installation Checklist
-      </div>
-      <div className="text-sm font-light mb-2 text-gray-500">
-        The production configuration of InstallerChecklistComponent for
-        checklistType &quot;preCheckList&quot;: five stepper tabs, checkbox
-        booleans, image uploads, remarks, a signature, conditional fields
-        (Battery Serial Number shows for BESS system types; String Inverter
-        Settings for string inverters), draft saved on every tab change, action
-        bar at the bottom.
-      </div>
-      <div className="mb-4 text-xs text-gray-600 font-mono">
-        update calls:{" "}
-        <span data-testid="precheck-update-count">
-          {countersRef.current.update}
-        </span>
-      </div>
-      <DataTemplateWrapper
-        title="Pre-Installation Checklist"
-        description="Complete every section before the installation starts."
-        type={viewType}
-        id={selectedId}
-        collectionId={PRECHECK_COLLECTION}
-        schema={PreChecklistSchema}
-        workspace={workspace}
-        edit={{ enableUpdateDraft: true }}
-        organise={{
-          breadcrumbType: "hidden",
-          splitView: true,
-          groupRead: "groupId",
-          tabAlign: "stepper",
-          // INFO: the labels Verdant hand-swaps into the tabId on phones, as
-          // display-only short names instead
-          tabShortLabels: {
-            [TAB_BASIC]: "Basic Info",
-            [TAB_MATERIAL]: "Material Check",
-            [TAB_PANEL]: "Panel System",
-            [TAB_ROOF]: "Roof Cond.",
-            [TAB_AGREEMENT]: "Agreement",
-          },
-        }}
-        bareSettings={{
-          bareNewDTW: true,
-          bareCompactMode: true,
-          bareListMobileView: isMobile,
-          bareListMobileFloatingSearch: true,
-          bareSaveOnTabChange: true,
-          bareUpdateActionComponent: () => undefined,
-          bareUpdateActionBottom: true,
-        }}
-        handleNavigate={handleNavigate}
-        limit={1}
-      />
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Verdant · Sales Leads list
-// app/dashboard/proposalList/page.tsx — the Sales Leads table backed by
-// mongoMasterLeadSchema (models/verdantMongo/MongoMasterLead.ts), rendered with
-// bareNewDTW, scroll pagination and advanced sort.
-// ---------------------------------------------------------------------------
-
-const LEAD_COLLECTION = "verdant-master-leads";
-
-const SALES_STATUS = [
-  "Interested",
-  "Site Survey",
-  "Low Hanging Fruit",
-  "Closed Case",
-  "Future Case",
-  "Drop",
-  "New Lead",
-  "Call Back Later",
-  "Site Survey Completed",
-];
-const SALES_STATUS_COLOUR = [
-  "indigo",
-  "blue",
-  "green",
-  "green",
-  "yellow",
-  "red",
-  "dark",
-  "blue",
-  "blue",
-];
-
-const SalesLeadSchema: any[] = [
-  { id: "name", type: "string", name: "Name" },
-  { id: "sales", type: "string", name: "Sales", optional: true },
-  {
-    id: "salesStatus",
-    type: "list",
-    name: "Sales Status",
-    listSelection: SALES_STATUS,
-    listSelectionColour: SALES_STATUS_COLOUR,
-    optional: true,
-  },
-  {
-    id: "salesAssignedDate",
-    type: "date",
-    name: "Assigned Date",
-    optional: true,
-  },
-  { id: "phone", type: "contact", name: "Phone", optional: true },
-  { id: "firstContact", type: "date", name: "First Contact", optional: true },
-  { id: "appointment", type: "boolean", name: "Appointment", optional: true },
-  {
-    id: "appointmentDate",
-    type: "date",
-    name: "Appointment Date",
-    optional: true,
-  },
-  {
-    id: "rioSentiment",
-    type: "list",
-    name: "RIO Sentiment",
-    listSelection: ["positive", "neutral", "negative"],
-    listSelectionColour: ["green", "yellow", "red"],
-    optional: true,
-  },
-  { id: "followUpDate", type: "date", name: "Follow Up Date", optional: true },
-  { id: "closedDate", type: "date", name: "Closed Date", optional: true },
-  { id: "email", type: "email", name: "Email", optional: true },
-  { id: "location", type: "string", name: "Location", optional: true },
-  { id: "roofType", type: "string", name: "Roof Type", optional: true },
-  {
-    id: "electricPhase",
-    type: "string",
-    name: "Electric Phase",
-    optional: true,
-  },
-  { id: "propertyType", type: "string", name: "Property Type", optional: true },
-  {
-    id: "monthlyTnbBill",
-    type: "string",
-    name: "Avg Monthly Bill",
-    optional: true,
-  },
-  { id: "isOwner", type: "boolean", name: "Is Owner", optional: true },
-  { id: "product", type: "string", name: "Product", optional: true },
-];
-
-const LEAD_NAMES = [
-  "Tan Wei Ling",
-  "Muhammad Aiman",
-  "Priya Nair",
-  "Lim Boon Keat",
-  "Siti Nurhaliza",
-  "Rajesh Kumar",
-  "Chong Mei Yee",
-  "Ahmad Faizal",
-  "Ng Kah Wai",
-  "Farah Hanim",
-  "Kumaravel S.",
-  "Wong Siew Lan",
-];
-const LEAD_LOCATIONS = [
-  "Setia Alam",
-  "Puchong",
-  "Shah Alam",
-  "Cyberjaya",
-  "Seremban",
-  "Klang",
-  "Petaling Jaya",
-  "Kajang",
-  "Subang Jaya",
-  "Rawang",
-  "Nilai",
-  "Ampang",
-];
-
-const salesLeadRecords = LEAD_NAMES.map((name, index) => ({
-  _id: `lead-${String(index + 1).padStart(2, "0")}`,
-  name,
-  sales: index % 3 === 0 ? "Hafiz" : index % 3 === 1 ? "Jasmine" : "Darren",
-  salesStatus: SALES_STATUS[index % SALES_STATUS.length],
-  salesAssignedDate: new Date(Date.UTC(2026, 7, 1 + index)),
-  phone: `+6012${String(3456700 + index * 37).slice(-7)}`,
-  firstContact:
-    index % 4 === 0 ? undefined : new Date(Date.UTC(2026, 7, 3 + index)),
-  appointment: index % 2 === 0,
-  appointmentDate:
-    index % 2 === 0 ? new Date(Date.UTC(2026, 7, 10 + index)) : undefined,
-  rioSentiment: ["positive", "neutral", "negative"][index % 3],
-  followUpDate:
-    index % 3 === 1 ? new Date(Date.UTC(2026, 8, 1 + index)) : undefined,
-  closedDate:
-    SALES_STATUS[index % SALES_STATUS.length] === "Closed Case"
-      ? new Date(Date.UTC(2026, 7, 20 + index))
-      : undefined,
-  email: `${name.toLowerCase().replace(/[^a-z]+/g, ".")}@example.com`,
-  location: LEAD_LOCATIONS[index],
-  roofType: index % 2 === 0 ? "Concrete Tiles" : "Metal Deck",
-  electricPhase: index % 3 === 0 ? "Single Phase" : "Three Phase",
-  propertyType: index % 4 === 3 ? "Bungalow" : "Terrace",
-  monthlyTnbBill: `RM ${350 + index * 45}`,
-  isOwner: index % 5 !== 4,
-  product: index % 2 === 0 ? "Residential Solar" : "Solar + BESS",
-}));
-
-export const VerdantSalesLeads = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const isMobile = useIsMobile();
-  const [, setTick] = useState<number>(0);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  const [viewId, setViewId] = useState<string | undefined>(undefined);
-  const storeRef = useRef<any[]>(JSON.parse(JSON.stringify(salesLeadRecords)));
-  const countersRef = useRef({ update: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMock(
-      LEAD_COLLECTION,
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  const handleNavigate = (type: any, id: any, newViewId?: string) => {
-    setViewType(type);
-    setSelectedId(id);
-    if (newViewId) setViewId(newViewId);
-  };
-
-  if (!mount) return <Loading />;
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        Verdant · Sales Leads
-      </div>
-      <div className="text-sm font-light mb-4 text-gray-500">
-        The Sales Leads table from the proposalList page: mongoMasterLeadSchema
-        with coloured Sales Status and RIO Sentiment tags, contact / email /
-        date / boolean columns, bareNewDTW, scroll pagination, advanced sort,
-        rows that open in a new tab.
-      </div>
-      <DataTemplateWrapper
-        title="Sales Leads"
-        description="Your assigned leads from Sales Lead Board"
-        type={viewType}
-        id={selectedId ?? ""}
-        collectionId={LEAD_COLLECTION}
-        schema={SalesLeadSchema}
-        workspace={workspace}
-        edit={{ allEditable: false }}
-        newTabUrl={{ default: "/dashboard/proposalList?leadId=", addons: "" }}
-        organise={{
-          paginationType: "scroll",
-          disableSelectFullData: { table: true },
-          viewId,
-          // INFO: same view tabs as the Dark Mode fixture — the default tab is
-          // the table
-          extendedTabs: [
-            { name: "List", type: "list", viewType: "list" },
-            { name: "Grid", type: "list", viewType: "grid" },
-            {
-              name: "Feeds",
-              type: "list",
-              viewType: "feeds",
-              feedsSettings: {
-                title: "name",
-                content: "salesStatus",
-                desc: "salesAssignedDate",
-              },
-            },
-            {
-              name: "Kanban",
-              type: "list",
-              viewType: "kanban",
-              kanbanSettings: { title: "salesStatus" },
-            },
-          ],
-        }}
-        bareSettings={{
-          bareNewDTW: true,
-          bareReadListTabs: true,
-          bareCompactMode: true,
-          bareListMobileView: isMobile,
-          bareListMobileFloatingSearch: true,
-          bareFlexFilters: true,
-        }}
-        handleNavigate={handleNavigate}
-        limit={15}
-      />
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Verdant · Simulator proposal form
-// components/base/CustomSolarProposals.tsx renderProposalModal — the proposal
-// editor inside the simulator: four-column update form on the full simulator
-// schema (system specs, financial results, price & maintenance, discounts),
-// list inputs locked, the caller's own (empty) action component at the bottom.
-// ---------------------------------------------------------------------------
-
-const SIMULATOR_COLLECTION = "verdant-simulator-form";
-
-const simulatorRecord = {
-  _id: "sim-01",
-  panelBrand: "Jinko 580W",
-  inverterBrand: "Huawei",
-  calcSolarPVInverterModel: "SUN2000-8KTL-L1",
-  calcSolarSystemSize: "8.7 kWp",
-  consumedRatio: 0.6,
-  exportedRatio: 0.4,
-  storedRatio: 0,
-  batteryUnit: 0,
-  calcNoPanels: 15,
-  estimatedDrop: 12,
-  calcAfterSolarBill: 98,
-  calcMonthSaving: 412,
-  calcEstSystemCost: 31800,
-  roi: 15.5,
-  paybackPeriod: 6.4,
-  calcEasyPayInstallment: 620,
-  calcNetInvestmentInsTerm: 60,
-  addOnMaintenance: "2 Years",
-  waiveMaintCost: false,
-  addOnCostMaint: 800,
-  addOnWorkmanship: "5 Years",
-  waiveWorkmanshipCost: true,
-  addOnCostWorkmanship: 0,
-  optimizerUnit: 0,
-  optimizerCost: 0,
-  systemPriceBeforeInsurance: 31000,
-  insuranceCoverYear: "1 Year",
-  worth: 33200,
-  totalSystemCost: 31800,
-  discountRate: 3,
-  verdantRebateAmount: 500,
-  tngRebateApplied: 0,
-  isReferral: true,
-  referralDiscount: 300,
-  promoItems: [],
-  calcInstallmentTerm: "60",
-  paymentTerm: "Full Payment",
-  finalCost: 30046,
-  remarks: "",
-  createdAt: new Date("2026-08-20T02:00:00.000Z"),
-  updatedAt: new Date("2026-08-21T02:00:00.000Z"),
-};
-
-export const VerdantSimulatorForm = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const [, setTick] = useState<number>(0);
-  const storeRef = useRef<any[]>([JSON.parse(JSON.stringify(simulatorRecord))]);
-  const countersRef = useRef({ update: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMock(
-      SIMULATOR_COLLECTION,
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  if (!mount) return <Loading />;
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        Verdant · Simulator Proposal Form
-      </div>
-      <div className="text-sm font-light mb-2 text-gray-500">
-        The proposal editor inside the solar simulator: bareUpdateColumnType
-        &quot;four&quot;, bareUpdateMobileView, list inputs locked, the
-        caller&apos;s own empty action component at the bottom, four sections
-        (A–D) and Additional Information.
-      </div>
-      <div className="mb-4 text-xs text-gray-600 font-mono">
-        update calls:{" "}
-        <span data-testid="simulator-update-count">
-          {countersRef.current.update}
-        </span>
-      </div>
-      <div className="rounded-lg bg-white p-4">
-        <DataTemplateWrapper
-          title=""
-          description=""
-          type="update"
-          id="sim-01"
-          collectionId={SIMULATOR_COLLECTION}
-          schema={VerdantSimulatorSchema}
-          workspace={workspace}
-          edit={{
-            allEditable: true,
-            listEditable: false,
-            disabledUpdate: false,
-            disableBatchUpdate: true,
-            createBtn: true,
-          }}
-          organise={{ breadcrumbType: "hidden", disabledOnEnter: true }}
-          bareSettings={{
-            bareNewDTW: true,
-            bareCompactMode: true,
-            bareUpdateMobileView: true,
-            bareUpdateColumnType: "four",
-            bareUpdateActionComponent: () => <></>,
-            bareUpdateActionBottom: true,
-          }}
-          handleComplete={() => {}}
-        />
-      </div>
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Verdant · Installer post-installation checklist
-// verdant-pv-delivery-postchecklist — PostCheckListTestSchema: three tabs on a
-// left rail, two listFlexTable sheets (string inverter settings, additional
-// skylift days with image + time cells), a signature, compact mode.
-// ---------------------------------------------------------------------------
-
-const POSTCHECK_COLLECTION = "verdant-pv-delivery-postchecklist";
-
-const postChecklistRecord = {
-  _id: "postcheck-01",
-  clientName: "Tan Wei Ling",
-  date: new Date("2026-09-02T01:00:00.000Z"),
-  address: "12, Jalan Setia Impian 3, Setia Alam, 40170 Shah Alam",
-  systemSize: 8.7,
-  installerName: "Ahmad Faizal",
-  pvDeliveryId: "PVD-2026-0418",
-  systemType: "String Inverter",
-  stringInverterSettings: [
-    {
-      category: "String Number",
-      title: "String 1",
-      voltageCheck: 412.5,
-      cableLength: 18,
-      tiltAngle: 15,
-      orientation: "South",
-    },
-    {
-      category: "String Number",
-      title: "String 2",
-      voltageCheck: 408.1,
-      cableLength: 22,
-      tiltAngle: 15,
-      orientation: "South-West",
-    },
-  ],
-  panelInstallation: true,
-  skyliftDepartureTime: new Date("2026-09-02T09:30:00.000Z"),
-  additionalSkylift: [
-    {
-      category: "Days 2",
-      title: "Day 2",
-      arrivalTime: new Date("2026-09-03T00:30:00.000Z"),
-      departureTime: new Date("2026-09-03T08:00:00.000Z"),
-    },
-  ],
-  finalPhotoDocumentation: false,
-};
-
-export const VerdantInstallerPostChecklist = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const isMobile = useIsMobile();
-  const [, setTick] = useState<number>(0);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">(
-    "update",
-  );
-  const [selectedId, setSelectedId] = useState<string | undefined>(
-    "postcheck-01",
-  );
-  const storeRef = useRef<any[]>([
-    JSON.parse(JSON.stringify(postChecklistRecord)),
-  ]);
-  const countersRef = useRef({ update: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMock(
-      POSTCHECK_COLLECTION,
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  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">
-        Verdant · Installer Post-Installation Checklist
-      </div>
-      <div className="text-sm font-light mb-2 text-gray-500">
-        Three tabs on a left rail, the string inverter settings sheet and the
-        additional skylift sheet (image upload and time cells inside a
-        FlexTable), a signature, compact mode.
-      </div>
-      <div className="mb-4 text-xs text-gray-600 font-mono">
-        update calls:{" "}
-        <span data-testid="postcheck-update-count">
-          {countersRef.current.update}
-        </span>
-      </div>
-      <DataTemplateWrapper
-        title="Post Checklist"
-        description="verdant-pv-delivery-postchecklist"
-        type={viewType}
-        id={selectedId}
-        collectionId={POSTCHECK_COLLECTION}
-        schema={PostCheckListTestSchema}
-        workspace={workspace}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          disableBatchUpdate: false,
-          deleteBtn: true,
-          enableUpdateDraft: true,
-        }}
-        organise={{
-          breadcrumbType: "button",
-          tabAlign: "left",
-          showExport: true,
-        }}
-        bareSettings={{
-          bareNewDTW: true,
-          bareCompactMode: true,
-          bareListMobileView: isMobile,
-          bareListMobileFloatingSearch: true,
-        }}
-        handleNavigate={handleNavigate}
-        limit={10}
-      />
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Meraque · Work order (offline)
-// app/dashboard/orders/page.tsx — the drone-spraying work order on
-// MeraqueWorkOrderSchema with bareOffline. The DTW prefetches the latest work
-// orders and the five reference collections into IndexedDB on mount; the app
-// owns the policy — here an Offline toggle, the banner and a Sync button, the
-// way Meraque wires it. Everything is mocked in the page, including the
-// reference collections, so the whole cycle runs with no server.
-// ---------------------------------------------------------------------------
-
-const WORK_ORDER_COLLECTION = "meraque-work-orders";
-const MERAQUE_REFERENCES: Array<{ collectionId: string; limit?: number }> = [
-  { collectionId: "meraque-cycles" },
-  { collectionId: "meraque-teams" },
-  { collectionId: "meraque-users" },
-  { collectionId: "meraque-robots" },
-  { collectionId: "meraque-vehicles" },
-];
-
-const meraqueReferenceStores: Record<string, any[]> = {
-  "meraque-cycles": [
-    { _id: "cycle-01", title: "Cycle 12 · Ladang Sri Tanjung" },
-    { _id: "cycle-02", title: "Cycle 13 · Ladang Bukit Kemuning" },
-  ],
-  "meraque-teams": [
-    { _id: "team-01", name: "Team Alpha" },
-    { _id: "team-02", name: "Team Bravo" },
-  ],
-  "meraque-users": [
-    { _id: "user-01", name: "Ahmad Faizal" },
-    { _id: "user-02", name: "Kumaravel S." },
-    { _id: "user-03", name: "Chong Mei Yee" },
-    { _id: "user-04", name: "Siti Nurhaliza" },
-  ],
-  "meraque-robots": [
-    { _id: "robot-01", chasisNo: "MQ-DR-2041" },
-    { _id: "robot-02", chasisNo: "MQ-DR-2058" },
-  ],
-  "meraque-vehicles": [
-    { _id: "vehicle-01", plateNo: "WXY 4821" },
-    { _id: "vehicle-02", plateNo: "BPK 913" },
-  ],
-};
-
-const workOrderRecords = Array.from({ length: 6 }, (_, index) => ({
-  _id: `wo-${String(index + 1).padStart(2, "0")}`,
-  title: `Spray run ${index + 1} · Block ${String.fromCharCode(65 + index)}`,
-  verified: index % 2 === 0,
-  cycleId: index % 2 === 0 ? "cycle-01" : "cycle-02",
-  status: index < 4 ? "Completed" : "Not Completed",
-  startDate: new Date(Date.UTC(2026, 7, 20 + index, 0, 30)),
-  endDate:
-    index < 4 ? new Date(Date.UTC(2026, 7, 20 + index, 9, 0)) : undefined,
-  operationDay: index + 1,
-  teamId: index % 2 === 0 ? "team-01" : "team-02",
-  pilotId: ["user-01", "user-02"][index % 2],
-  coPilotId: [["user-03"], ["user-04"], ["user-03", "user-04"]][index % 3],
-  robotId: index % 2 === 0 ? "robot-01" : "robot-02",
-  vehicleId: index % 2 === 0 ? "vehicle-01" : "vehicle-02",
-  pesticideName: ["Glyphosate"],
-  pesticideBefore: 120,
-  pesticideAfter: 120 - 18 * (index + 1),
-  pesticideUsed: 18 * (index + 1),
-  areaSprayed: 12.5 + index * 3,
-  totalFlight: 6 + index,
-  totalHours: 4.5 + index * 0.5,
-  submittedBy: "user-01",
-  createdAt: new Date(Date.UTC(2026, 7, 20 + index, 10, 0)),
-}));
-
-// INFO: the mock answers the work-order collection and every reference
-// collection the DTW prefetches or looks labels up in
-const handleInstallMeraqueMock = (
-  store: any[],
-  counters: { update: number; create: number },
-  onCount: () => void,
-) => {
-  const mock = handleInstallMock(
-    WORK_ORDER_COLLECTION,
-    store,
-    counters,
-    onCount,
-  );
-  mock
-    .onPost(`${VERDANT_ENDPOINT}/${WORK_ORDER_COLLECTION}/create`)
-    .reply((config) => {
-      counters.create += 1;
-      onCount();
-      let body: any = {};
-      try {
-        body = JSON.parse(config?.data ?? "{}");
-      } catch (err) {
-        body = {};
-      }
-      const created = {
-        ...(body.data ?? {}),
-        _id: body.id ?? body.data?._id ?? `wo-${store.length + 1}`,
-      };
-      store.push(created);
-      return [200, { success: true, _id: created._id }];
-    });
-  Object.entries(meraqueReferenceStores).forEach(([collection, rows]) => {
-    mock
-      .onPost(`${VERDANT_ENDPOINT}/${collection}/list`)
-      .reply(() => [200, { data: handleClone(rows), count: rows.length }]);
-    mock
-      .onPost(`${VERDANT_ENDPOINT}/${collection}/count`)
-      .reply(() => [200, { data: rows.length, count: rows.length }]);
-    // INFO: the read view resolves each reference through /get; without this
-    // route the request fails and the label falls back to a placeholder
-    mock.onPost(`${VERDANT_ENDPOINT}/${collection}/get`).reply((config) => {
-      let body: any = {};
-      try {
-        body = JSON.parse(config?.data ?? "{}");
-      } catch (err) {
-        body = {};
-      }
-      return [
-        200,
-        {
-          data: handleClone(
-            rows.find((eachRow: any) => eachRow._id === body.id) ?? null,
-          ),
-        },
-      ];
-    });
-  });
-  return mock;
-};
-
-export const MeraqueWorkOrderOffline = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const [, setTick] = useState<number>(0);
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  // INFO: the app's policy state — Meraque keeps the same flag and banner
-  const [offline, setOffline] = useState<boolean>(false);
-  const [syncing, setSyncing] = useState<boolean>(false);
-  const [cache, setCache] = useState<{
-    main: number;
-    pending: number;
-    refs: Record<string, number>;
-  }>({
-    main: 0,
-    pending: 0,
-    refs: {},
-  });
-  const isMobile = useIsMobile();
-  const dataRef = useRef<any>(null);
-  const storeRef = useRef<any[]>(JSON.parse(JSON.stringify(workOrderRecords)));
-  const countersRef = useRef({ update: 0, create: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMeraqueMock(
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  // INFO: poll IndexedDB so the panel shows what the DTW prefetched and what
-  // is still waiting to be synced
-  useEffect(() => {
-    if (!mount) return;
-    const handleCheckCache = async () => {
-      const { indexedDb } = await import("../dataTemplate/indexedDb");
-      const mainResp = await indexedDb.getValue("local", WORK_ORDER_COLLECTION);
-      const rows: any[] = Array.isArray(mainResp?.data) ? mainResp.data : [];
-      const refs: Record<string, number> = {};
-      for (const ref of MERAQUE_REFERENCES) {
-        const refResp = await indexedDb.getValue(
-          "local",
-          `${ref.collectionId}-ref`,
-        );
-        refs[ref.collectionId] = Array.isArray(refResp?.data)
-          ? refResp.data.length
-          : 0;
-      }
-      setCache({
-        main: rows.length,
-        pending: rows.filter(
-          (row) => !(row.baseOnline === true && row.syncStatus === "synced"),
-        ).length,
-        refs,
-      });
-    };
-    handleCheckCache();
-    const timer = setInterval(handleCheckCache, 1000);
-    return () => clearInterval(timer);
-  }, [mount]);
-
-  const handleSync = async () => {
-    setSyncing(true);
-    await dataRef.current?.handleUploadOfflineData?.();
-    setSyncing(false);
-  };
-
-  const handleNavigate = (type: any, id: any) => {
-    setViewType(type);
-    setSelectedId(id);
-  };
-
-  if (!mount) return <Loading />;
-
-  const renderBanner = () => (
-    <div
-      data-testid="meraque-banner"
-      className={`mb-3 flex flex-col gap-2 rounded-lg border px-3 py-2 text-sm sm:flex-row sm:items-center sm:justify-between ${
-        offline
-          ? "border-amber-300 bg-amber-50 text-amber-800"
-          : "border-gray-200 bg-white text-gray-700"
-      }`}
-    >
-      <span>
-        {offline
-          ? "You're in offline mode. Saves stay on this device."
-          : cache.pending > 0
-            ? `${cache.pending} work order(s) waiting to sync.`
-            : "Data synced. Ready for offline."}
-      </span>
-      <div className="flex flex-row gap-2">
-        <Button
-          id="meraque-toggle-offline"
-          text={offline ? "Go online" : "Go offline"}
-          type="light"
-          size="small"
-          onClick={() => setOffline(!offline)}
-        />
-        <Button
-          id="meraque-sync"
-          text={syncing ? "Syncing…" : "Sync now"}
-          type="normal"
-          size="small"
-          disable={offline || syncing || cache.pending === 0}
-          onClick={handleSync}
-        />
-      </div>
-    </div>
-  );
-
-  const renderCache = () => (
-    <div className="mb-4 rounded-lg border border-gray-200 bg-white p-3 text-xs text-gray-600">
-      <div className="flex flex-wrap gap-x-4 gap-y-1">
-        <span>
-          IndexedDB {WORK_ORDER_COLLECTION}:{" "}
-          <span
-            data-testid="meraque-cache-main"
-            className="font-medium text-gray-900"
-          >
-            {cache.main}
-          </span>{" "}
-          docs,{" "}
-          <span
-            data-testid="meraque-cache-pending"
-            className="font-medium text-gray-900"
-          >
-            {cache.pending}
-          </span>{" "}
-          pending
-        </span>
-        {MERAQUE_REFERENCES.map((ref) => (
-          <span key={ref.collectionId}>
-            {ref.collectionId}:{" "}
-            <span className="font-medium text-gray-900">
-              {cache.refs[ref.collectionId] ?? 0}
-            </span>
-          </span>
-        ))}
-        <span className="font-mono">
-          server updates:{" "}
-          <span data-testid="meraque-update-count">
-            {countersRef.current.update}
-          </span>
-        </span>
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        Meraque · Work Order (Offline)
-      </div>
-      <div className="text-sm font-light mb-3 text-gray-500">
-        bareOffline with prefetch of the latest work orders and five reference
-        collections into IndexedDB on mount. Toggle offline, edit a work order
-        and save — it stays on the device; go online and Sync now uploads it.
-        The banner, toggle and sync button are the app&apos;s part, copied from
-        Meraque.
-      </div>
-      {renderBanner()}
-      {renderCache()}
-      <DataTemplateWrapper
-        ref={dataRef}
-        title="Work Orders"
-        type={viewType}
-        id={selectedId}
-        collectionId={WORK_ORDER_COLLECTION}
-        schema={MeraqueWorkOrderSchema}
-        workspace={workspace}
-        edit={{
-          allEditable: true,
-          disabledUpdate: false,
-          disableBatchUpdate: false,
-          deleteBtn: true,
-        }}
-        organise={{
-          sort: { sortId: "startDate", type: "desc" as const },
-          breadcrumbType: "button",
-          tabAlign: "left",
-        }}
-        bareSettings={{
-          bareNewDTW: true,
-          bareCompactMode: true,
-          bareListMobileView: isMobile,
-          bareListMobileFloatingSearch: true,
-          bareOffline: true,
-          // INFO: while "online" the DTW follows the network and writes to the
-          // server; the Go offline toggle turns the listener off, which routes
-          // every save to IndexedDB — the same effect a dropped connection has
-          bareOfflineNetworkListener: !offline,
-          bareOfflinePrefetchLimit: 20,
-          bareOfflineReferences: MERAQUE_REFERENCES,
-        }}
-        handleNavigate={handleNavigate}
-        limit={20}
-      />
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Action component cases
-// bareUpdateActionComponent is one callback used by the list, the read view
-// and the update form. Only the update form changed: the three things an app
-// can return from it, side by side on the same (non-tabbed) form.
-// ---------------------------------------------------------------------------
-
-const ACTION_CASES = [
-  { id: "none", name: "Returns undefined" },
-  { id: "custom", name: "Returns own buttons" },
-  { id: "empty", name: "Returns <></>" },
-];
-
-export const ActionComponentCases = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const [, setTick] = useState<number>(0);
-  const [actionCase, setActionCase] = useState<string>("none");
-  const storeRef = useRef<any[]>([JSON.parse(JSON.stringify(simulatorRecord))]);
-  const countersRef = useRef({ update: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMock(
-      SIMULATOR_COLLECTION,
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  if (!mount) return <Loading />;
-
-  const handleActionComponent = (_data: any, formRef: any) => {
-    if (actionCase === "custom") {
-      return (
-        <div className="flex flex-row items-center gap-2">
-          <Button
-            id="case-own-secondary"
-            text="Send for review"
-            type="light"
-            size="small"
-            onClick={() => {}}
-          />
-          <Button
-            id="case-own-submit"
-            text="Approve & Submit"
-            type="normal"
-            size="small"
-            onClick={() => formRef?.current?.handleSubmit?.()}
-          />
-        </div>
-      );
-    }
-    if (actionCase === "empty") return <></>;
-    return undefined;
-  };
-
-  return (
-    <div className="w-full">
-      <div className="font-semibold mb-1 text-gray-900">
-        Action Component Cases
-      </div>
-      <div className="text-sm font-light mb-3 text-gray-500">
-        The same update form under the three things bareUpdateActionComponent
-        can return. Undefined → the library&apos;s Save · Submit in the floating
-        bar. Own buttons → they sit in the bar instead. An empty fragment → no
-        bar at all (the app owns its buttons elsewhere, e.g. a modal footer).
-        List and read views are untouched in every case.
-      </div>
-      <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <ButtonGroup
-          selection={ACTION_CASES}
-          selectedId={actionCase}
-          size="small"
-          onClick={(id) => setActionCase(id)}
-        />
-        <span className="text-xs text-gray-600 font-mono">
-          update calls:{" "}
-          <span data-testid="cases-update-count">
-            {countersRef.current.update}
-          </span>
-        </span>
-      </div>
-      <DataTemplateWrapper
-        key={actionCase}
-        title="Proposal"
-        description="Non-tabbed update form"
-        type="update"
-        id="sim-01"
-        collectionId={SIMULATOR_COLLECTION}
-        schema={VerdantSimulatorSchema}
-        workspace={workspace}
-        edit={{
-          allEditable: true,
-          listEditable: false,
-          disabledUpdate: false,
-          disableBatchUpdate: true,
-          enableUpdateDraft: true,
-        }}
-        organise={{ breadcrumbType: "hidden" }}
-        bareSettings={{
-          bareNewDTW: true,
-          bareCompactMode: true,
-          bareUpdateActionComponent: handleActionComponent,
-        }}
-        handleComplete={() => {}}
-      />
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Dark mode
-// The Sales Leads list and the KPJ grant form with organise.darkMode on, on a
-// Meraque-style page (bg-neutral-900). darkModeBg hands the app's own dark
-// surface to every panel DataTemplate paints — modals, tables, cards, the
-// floating bar, toasts — so nothing comes out navy on a black page.
-// ---------------------------------------------------------------------------
-
-const DARK_PAGE = "bg-neutral-900";
-
-export const DarkMode = () => {
-  const [mount, setMount] = useState<boolean>(false);
-  const [, setTick] = useState<number>(0);
-  const [view, setView] = useState<"list" | "calendar" | "form">("list");
-  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
-  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
-  const [viewId, setViewId] = useState<string | undefined>(undefined);
-  const isMobile = useIsMobile();
-  const storeRef = useRef<any[]>(JSON.parse(JSON.stringify(workOrderRecords)));
-  const countersRef = useRef({ update: 0, create: 0 });
-  const mockRef = useRef<any>(null);
-
-  useEffect(() => {
-    mockRef.current = handleInstallMeraqueMock(
-      storeRef.current,
-      countersRef.current,
-      () => setTick((previous) => previous + 1),
-    );
-    setMount(true);
-    return () => {
-      mockRef.current?.restore();
-      mockRef.current = null;
-    };
-  }, []);
-
-  const handleNavigate = (type: any, id: any, newViewId?: string) => {
-    setViewType(type);
-    setSelectedId(id);
-    if (newViewId) setViewId(newViewId);
-  };
-
-  if (!mount) return <Loading />;
-
-  const darkOrganise = { darkMode: true, darkModeBg: DARK_PAGE };
-  const handleSwitch = (next: "list" | "calendar" | "form") => {
-    setView(next);
-    setViewType(next === "form" ? "update" : "list");
-    setSelectedId(next === "form" ? "wo-01" : undefined);
-  };
-
-  return (
-    <div className={`${DARK_PAGE} -m-4 min-h-screen p-4 text-white`}>
-      <div className="font-semibold mb-1">Dark Mode · Meraque work orders</div>
-      <div className="text-sm font-light mb-3 text-gray-400">
-        organise.darkMode with darkModeBg = &quot;{DARK_PAGE}&quot; — the class
-        Meraque&apos;s pages use, so every DTW surface sits on the app&apos;s
-        own dark. The form has reference fields (cycle, team, pilot, robot,
-        vehicle) whose pickers open the modal, plus dates and a time.
-      </div>
-      <div className="mb-4 flex flex-row flex-wrap gap-2">
-        {(["list", "calendar", "form"] as const).map((eachView) => (
-          <Button
-            key={eachView}
-            id={`dark-view-${eachView}`}
-            text={
-              eachView === "list"
-                ? "Work orders list"
-                : eachView === "calendar"
-                  ? "Calendar view"
-                  : "Work order form"
-            }
-            type={view === eachView ? "normal" : "light"}
-            size="small"
-            onClick={() => handleSwitch(eachView)}
-          />
-        ))}
-      </div>
-      {view === "list" && (
-        <DataTemplateWrapper
-          key="dark-list"
-          title="Work Orders"
-          description="Drone spraying work orders"
-          type={viewType}
-          id={selectedId ?? ""}
-          collectionId={WORK_ORDER_COLLECTION}
-          schema={MeraqueWorkOrderSchema}
-          workspace={workspace}
-          edit={{ allEditable: true, deleteBtn: true }}
-          organise={{
-            ...darkOrganise,
-            sort: { sortId: "startDate", type: "desc" as const },
-            viewId,
-            // INFO: one tab per list renderer so every dark surface can be
-            // checked from the same story — list, grid, feeds, kanban (the default
-            // tab is the table)
-            extendedTabs: [
-              { name: "List", type: "list", viewType: "list" },
-              { name: "Grid", type: "list", viewType: "grid" },
-              {
-                name: "Feeds",
-                type: "list",
-                viewType: "feeds",
-                feedsSettings: {
-                  title: "title",
-                  content: "status",
-                  desc: "startDate",
-                },
-              },
-              {
-                name: "Kanban",
-                type: "list",
-                viewType: "kanban",
-                kanbanSettings: { title: "status" },
-              },
-            ],
-          }}
-          bareSettings={{
-            bareNewDTW: true,
-            bareCompactMode: true,
-            bareReadListTabs: true,
-            bareListMobileView: isMobile,
-            bareListMobileFloatingSearch: true,
-            bareFlexFilters: true,
-          }}
-          handleNavigate={handleNavigate}
-          limit={20}
-        />
-      )}
-      {view === "calendar" && (
-        <DataTemplateWrapper
-          key="dark-calendar"
-          title="Spray schedule"
-          description="Work orders by start date"
-          type={viewType}
-          id={selectedId ?? ""}
-          collectionId={WORK_ORDER_COLLECTION}
-          schema={MeraqueWorkOrderSchema}
-          workspace={workspace}
-          edit={{ allEditable: false }}
-          organise={{ ...darkOrganise }}
-          viewSettings={{
-            calendarSettings: {
-              title: "title",
-              startDate: "startDate",
-              groupId: "status",
-              defaultView: "dayGridMonth",
-            },
-          }}
-          bareSettings={{ bareNewDTW: true, bareCompactMode: true }}
-          handleNavigate={handleNavigate}
-          limit={50}
-        />
-      )}
-      {view === "form" && (
-        <DataTemplateWrapper
-          key="dark-form"
-          title="Work Order"
-          type={viewType}
-          id={selectedId}
-          collectionId={WORK_ORDER_COLLECTION}
-          schema={MeraqueWorkOrderSchema}
-          workspace={workspace}
-          edit={{
-            allEditable: true,
-            disabledUpdate: false,
-            deleteBtn: true,
-            enableUpdateDraft: true,
-          }}
-          organise={{ ...darkOrganise, breadcrumbType: "button" }}
-          bareSettings={{ bareNewDTW: true, bareCompactMode: true }}
-          handleNavigate={handleNavigate}
-          limit={10}
-        />
-      )}
-    </div>
-  );
-};