blixify-ui-web-mcp 0.1.19 → 0.1.21

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

@@ -74,7 +74,7 @@ export const DataWrapperTest = () => {
           apiEndpointToken: "",
           apiUserToken: "",
           assetEndpoint:
-            "https://firebasestorage.googleapis.com/v0/b/verdant-dev.firebasestorage.app/o/",
+            "https://firebasestorage.googleapis.com/v0/b/demo-bucket.firebasestorage.app/o/",
           assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
         }}
         edit={{
@@ -160,6 +160,11 @@ const InlineEditMatrixSchema = [
     optional: true,
   },
   { id: "due", name: "Due", type: "date" as const, optional: true },
+  // INFO: a composite editor — country picker beside a number field
+  { id: "phone", name: "Phone", type: "contact" as const, optional: true },
+  // INFO: a string column some rows fill with an object, which is what a
+  // schema change or an upstream sync leaves behind
+  { id: "place", name: "Place", type: "string" as const, optional: true },
   {
     id: "owner",
     name: "Owner",
@@ -245,6 +250,11 @@ const handleBuildMatrixRecords = () => {
       status: ["Draft", "Active", "Done"][index % 3],
       tags: index % 2 === 0 ? ["North"] : [],
       due: dayjs().add(index, "day").toISOString(),
+      phone: `+6012${String(index).padStart(7, "0")}`,
+      place:
+        index % 2 === 0
+          ? { name: `${index} Jalan Object`, lat: 3.1, lng: 101.6 }
+          : `${index} Jalan Plain`,
       owner: index % 2 === 0 ? "owner-01" : "owner-02",
       helpers: [],
       photo: "",
@@ -333,10 +343,10 @@ const handleInstallMatrixMock = (
     .reply((config) => {
       const body = handleParseBody(config);
       const id = `matrix-${String(store.length + 1).padStart(2, "0")}`;
-      // INFO: baseDraft on purpose. listModule wraps a draft row's first field
-      // in a <Tag>, so the row's cell holds a React element — which is exactly
-      // the shape that turned into the literal text "div" when the list update
-      // path deep cloned through JSON.
+      // INFO: baseDraft on purpose — it is what the create path stamps on a new
+      // inline row. The React-element-in-a-cell shape that once turned into the
+      // literal text "div" through the list update path's JSON clone now comes
+      // from the coloured status column, which renders its value as a Tag.
       store.unshift({ _id: id, baseDraft: true, ...(body.data ?? {}) });
       return [200, { success: id }];
     });
@@ -605,3 +615,344 @@ export const DTWEmbeddedInMarkdown = () => {
     </div>
   );
 };
+
+// ===================================================================================
+
+// INFO: the only story that exercises a listObject through NewTable. Every other
+// listObject fixture in this repo sets listFlexTable, which takes the FlexTable
+// branch instead — so without this one the NewTable path has no visual coverage.
+// listObjectTableView is what selects the table; leave it off and the field
+// renders as a List.
+
+const LIST_OBJECT_ENDPOINT = "http://localhost:3000/api/data";
+const LIST_OBJECT_COLLECTION = "dtw-list-object-table";
+
+// INFO: tabIds on purpose — the action pill only renders its Previous/Next
+// navigation when the form is tabbed, so a flat schema cannot exercise them
+const ListObjectTableSchema: any = [
+  { id: "siteName", name: "Site Name", type: "string", tabId: "A. Site" },
+  {
+    id: "tasks",
+    name: "Tasks",
+    type: "listObject",
+    // INFO: this flag, not listFlexTable, is what routes the field to NewTable
+    listObjectTableView: true,
+    tabId: "B. Tasks",
+    optional: true,
+    objectData: [
+      { id: "title", name: "Task", type: "string" },
+      { id: "owner", name: "Owner", type: "string" },
+      { id: "hours", name: "Hours", type: "number", optional: true },
+    ],
+  },
+  {
+    id: "emptyTasks",
+    name: "Tasks With No Rows",
+    type: "listObject",
+    listObjectTableView: true,
+    tabId: "B. Tasks",
+    optional: true,
+    objectData: [
+      { id: "title", name: "Task", type: "string" },
+      { id: "owner", name: "Owner", type: "string" },
+    ],
+  },
+];
+
+const handleBuildListObjectRecord = () => ({
+  _id: "site-01",
+  siteName: "Bangi Rooftop",
+  tasks: [
+    { id: "t1", title: "Wire the pump", owner: "Ali", hours: 4 },
+    { id: "t2", title: "Seal the tank", owner: "Siti", hours: 2 },
+    { id: "t3", title: "Commission inverter", owner: "Raj", hours: 6 },
+  ],
+  emptyTasks: [],
+  createdAt: dayjs().toISOString(),
+});
+
+export const DTWListObjectTable = () => {
+  const [mount, setMount] = useState<boolean>(false);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">(
+    "update",
+  );
+  const [selectedId, setSelectedId] = useState<string | undefined>("site-01");
+  const storeRef = useRef<any[]>([handleBuildListObjectRecord()]);
+
+  useEffect(() => {
+    const store = storeRef.current;
+    const mock = new MockAdapter(axios, {
+      onNoMatch: "passthrough",
+      delayResponse: 80,
+    });
+    const handleParseBody = (config: any) => {
+      try {
+        return JSON.parse(config?.data ?? "{}");
+      } catch (err) {
+        return {};
+      }
+    };
+
+    mock
+      .onPost(`${LIST_OBJECT_ENDPOINT}/${LIST_OBJECT_COLLECTION}/list`)
+      .reply(() => [200, { data: store, count: store.length }]);
+
+    mock
+      .onPost(`${LIST_OBJECT_ENDPOINT}/${LIST_OBJECT_COLLECTION}/get`)
+      .reply((config) => {
+        const body = handleParseBody(config);
+        return [200, { data: store.find((row) => row._id === body.id) ?? null }];
+      });
+
+    mock
+      .onPost(`${LIST_OBJECT_ENDPOINT}/${LIST_OBJECT_COLLECTION}/update`)
+      .reply((config) => {
+        const body = handleParseBody(config);
+        const index = store.findIndex((row) => row._id === body.id);
+        if (index >= 0) store[index] = { ...store[index], ...(body.data ?? {}) };
+        return [200, { success: body.id ?? true }];
+      });
+
+    setMount(true);
+    return () => mock.restore();
+  }, []);
+
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW List Object Table
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        A listObject rendered through NewTable — the branch every other fixture
+        misses because they set listFlexTable. Click a row in Tasks and the edit
+        modal should open. Tasks With No Rows should read &quot;No Data
+        Available&quot;. The form is tabbed so the bottom bar shows the full
+        pill — Previous / counter / Next as icon buttons at every width, plus
+        Delete and Submit on a solid grey surface.
+      </div>
+      <DataTemplateWrapper
+        title="Site"
+        type={viewType}
+        id={selectedId}
+        collectionId={LIST_OBJECT_COLLECTION}
+        schema={ListObjectTableSchema}
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: LIST_OBJECT_ENDPOINT,
+          apiEndpointToken: "",
+          apiUserToken: "",
+        }}
+        edit={{ allEditable: true, disabledUpdate: false, deleteBtn: true }}
+        organise={{ breadcrumbType: "button", tabAlign: true }}
+        handleNavigate={(type: any, id: any) => {
+          setViewType(type);
+          setSelectedId(id);
+        }}
+        limit={10}
+      />
+    </div>
+  );
+};
+DTWListObjectTable.storyName = "DTW List Object Table";
+
+// ---------------------------------------------------------------------------
+// DTW Callback Counts — used by e2e/dtw-callbacks.spec.ts
+// ---------------------------------------------------------------------------
+
+const CALLBACK_ENDPOINT = "https://callback-counts.blixify.invalid/api/data";
+const CALLBACK_COLLECTION = "callback-records";
+
+const CallbackCountsSchema = [
+  { id: "name", name: "Name", type: "string" as const },
+  { id: "notes", name: "Notes", type: "string" as const, optional: true },
+];
+
+type CallbackCounterKey =
+  | "list"
+  | "get"
+  | "create"
+  | "update"
+  | "delete"
+  | "preComplete"
+  | "postComplete"
+  | "navigate";
+
+const CALLBACK_COUNTER_KEYS: CallbackCounterKey[] = [
+  "list",
+  "get",
+  "create",
+  "update",
+  "delete",
+  "preComplete",
+  "postComplete",
+  "navigate",
+];
+
+const handleInstallCallbackMock = (
+  store: any[],
+  onCount: (key: CallbackCounterKey) => void,
+) => {
+  const mock = new MockAdapter(axios, {
+    onNoMatch: "passthrough",
+    delayResponse: 100,
+  });
+  const handleParseBody = (config: any) => {
+    try {
+      return JSON.parse(config?.data ?? "{}");
+    } catch (err) {
+      return {};
+    }
+  };
+  const renderUrl = (type: string) =>
+    `${CALLBACK_ENDPOINT}/${CALLBACK_COLLECTION}/${type}`;
+  mock.onPost(renderUrl("list")).reply(() => {
+    onCount("list");
+    return [
+      200,
+      { data: store.map((row) => ({ ...row })), count: store.length },
+    ];
+  });
+  mock
+    .onPost(renderUrl("count"))
+    .reply(() => [200, { data: store.length, count: store.length }]);
+  mock.onPost(renderUrl("get")).reply((config) => {
+    onCount("get");
+    const body = handleParseBody(config);
+    const row = store.find((eachRow) => eachRow._id === body.id);
+    return [200, { data: row ? { ...row } : null }];
+  });
+  mock.onPost(renderUrl("create")).reply((config) => {
+    onCount("create");
+    store.push({ ...(handleParseBody(config).data ?? {}) });
+    return [200, { success: true }];
+  });
+  mock.onPost(renderUrl("update")).reply((config) => {
+    onCount("update");
+    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 }];
+  });
+  mock.onPost(renderUrl("delete")).reply((config) => {
+    onCount("delete");
+    const body = handleParseBody(config);
+    const index = store.findIndex((eachRow) => eachRow._id === body.id);
+    if (index >= 0) store.splice(index, 1);
+    return [200, { success: true }];
+  });
+  return mock;
+};
+
+/**
+ * INFO: a full CRUD page that counts every request and every save callback on
+ * screen, so e2e can assert that one user action fires each of them exactly
+ * once. A doubled callback reaches consumers as a doubled email or upload,
+ * while the page itself looks fine — the counters are the only visible signal.
+ */
+export const DTWCallbackCounts = () => {
+  // 1. State
+  const [mount, setMount] = useState<boolean>(false);
+  const [, setTick] = useState<number>(0);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string>("");
+  const [lastNavigate, setLastNavigate] = useState<string>("");
+
+  // 2. Refs
+  const storeRef = useRef<any[]>([
+    { _id: "r1", name: "Record One", notes: "first" },
+    { _id: "r2", name: "Record Two", notes: "second" },
+  ]);
+  const countersRef = useRef<Record<CallbackCounterKey, number>>({
+    list: 0,
+    get: 0,
+    create: 0,
+    update: 0,
+    delete: 0,
+    preComplete: 0,
+    postComplete: 0,
+    navigate: 0,
+  });
+  const mockRef = useRef<any>(null);
+
+  // 4. Effects
+  useEffect(() => {
+    mockRef.current = handleInstallCallbackMock(storeRef.current, handleCount);
+    setMount(true);
+    return () => {
+      mockRef.current?.restore();
+      mockRef.current = null;
+    };
+  }, []);
+
+  // 5. Handlers
+  function handleCount(key: CallbackCounterKey) {
+    countersRef.current[key] += 1;
+    setTick((previous) => previous + 1);
+  }
+
+  const handleNavigate = (type: any, id: any) => {
+    handleCount("navigate");
+    setLastNavigate(`${type}:${id ?? ""}`);
+    setViewType(type);
+    if (id !== undefined) setSelectedId(id);
+  };
+
+  // 7. Return
+  if (!mount) return <Loading />;
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">
+        DTW Callback Counts
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Every request and save callback is counted below. One create, update or
+        delete should move each of its counters by exactly one.
+      </div>
+      <div className="flex flex-wrap gap-4 mb-4 text-xs text-gray-600 font-mono">
+        {CALLBACK_COUNTER_KEYS.map((eachKey) => (
+          <span key={eachKey}>
+            {eachKey}:{" "}
+            <span data-testid={`callback-count-${eachKey}`}>
+              {countersRef.current[eachKey]}
+            </span>
+          </span>
+        ))}
+        <span>
+          last navigate:{" "}
+          <span data-testid="callback-last-navigate">{lastNavigate}</span>
+        </span>
+      </div>
+      <DataTemplateWrapper
+        title="Records"
+        type={viewType}
+        id={selectedId}
+        collectionId={CALLBACK_COLLECTION}
+        schema={CallbackCountsSchema}
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: CALLBACK_ENDPOINT,
+          apiEndpointToken: "",
+          apiUserToken: "",
+          assetEndpoint: "",
+          assetUploadEndpoint: "",
+        }}
+        edit={{ allEditable: true, disabledUpdate: false, deleteBtn: true }}
+        organise={{ breadcrumbType: "button" }}
+        bareSettings={{
+          bareNewDTW: true,
+          bareUpdateHandlePreComplete: async () => {
+            handleCount("preComplete");
+            return true;
+          },
+          bareUpdateHandlePostComplete: async () => {
+            handleCount("postComplete");
+          },
+        }}
+        handleNavigate={handleNavigate}
+      />
+    </div>
+  );
+};
+DTWCallbackCounts.storyName = "DTW Callback Counts";

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

