blixify-ui-web-mcp 0.1.3 → 0.1.18

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

@@ -3,45 +3,27 @@ import {
   CheckCircleIcon,
   InformationCircleIcon,
 } from "@heroicons/react/24/solid";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "../../action/button";
 import { IconButton } from "../../action/iconButton";
+import dayjs from "../../dayjs";
 import { Alert } from "../../display/alert";
 import { Loading } from "../../display/loading";
 import { Tag } from "../../display/tag";
 import { Tabs } from "../../navigation/tabs";
 import { StorySection } from "../../storyUtils";
-import { Container } from "../../structure/container";
-import { DataStructure } from "../dataTemplate/model";
 import {
   CalendarSettings,
   FeedsSettings,
   KanbanSettings,
 } from "../dataTemplate/spaceModel";
-import { ProjectSchema } from "../testSchema";
+import { VerdantOMChecklistSchema } from "../testSchema";
 import { DataTemplateWrapper } from "./index";
-import README from "./README.md";
-const stories = storiesOf("Data", module);
+import React from "react";
+const meta = { title: "Data/Data Wrapper" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-  argTypes: {
-    status: {
-      control: { type: "select" },
-      options: ["Pending Submission", "Pending Review", "Approved", "Rejected"],
-      description: "Filter by checklist status",
-    },
-  },
-  args: {
-    status: "Pending Submission",
-  },
-});
-
-stories.add("Data Wrapper", () => {
+export const DataWrapper = () => {
   const [mount, setMount] = useState<boolean>(false);
   const dataRefreshRef: any = useRef(null);
   const [statusFilter] = useState<string>("all");
@@ -88,8 +70,8 @@ stories.add("Data Wrapper", () => {
     }
     if (listLayout === "calendar") {
       viewSettings.calendarSettings = {
-        title: "researchTitle",
-        startDate: "createdAt",
+        title: "clientName",
+        startDate: "date",
       };
     }
     return viewSettings;
@@ -101,7 +83,7 @@ stories.add("Data Wrapper", () => {
         {data.map((eachItem: any, index: number) => {
           return (
             <div className="p-4 rounded-lg bg-gray-50 truncate text-sm text-gray-600">
-              {eachItem?.researchTitle || `Item ${index}`}
+              {eachItem?.clientName || `Item ${index}`}
             </div>
           );
         })}
@@ -132,19 +114,19 @@ stories.add("Data Wrapper", () => {
         <div className="mb-6" />
         <DataTemplateWrapper
           ref={dataRefreshRef}
-          title={"KPJ Projects"}
-          description="Manage all your projects here"
+          title={"Verdant O&M Checklist"}
+          description="Manage O&M maintenance checklists"
           type={viewType}
           id={selectedId}
-          collectionId={"kpj-projects"}
-          schema={ProjectSchema}
+          collectionId={"verdant-om-maintenance-checklist"}
+          schema={VerdantOMChecklistSchema}
           workspace={{
             apiEndpointType: "mongoDB",
-            apiEndpoint: `${dtwBaseUrl}/api/data`,
+            apiEndpoint: `${dtwBaseUrl}/api/mongoData`,
             apiEndpointToken: "",
             apiUserToken: "",
             assetEndpoint:
-              "https://firebasestorage.googleapis.com/v0/b/verdant-dev.firebasestorage.app/o/",
+              "https://firebasestorage.googleapis.com/v0/b/verdant-solar-dev.appspot.com/o/",
             assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
           }}
           edit={{
@@ -154,9 +136,8 @@ stories.add("Data Wrapper", () => {
             deleteBtn: true,
           }}
           bareSettings={{
-            bareOffline: false, //INFO: If set to true, form data will be saved into device's indexedDB and users have to submit manually once internet connection resumes
+            bareOffline: false,
             bareListComponent:
-              // INFO: Render custom component when type is list (table view, list view, grid view etc)
               listLayout === "customList"
                 ? (data) => renderCustomListComponent(data)
                 : undefined,
@@ -169,7 +150,7 @@ stories.add("Data Wrapper", () => {
                     size="small"
                   />
                 );
-              } // override default UI with custom component where columnId matches key when type is list (table, list, grid etc)
+              }
             },
             bareListActionBtns: (data) => [
               <IconButton
@@ -181,12 +162,9 @@ stories.add("Data Wrapper", () => {
                   e.stopPropagation();
                   console.log(data);
                 }}
-              />, // render additional custom button in each table row
-            ],
-            bareListFilterQuery: [
-              // INFO: Add query to filter data when type is list (table view, grid view, grid view etc)
-              // { type: "=", queryId: "status", value: "Approved" },
+              />,
             ],
+            bareListFilterQuery: [],
             bareListGridComponent: (data: any) => {
               if (data?.status === "Approved") {
                 return (
@@ -194,45 +172,43 @@ stories.add("Data Wrapper", () => {
                     Custom Component Below Main Content
                   </div>
                 );
-              } // add custom content below the grid item (will not overide the default UI)
+              }
             },
-            bareListGridColClassName: "grid-cols-2 md:grid-cols-4 gap-4", // override the default grid column, row and gap classnames
+            bareListGridColClassName: "grid-cols-2 md:grid-cols-4 gap-4",
             bareListGridTags: (data) => {
               const tags: string[] = [];
               if (data?.status) tags.push(data.status);
               if (data?.researchTitleAbbreviation)
                 tags.push(data.researchTitleAbbreviation);
-
-              return tags; // add small tags above grid item's title
+              return tags;
             },
             bareListGridFallbackImg: (data) => {
               if (data?.status === "Approved") {
                 return "https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3zD";
               } else
                 return "https://images.unsplash.com/photo-1584644769698-4762ca337c17?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
-            }, // fallback image in case value for image column is not present
+            },
             bareListGridRibbonText: (data) => {
               if (data?.status?.includes("Review")) {
                 return "Review";
               }
-              return ""; // add a ribbon on the top left corner of the grid item
+              return "";
             },
             bareListHandleData: (data) => {
-              console.log("Available data in current date: ", data); // returns all the data when type (view type) is list
+              console.log("Available data in current date: ", data);
             },
             bareReadComponent: () => (
               <Alert title="Custom Alert in Read View" />
-            ), // Custom additional component in read view
-            bareReadComponentPos: "top", // position custom addition read view component to the top
-            bareReadComponentHide: false, // only set to true if want to override default read view with bareReadComponent
+            ),
+            bareReadComponentPos: "top",
+            bareReadComponentHide: false,
             bareReadDescription: (key, value) => {
-              // INFO: override default UI with custom component where columnId matches key in read view
               if (key === "status" && value) {
                 return <Tag tagText={value} />;
               }
             },
             bareReadHandleData: (data) => {
-              console.log("Data from read view: ", data); // returns data when enter read view
+              console.log("Data from read view: ", data);
             },
             bareReferenceDel: [
               {
@@ -241,11 +217,9 @@ stories.add("Data Wrapper", () => {
                 columnId: "",
                 schema: [],
               },
-            ], // INFO: This is to prevent deletion of data if there is a reference input in schema and the reference column points to existing collection in database
-            bareUpdateMobileView: true, //INFO: This will render form input in compact mobile view
+            ],
+            bareUpdateMobileView: true,
             bareUpdateActionComponent:
-              // INFO: Add custom component on top right corner, normally used to add buttons
-              // NOTE: This will overide the default action buttons (except for Delete button). Add those buttons back manually
               viewType === "read"
                 ? (data) => {
                     return (
@@ -264,16 +238,14 @@ stories.add("Data Wrapper", () => {
                   }
                 : undefined,
             bareUpdatePrefill: () => {
-              // INFO: prefill column values. These columns will no longer be visible on the form. Good for values that cannot be edited by users
               return [
                 {
                   key: "updatedAt",
-                  value: moment().toDate(),
+                  value: dayjs().toDate(),
                 },
               ];
             },
             bareUpdateComponent: () => {
-              // INFO: add additional component to below form in update view
               return (
                 <Alert
                   title="Hi there!"
@@ -281,39 +253,22 @@ stories.add("Data Wrapper", () => {
                 />
               );
             },
-            bareUpdateComponentAbove: true, // INFO: render bareUpdateComponent above the form. Set to false to render it below form
+            bareUpdateComponentAbove: true,
             bareUpdateIndividualComponent: (
               _columnId: string,
               _ref: any,
               _selectedData: any,
               _setSelectedData: (data: any) => void,
             ) => {
-              // INFO: Override default input with custom input, value state will be pass back to the form
-              // Example:
-              // if (columnId === "column X") {
-              //   return (
-              //     <TextInput
-              //       ref={ref}
-              //       label=""
-              //       placeholder=""
-              //       type="text"
-              //       value={selectedData.columnId}
-              //       onChange={(e) => setSelectedData(e.target.value)}
-              //     />
-              //   );
-              // }
-              return <div></div>;
+              return null;
             },
             bareUpdateHandleData: (data) => {
-              // INFO: returns data when enter update view
               console.log("Update view data: ", data);
             },
             bareUpdateTabId: (tabId) => {
-              // INFO: Returns the current tab in update view
               console.log("Updating data from tab ", tabId);
             },
             bareUpdateTabComponent: (tabIds) => {
-              // INFO: Add icon to tab or skip tab in update view
               return tabIds.map((eachTabId, index: number) => {
                 const icon =
                   Math.floor(index / 2) % 2 === 0 ? (
@@ -321,7 +276,6 @@ stories.add("Data Wrapper", () => {
                   ) : (
                     <InformationCircleIcon className="w-5 h-5 text-yellow-500" />
                   );
-
                 return {
                   tabId: eachTabId,
                   icon,
@@ -329,46 +283,26 @@ stories.add("Data Wrapper", () => {
                 };
               });
             },
-            bareUpdateColumnType: "two", // control how many inputs to be dispalyed per row in update view (default is 2, small browser width default to 1)
+            bareUpdateColumnType: "two",
             bareUpdateHandlePreComplete: (data) => {
-              /**
-               * Example use cases:
-               * 1. Validate data before submission. Return true if validation pass, otherwise return false to prevent submission
-               * 2. Override column value in the data
-               */
-
-              // Example 1: Validate data
-              // if(validation passes){
-              //   return true
-              // }else return false
-
-              // Example 2: Overrite column value
-              // if(condtion X){
-              //   data.columnId = formatted value
-              // }
-
               return data;
             },
-            bareUpdateHandleComplete: async (data) => {
-              console.log("Form data to be submitted: ", data);
-              // INFO: Use this to override the default form submission (write request to databse)
-              // await handleCustomFormSubmit()
-            },
+            // bareUpdateHandleComplete: async (data) => {
+            //   console.log("Form data to be submitted: ", data);
+            // },
             bareUpdateHandlePostComplete: async (data) => {
               console.log("Form data after submission: ", data);
-              // INFO: Use this to perform other actions once form data is submitted (wrote to database)
-              // await handleCustomPostFormSubmit()
             },
           }}
           organise={{
-            sort: { sortId: "createdAt", type: "desc" as const }, // sort list view data
-            hideSearch: false, // set to false to enable default search input in list view
-            filterComponentNewRow: true, // avoid crowding for filter inputs in list view
-            breadcrumbType: "button", // shows a "Back" button in read view and update view
-            tabAlign: "left", // shows form input categories (based on groupId from models in schema) in update view
-            showExport: true, // enable export CSV, Import CSV, Print etc. Only when type is list (table view, grid view, list view etc)
+            sort: { sortId: "createdAt", type: "desc" as const },
+            hideSearch: false,
+            filterComponentNewRow: true,
+            breadcrumbType: "button",
+            tabAlign: "left",
+            showExport: true,
             exportSettings: {
-              enableExportReadPDF: true, // enable export read view page UI, blob will be generated
+              enableExportReadPDF: true,
               exportReadPDFDimensions: {
                 forceDesktopView: true,
                 captureWidth: 1440,
@@ -388,14 +322,13 @@ stories.add("Data Wrapper", () => {
                 },
               },
               onExportReadPDFBlob: async (blob) => {
-                const fileName = `Export-${moment().format(
+                const fileName = `Export-${dayjs().format(
                   "YYYY-MM-DD-HH-mm-ss",
                 )}.pdf`;
                 const file = new File([blob], fileName, {
                   type: "application/pdf",
                 });
                 console.log("Read View Export: ", file);
-                // Process blob to generate PDF
               },
             },
           }}
@@ -403,24 +336,13 @@ stories.add("Data Wrapper", () => {
           additionalQuery={[
             {
               type: "list",
-              value: "sustainableDevelopmentGoals",
-              options: [
-                "No poverty",
-                "Zero Hunger",
-                "Good Health and Well Being",
-              ],
-              filterLabel: "Development Goals",
-            },
-            {
-              type: "reference",
-              value: "grantId",
-              spaceId: "kpj-grants",
-              label: "title",
-              filterLabel: "Grant ID",
+              value: "typeOfInverter",
+              options: ["String Inverter", "Microinverter"],
+              filterLabel: "Inverter Type",
             },
             {
               type: "range",
-              value: "createdAt",
+              value: "date",
             },
           ]}
           limit={10}
@@ -429,403 +351,250 @@ stories.add("Data Wrapper", () => {
       </div>
     </StorySection>
   );
-});
+};
 
-stories.add("Data Wrapper Union", () => {
+// INFO: Story to test imageTagToggleMode + imageHideEnabled across 3 role views:
+// - Installer: no props, sees all photos
+// - Customer: imageHideEnabled=true, hidden photos filtered out in read view
+// - PE: imageTagToggleMode=true, eye icon to toggle hidden flag, read shows all
+export const ImageToggleRoleTest = () => {
   const [mount, setMount] = useState<boolean>(false);
   const dataRefreshRef: any = useRef(null);
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-  const [startDate, setStartDate] = useState<string>("");
-  const [endDate, setEndDate] = useState<string>("");
-  const [installerFilter, setInstallerFilter] = useState<string>("Wai Seng");
   const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
   const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const [role, setRole] = useState<"installer" | "customer" | "pe">(
+    "installer",
+  );
+  const dtwBaseUrl = "http://localhost:3000";
 
   useEffect(() => {
     setMount(true);
   }, []);
 
   useEffect(() => {
-    if (mount && dataRefreshRef.current) {
-      dataRefreshRef.current.handleRefresh();
-    }
-  }, [installerFilter, statusFilter, startDate, endDate, mount]);
+    if (mount && dataRefreshRef.current) dataRefreshRef.current.handleRefresh();
+  }, [mount]);
 
-  const handleNavigate = (type: any, id: any, viewId: any) => {
+  const handleNavigate = (type: any, id: any) => {
     setViewType(type);
     setSelectedId(id);
   };
 
-  const handleBackToList = () => {
-    setViewType("list");
-    setSelectedId(undefined);
-  };
+  if (!mount) return <Loading />;
 
-  const getUnionCollectionsConfig = () => {
-    const basePersonQuery: any[] = [];
+  // INFO: schema varies per role — only the sitePhotos field differs
+  const buildSchema = () => {
+    const base = [
+      {
+        id: "clientName",
+        name: "Client Name",
+        type: "string" as const,
+        groupId: "Basic Info",
+        tabId: "A. Basic Info",
+      },
+      {
+        id: "date",
+        name: "Service Date",
+        type: "date" as const,
+        groupId: "Basic Info",
+        tabId: "A. Basic Info",
+      },
+    ];
 
-    if (installerFilter.length > 0) {
-      basePersonQuery.push({
-        type: "search",
-        searchIds: ["installer", "inspector"],
-        value: installerFilter,
-      });
-    }
+    const photoField: any = {
+      id: "sitePhotos",
+      name: "Site Photos",
+      type: "multipleImage",
+      imageCollectionName: "verdant-om-maintenance-checklist",
+      imageTagOptions: ["Before", "After", "Panel", "Inverter", "DB", "Defect"],
+      imageTagNewOption: true,
+      optional: true,
+      groupId: "Site Photos",
+      tabId: "B. Photos",
+    };
 
-    if (statusFilter !== "all") {
-      basePersonQuery.push({
-        queryId: "status",
-        type: "=",
-        value: statusFilter,
-      });
+    if (role === "pe") {
+      // INFO: PE can toggle hide/show per image; read view shows all (no imageHideEnabled)
+      photoField.imageTagEdit = true;
+      photoField.imageTagToggleMode = true;
+    } else if (role === "customer") {
+      // INFO: Customer read view respects hidden flag — hidden images filtered out
+      photoField.imageHideEnabled = true;
     }
+    // INFO: installer — no extra props, all images always visible
 
-    const getDateQuery = (dateField: string) => {
-      if (startDate || endDate) {
-        return {
-          queryId: dateField,
-          value:
-            startDate && endDate
-              ? [
-                  new Date(startDate).toISOString(),
-                  new Date(endDate).toISOString(),
-                ]
-              : new Date(startDate).toISOString(),
-          type: startDate && endDate ? "><" : ">",
-        };
-      }
-      return null;
-    };
-
-    return {
-      unionCollections: [
-        {
-          collection: "verdant-deliveries",
-          source: "dynamic",
-          sourceLogic: {
-            $cond: {
-              if: { $eq: ["$type", "om"] },
-              then: "O&M Maintenance",
-              else: "PV Delivery",
-            },
-          },
-          query: [
-            {
-              queryId: "type",
-              type: "in",
-              value: ["om", "pv"],
-            },
-            ...(getDateQuery("proposed_date")
-              ? [
-                  {
-                    queryId: "proposed_date",
-                    type: getDateQuery("proposed_date")!.type,
-                    value: getDateQuery("proposed_date")!.value,
-                    orQuery: true,
-                    orQueryGroupId: "deliveryDate",
-                  },
-                ]
-              : []),
-            ...(getDateQuery("tent_installation_date")
-              ? [
-                  {
-                    queryId: "tent_installation_date",
-                    type: getDateQuery("tent_installation_date")!.type,
-                    value: getDateQuery("tent_installation_date")!.value,
-                    orQuery: true,
-                    orQueryGroupId: "deliveryDate",
-                  },
-                ]
-              : []),
-            ...basePersonQuery,
-          ].filter(Boolean),
-          projection: {
-            _id: 1,
-            mondayItemId: 1,
-            clientName: 1,
-            date: 1,
-            createdAt: 1,
-            type: 1,
-            status: 1,
-            installer: 1,
-            name: 1,
-            phone: 1,
-            location: 1,
-            proposed_date: 1,
-            tent_installation_date: 1,
-            tent_service_date: 1,
-            checklist_status: 1,
-          },
-          addFields: {
-            sortDate: {
-              $ifNull: [
-                {
-                  $cond: {
-                    if: { $eq: ["$type", "om"] },
-                    then: "$proposed_date",
-                    else: "$tent_installation_date",
-                  },
-                },
-                "$createdAt",
-              ],
-            },
-          },
-        },
-        {
-          collection: "verdant-service-tickets",
-          source: "dynamic",
-          sourceLogic: {
-            $cond: {
-              if: { $eq: ["$category", "Installation Defect"] },
-              then: "Installation Defect",
-              else: "Critical Load",
-            },
-          },
-          query: [
-            {
-              queryId: "category",
-              type: "in",
-              value: ["Installation Defect", "Critical Load"],
-            },
-            ...(getDateQuery("tent_service_date")
-              ? [
-                  {
-                    queryId: "tent_service_date",
-                    type: getDateQuery("tent_service_date")!.type,
-                    value: getDateQuery("tent_service_date")!.value,
-                  },
-                ]
-              : []),
-            ...basePersonQuery,
-          ].filter(Boolean),
-          projection: {
-            _id: 1,
-            mondayItemId: 1,
-            clientName: 1,
-            date: 1,
-            createdAt: 1,
-            category: 1,
-            status: 1,
-            installer: 1,
-            name: 1,
-            phone: 1,
-            location: 1,
-            tent_service_date: 1,
-            checklist_status: 1,
-          },
-          addFields: {
-            sortDate: {
-              $ifNull: ["$tent_service_date", "$createdAt"],
-            },
-          },
-        },
-      ],
-      sort: { sortId: "sortDate", type: "desc" as const },
-    };
+    return [...base, photoField];
   };
 
-  if (!mount) {
-    return <Loading />;
-  }
-
   return (
-    <Container bgColor="bg-white">
-      <div className="mb-4 flex flex-wrap items-end gap-4">
-        {viewType !== "list" && (
-          <button
-            onClick={handleBackToList}
-            className="px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded-md"
-          >
-            ← Back to List
-          </button>
-        )}
-        {viewType === "list" && (
-          <>
-            <div className="flex flex-col">
-              <label className="text-sm text-gray-700 mb-1">
-                Filter by Installer
-              </label>
-              <select
-                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
-                value={installerFilter}
-                onChange={(e) => setInstallerFilter(e.target.value)}
-              >
-                <option value="Wai Seng">Wai Seng</option>
-                <option value="John Doe">John Doe</option>
-                <option value="Jane Smith">Jane Smith</option>
-              </select>
-            </div>
-            <div className="flex flex-col">
-              <label className="text-sm text-gray-700 mb-1">
-                Filter by Status
-              </label>
-              <select
-                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value)}
-              >
-                <option value="all">All</option>
-                <option value="Pending to set">Pending to set</option>
-                <option value="Confirmed">Confirmed</option>
-              </select>
-            </div>
-            <div className="flex flex-col">
-              <label className="text-sm text-gray-700 mb-1">Start Date</label>
-              <input
-                type="date"
-                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-              />
-            </div>
-            <div className="flex flex-col">
-              <label className="text-sm text-gray-700 mb-1">End Date</label>
-              <input
-                type="date"
-                className="border border-gray-300 rounded-md px-2 py-1 text-sm"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-              />
-            </div>
-          </>
-        )}
-        {viewType !== "list" && (
-          <div className="flex flex-col">
-            <label className="text-sm text-gray-700 mb-1">Current View:</label>
-            <div className="text-xs text-gray-600">
-              {viewType} - ID: {selectedId}
-            </div>
-          </div>
-        )}
+    <StorySection
+      title="Image Toggle Role Test (imageTagToggleMode + imageHideEnabled)"
+      description="Switch roles to test: Installer sees all photos. PE gets eye icon to hide/show per image (persisted to data). Customer read view filters out hidden images."
+    >
+      <div className="flex gap-3 mb-4">
+        {(["installer", "customer", "pe"] as const).map((r) => (
+          <Button
+            key={r}
+            text={r.toUpperCase()}
+            type={role === r ? "dark" : "light"}
+            onClick={() => {
+              setRole(r);
+              setViewType("list");
+              setSelectedId(undefined);
+            }}
+          />
+        ))}
+        <span className="text-sm text-gray-500 self-center ml-2">
+          Current role: <strong>{role}</strong>
+          {role === "pe" && " — eye icon on each photo to hide/show"}
+          {role === "customer" && " — hidden photos filtered out in read view"}
+          {role === "installer" && " — all photos always visible"}
+        </span>
       </div>
       <DataTemplateWrapper
         ref={dataRefreshRef}
-        title={"Union Collections Demo"}
-        description="Dynamic unionCollections combining deliveries & service tickets with installer filtering"
+        title={"O&M Checklist — Image Toggle Test"}
+        description="Test imageTagToggleMode and imageHideEnabled across roles"
         type={viewType}
         id={selectedId}
-        collectionId="verdant-deliveries"
-        schema={
-          [
-            {
-              id: "source",
-              name: "Source",
-              type: "string",
-              hideForm: true,
-            },
-            {
-              id: "type",
-              name: "Type",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "name",
-              name: "Client Name",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "status",
-              name: "Status",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "category",
-              name: "Category",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "proposed_date",
-              name: "Proposed Date",
-              type: "date",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "tent_service_date",
-              name: "Service Date",
-              type: "date",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "date",
-              name: "Date",
-              type: "date",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "location",
-              name: "Location",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "installer",
-              name: "Installer",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "checklist_status",
-              name: "Checklist Status",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "phone",
-              name: "Phone",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "mondayItemId",
-              name: "Monday Item ID",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-            {
-              id: "clientName",
-              name: "Client",
-              type: "string",
-              optional: true,
-              hideForm: true,
-            },
-          ] as DataStructure[]
-        }
+        collectionId={"verdant-om-maintenance-checklist"}
+        schema={buildSchema()}
         workspace={{
           apiEndpointType: "mongoDB",
-          apiEndpoint: "http://localhost:3000/api/mongoData",
+          apiEndpoint: `${dtwBaseUrl}/api/data`,
           apiEndpointToken: "",
-          assetUploadEndpoint: "http://localhost:3000/api/asset",
           apiUserToken: "",
+          assetEndpoint:
+            "https://firebasestorage.googleapis.com/v0/b/verdant-dev.firebasestorage.app/o/",
+          assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
+        }}
+        edit={{
+          allEditable: true,
+          disabledUpdate: false,
+          disableBatchUpdate: false,
+          deleteBtn: true,
         }}
         bareSettings={{
-          bareUpdateMobileView: true,
+          bareUpdateActionComponent:
+            viewType === "read"
+              ? (data) => (
+                  <Button
+                    type="normal"
+                    text="Update"
+                    onClick={() => {
+                      setSelectedId(data._id);
+                      setViewType("update");
+                    }}
+                  />
+                )
+              : undefined,
         }}
-        organise={getUnionCollectionsConfig()}
-        handleNavigate={handleNavigate}
-        lib={{
-          storage: null,
-          ref: null,
-          getDownloadURL: null,
-          uploadBytes: null,
+        organise={{
+          sort: { sortId: "createdAt", type: "desc" as const },
+          breadcrumbType: "button",
+          tabAlign: "left",
         }}
-        limit={50}
+        handleNavigate={handleNavigate}
+        limit={10}
       />
-    </Container>
+    </StorySection>
+  );
+};
+
+// INFO: Minimal story used exclusively by e2e/dtw-crud.spec.ts. Uses a 3-field
+// optional schema so DTW's required-field validation never blocks form submission.
+// Excludes bareUpdateHandleComplete (which overrides API calls),
+// showExport/enableExportReadPDF (which opens a HeadlessUI portal in read view),
+// bareUpdateMobileView (which hides inputs), and bareReferenceDel (which triggers
+// reference-check calls that can open a "references found" modal).
+const DataWrapperTestSchema = [
+  {
+    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 },
+];
+
+export const DataWrapperTest = () => {
+  const [mount, setMount] = useState<boolean>(false);
+  const dataRefreshRef: any = useRef(null);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const dtwBaseUrl = "http://localhost:3000";
+
+  useEffect(() => {
+    setMount(true);
+  }, []);
+
+  useEffect(() => {
+    if (mount && dataRefreshRef.current) {
+      dataRefreshRef.current.handleRefresh();
+    }
+  }, [mount]);
+
+  const handleNavigate = (type: any, id: any) => {
+    setViewType(type);
+    setSelectedId(id);
+  };
+
+  if (!mount) {
+    return <Loading />;
+  }
+
+  return (
+    <DataTemplateWrapper
+      ref={dataRefreshRef}
+      title={"Verdant O&M Checklist Test"}
+      description="Minimal test story"
+      type={viewType}
+      id={selectedId}
+      collectionId={"verdant-om-maintenance-checklist"}
+      schema={DataWrapperTestSchema}
+      workspace={{
+        apiEndpointType: "mongoDB",
+        apiEndpoint: `${dtwBaseUrl}/api/data`,
+        apiEndpointToken: "",
+        apiUserToken: "",
+        assetEndpoint:
+          "https://firebasestorage.googleapis.com/v0/b/verdant-dev.firebasestorage.app/o/",
+        assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
+      }}
+      edit={{
+        allEditable: true,
+        disabledUpdate: false,
+        disableBatchUpdate: false,
+        deleteBtn: true,
+      }}
+      bareSettings={{
+        bareOffline: false,
+        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}
+    />
   );
-});
+};