@@ -3,6 +3,9 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import MockAdapter from "axios-mock-adapter";
+import Papa from "papaparse";
+import { Menu, Transition } from "@headlessui/react";
+import { DataTemplate } from "../dataTemplate";
 import axios from "axios";
 import dayjs from "../../dayjs";
 import { Button } from "../../action/button";
@@ -17,11 +20,11 @@ import {
   FeedsSettings,
   KanbanSettings,
 } from "../dataTemplate/spaceModel";
-import { DTWChecklistSchema } from "../testSchema";
 import {
   DataWrapperTestSchema,
   SCROLL_TEST_API,
   SCROLL_TEST_COLLECTION,
+  ServiceChecklistSchema,
 } from "./dataWrapper.fixtures";
 import { DataTemplateWrapper } from "./index";
 import { StarIcon } from "@heroicons/react/24/outline";
@@ -154,14 +157,14 @@ export const DataWrapper = () => {
           type={viewType}
           id={selectedId}
           collectionId={"dtw-test-collection"}
-          schema={DTWChecklistSchema}
+          schema={ServiceChecklistSchema}
           workspace={{
             apiEndpointType: "mongoDB",
             apiEndpoint: `${dtwBaseUrl}/api/mongoData`,
             apiEndpointToken: "",
             apiUserToken: "",
             assetEndpoint:
-              "https://firebasestorage.googleapis.com/v0/b/verdant-solar-dev.appspot.com/o/",
+              "https://firebasestorage.googleapis.com/v0/b/demo-bucket.appspot.com/o/",
             assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
           }}
           edit={{
@@ -390,7 +393,7 @@ export const DataWrapper = () => {
   );
 };
 
-// INFO: Live-data demo for a multi-tab, multi-group schema (KPJ-style).
+// INFO: Live-data demo for a multi-tab, multi-group schema (long grant-application style).
 // Schema uses tabId to split fields into top-level tabs and groupId to split
 // fields within a tab into named sections. organise.groupRead = "groupId"
 // also renders the read view as grouped sections instead of a flat list.
@@ -976,7 +979,7 @@ export const DataWrapperDrawerTest = () => {
           apiEndpointToken: "",
           apiUserToken: "",
           assetEndpoint:
-            "https://firebasestorage.googleapis.com/v0/b/verdant-dev.firebasestorage.app/o/",
+            "https://firebasestorage.googleapis.com/v0/b/demo-bucket.firebasestorage.app/o/",
           assetUploadEndpoint: `${dtwBaseUrl}/api/asset`,
         }}
         edit={{
@@ -1271,3 +1274,74 @@ export const DTWScrollTest = () => {
   );
 };
 DTWScrollTest.storyName = "DTW Scroll Test";
+
+/**
+ * INFO: the same drawer, hosted by DataTemplate itself rather than by the
+ * wrapper. An app that renders DataTemplate directly — because it owns its own
+ * tabs, roles and devSettings, which the wrapper derives and would replace —
+ * can now opt in with one prop instead of changing component.
+ *
+ * The mechanism is self-recursion: with readDrawer set and type "read", the
+ * outer instance keeps rendering its LIST and nests a second DataTemplate with
+ * the flag stripped inside the panel. One level, then it terminates.
+ */
+export const DTReadDrawer = () => {
+  const [mount, setMount] = useState<boolean>(false);
+  const [viewType, setViewType] = useState<"list" | "read" | "update">("list");
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
+  const storeRef = useRef<any[]>(handleBuildDrawerDemoRecords());
+  const mockRef = useRef<any>(null);
+
+  useEffect(() => {
+    mockRef.current = handleInstallDrawerDemoMock(storeRef.current);
+    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">
+        DataTemplate Read Drawer
+      </div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        `viewSettings.readDrawer` on DataTemplate directly. Click a row: the
+        record opens in a panel and the table stays mounted behind it, keeping
+        its page index and filters. Nothing else about the props changes — no
+        schema/model rename, no workspace mapping, and the caller keeps its own
+        tabs.
+      </div>
+      <DataTemplate
+        title="Drawer Demo"
+        description=""
+        type={viewType}
+        id={selectedId}
+        collectionId={DRAWER_DEMO_COLLECTION}
+        model={DrawerDemoSchema as any}
+        localURLEndpoint=""
+        viewSettings={{ readDrawer: {} }}
+        devSettings={{
+          server: "mongoDB",
+          dbEndpoint: DRAWER_DEMO_ENDPOINT,
+          dbAPIToken: "",
+          dbUserToken: "",
+          schemaEndpoint: "",
+          imageEndpoint: "",
+        }}
+        lib={{ axios, Menu, Transition, papaParser: Papa }}
+        edit={{ allEditable: true, deleteBtn: false }}
+        bareSettings={{ bareNewDTW: true, bareCompactMode: true }}
+        organise={{ handleNavigate }}
+      />
+    </div>
+  );
+};

package/lib/components/display/calendar/calendar.stories.tsx

@@ -18,7 +18,7 @@ const sampleEvents = () => [
   },
   {
     id: "2",
-    title: "Verdant Summarize Updates",
+    title: "Weekly Summary Updates",
     start: dayjs("2024/05/08 13:10", "YYYY/MM/DD HH:mm").toDate(),
     status: "Pending",
   },

package/lib/components/display/detailList/README.md

@@ -42,16 +42,17 @@ import { DetailList } from "blixify-ui-web/components/display/detailList";
 
 ##### Optional props
 
-| Name                  | Type                                             | Description                                              |
-| --------------------- | ------------------------------------------------ | -------------------------------------------------------- |
-| `addTitleElement`     | `ReactElement`                                   | Additional react elemnt to be displayed next to title    |
-| `description`         | `string`                                         |                                                          |
-| `className`           | `tailwind class`                                 |                                                          |
-| `model`               | `Model Data Structure`                           | Only used in Data Template                               |
-| `hideModal`           | `boolean`                                        | Only used in Data Template                               |
-| `referenceModel`      | `Model Data Structure`                           | Only used in Data Template                               |
-| `splitView`           | `boolean`                                        | Able to split into two                                   |
-| `handleReferenceLink` | `(dataId: string, collectionId: string) => void` | Only used in Data Template, when reference being clicked |
+| Name                  | Type                                             | Description                                                                     |
+| --------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------- |
+| `addTitleElement`     | `ReactElement`                                   | Additional react elemnt to be displayed next to title                           |
+| `headerRightElement`  | `ReactElement`                                   | Element anchored to the top-right of the header, opposite the title/description |
+| `description`         | `string`                                         |                                                                                 |
+| `className`           | `tailwind class`                                 |                                                                                 |
+| `model`               | `Model Data Structure`                           | Only used in Data Template                                                      |
+| `hideModal`           | `boolean`                                        | Only used in Data Template                                                      |
+| `referenceModel`      | `Model Data Structure`                           | Only used in Data Template                                                      |
+| `splitView`           | `boolean`                                        | Able to split into two                                                          |
+| `handleReferenceLink` | `(dataId: string, collectionId: string) => void` | Only used in Data Template, when reference being clicked                        |
 
 ##### Detail List class
 

package/lib/components/display/detailList/detailList.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { DetailList as DetailListImpl } from ".";
 import { Tag } from "../tag";
 import { StorySection } from "../../storyUtils";
+import { Button } from "../../action/button";
 
 const meta = { title: "Display/Detail List" };
 export default meta;
@@ -49,7 +50,7 @@ For more details visit [the official docs](https://example.com).
 
 ## Media
 
-<img src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp" alt="Oil drum" width="160" style="border-radius:8px">
+<img src="https://placehold.co/160x120/e2e8f0/475569.png?text=Oil+drum" alt="Oil drum" width="160" style="border-radius:8px">
 
 <video controls width="320">
   <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
@@ -93,6 +94,18 @@ export const DetailList = () => (
         maxHeight="180px"
       />
     </StorySection>
+    <StorySection
+      title="Header Right Element"
+      description="With custom element on the top right of header"
+    >
+      <DetailListImpl
+        title="Order #4812"
+        description="With custom element on the top right of header"
+        list={sampleList}
+        size="compact"
+        headerRightElement={<Button size="small" type="normal" text="Action" />}
+      />
+    </StorySection>
 
     <StorySection
       title="splitView (legacy) — Two-Column Grid"
@@ -145,7 +158,7 @@ export const DetailList = () => (
             title: "Image",
             text: (
               <img
-                src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+                src="https://placehold.co/160x120/e2e8f0/475569.png?text=Oil+drum"
                 alt=""
               />
             ),
@@ -187,7 +200,7 @@ export const DetailList = () => (
             title: "Image",
             text: (
               <img
-                src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+                src="https://placehold.co/160x120/e2e8f0/475569.png?text=Oil+drum"
                 alt=""
               />
             ),

package/lib/components/display/feeds/README.md

@@ -31,12 +31,12 @@ const feeds: Feed[] = [
   {
     iconClass: "bg-blue-500",
     iconType: <HandThumbUpIcon className="h-5 w-5 text-white" />,
-    content: "Notify Arus Oil logistic team once you are ready to sell",
+    content: "Notify the logistics team once you are ready to sell",
     step: "Step 2",
     addContent: (
       <img
         className="mt-4 w-36 sm:w-56 h-auto"
-        src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+        src="https://placehold.co/160x120/e2e8f0/475569.png?text=Oil+drum"
         alt=""
       />
     ),
@@ -44,7 +44,7 @@ const feeds: Feed[] = [
   {
     iconClass: "bg-green-500",
     iconType: <CheckIcon className="h-5 w-5 text-white" />,
-    content: "View payment made to you on Arus Oil App",
+    content: "View payments made to you in the app",
     step: "Step 3",
   },
 ];

package/lib/components/display/feeds/feeds.stories.tsx

@@ -38,12 +38,12 @@ export const Feeds = () => {
       id: "2",
       iconClass: "bg-blue-500",
       iconType: <HandThumbUpIcon className="h-5 w-5 text-white" />,
-      content: "Notify Arus Oil logistic team once you are ready to sell",
+      content: "Notify the logistics team once you are ready to sell",
       step: "2025-12-11",
       addContent: (
         <img
           className="mt-4 w-36 sm:w-56 h-auto"
-          src="https://arusoil.com/static/oil_collection_drum-ddf6f26e6fbb1bc058bffb0faa722f51.webp"
+          src="https://placehold.co/160x120/e2e8f0/475569.png?text=Oil+drum"
           alt=""
         />
       ),
@@ -52,7 +52,7 @@ export const Feeds = () => {
       id: "3",
       iconClass: "bg-green-500",
       iconType: <CheckIcon className="h-5 w-5 text-white" />,
-      content: "View payment made to you on Arus Oil App",
+      content: "View payments made to you in the app",
       step: "2025-12-15",
     },
   ];