@openg2p/registry-widgets 1.1.0-dev.0 → 1.1.0-dev.1

package/README.md

@@ -258,16 +258,16 @@ A full-width header card designed for registry record views. Displays a profile
 
 ### ScoresDisplay Widget
 
-A full-width, view-only widget for showing a single computed score record (e.g. PMT, Food Security Score). It fetches data via the host application's `dataSourceRequestHandler` and renders:
+A full-width, view-only widget for showing **a list** of computed score records (e.g. PMT, Food Security Score). It renders, for each score:
 
 - **Score Type**
 - **Score**
 - **Computed at**
 
-**API request mapping**
+**Data binding**
 
-- The widget reads `internal_record_id` from `widget-data-source.params.internal_record_id_path` (a dot-path into `schemaData` / store values).
-- It then calls `dataSourceRequestHandler(service, endpoint, method, params)` and passes `internal_record_id` in the request params.
+- The widget reads an array of score records from `widget-data-path` (a dot-path into `schemaData` / store values).
+- `widget-data-path` may point either directly to an array, or to an object containing `{ "scores": [...] }`.
 
 ```json
 {
@@ -275,37 +275,27 @@ A full-width, view-only widget for showing a single computed score record (e.g.
   "widget-type": "group",
   "widget-id": "record-scores",
   "widget-readonly": true,
-  "widget-data-source": {
-    "type": "api",
-    "service": "staff-portal-api",
-    "endpoint": "get_scores",
-    "method": "POST",
-    "params": {
-      "internal_record_id_path": "internal_record_id"
-    }
-  }
+  "widget-data-path": "scores"
 }
 ```
 
-**Expected response shape (ideal)**
+**Expected record shape (ideal)**
 
 ```json
-{
-  "scores": [
-    {
-      "score_type": "PMT",
-      "computed_score": 42,
-      "computed_at": "2026-04-16T10:12:00Z",
-      "triggered_by_cr_id": "CR-001"
-    }
-  ]
-}
+[
+  {
+    "score_type": "PMT",
+    "computed_score": 42,
+    "computed_at": "2026-04-16T10:12:00Z",
+    "triggered_by_cr_id": "CR-001"
+  }
+]
 ```
 
 **Notes**
 
-- The widget displays a single score record. If multiple scores are returned, it selects the most recent by `computed_at` (falls back to the first item if dates are missing).
 - There is no edit mode for this widget.
+- If multiple scores are provided, the widget sorts them by `computed_at` (most recent first). If dates are missing/invalid, original order is preserved for those items.
 
 ## Section Modes
 

package/dist/index.d.ts

@@ -1454,33 +1454,20 @@ declare const HeaderSectionWidget: ({ config }: HeaderSectionWidgetProps) => rea
 
 interface ScoresDisplayWidgetProps {
     config: BaseWidgetConfig;
-    dataSourceRequestHandler?: DataSourceRequestHandler;
     schemaData?: Record<string, unknown>;
 }
 /**
- * Scores Display Widget - full-width, view-only widget
+ * Scores Display Widget - full-width, view-only widget (list)
  *
  * Expected config (reference):
  * {
  *   "widget": "scores-display",
  *   "widget-type": "group",
  *   "widget-id": "record-scores",
- *   "widget-data-source": {
- *     "type": "api",
- *     "service": "staff-portal-api",
- *     "endpoint": "get_scores",
- *     "method": "POST",
- *     "params": { "internal_record_id_path": "internal_record_id" }
- *   }
+ *   "widget-data-path": "scores"
  * }
- *
- * The host's `dataSourceRequestHandler` is invoked with:
- * - service: config.widget-data-source.service
- * - endpoint: config.widget-data-source.endpoint
- * - method: config.widget-data-source.method (default POST)
- * - params: { internal_record_id: <resolved from internal_record_id_path> }
  */
-declare const ScoresDisplayWidget: ({ config, dataSourceRequestHandler: propHandler, schemaData: propSchemaData, }: ScoresDisplayWidgetProps) => react_jsx_runtime.JSX.Element;
+declare const ScoresDisplayWidget: ({ config, schemaData: propSchemaData, }: ScoresDisplayWidgetProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Get value from object using dot notation path

package/dist/index.esm.js

@@ -9526,6 +9526,13 @@ const HeaderSectionWidget = ({ config }) => {
                                         } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
 };
 
+function getValueByPathOrKey(obj, path) {
+    if (!obj || !path)
+        return undefined;
+    if (Object.prototype.hasOwnProperty.call(obj, path))
+        return obj[path];
+    return getValueByPath(obj, path);
+}
 function tryFormatDateTime(value) {
     if (typeof value !== 'string' || !value)
         return value ? String(value) : '-';
@@ -9545,157 +9552,80 @@ function tryFormatDateTime(value) {
         return value;
     }
 }
-function pickLatestScore(scores) {
-    if (!scores || scores.length === 0)
-        return null;
+function sortScores(scores) {
     const withTime = scores
-        .map((s) => {
+        .map((s, idx) => {
         const t = typeof s?.computed_at === 'string' ? new Date(s.computed_at).getTime() : NaN;
-        return { s, t };
+        return { s, t, idx };
     })
-        .filter((x) => !Number.isNaN(x.t));
-    if (withTime.length === 0)
-        return scores[0] || null;
-    withTime.sort((a, b) => b.t - a.t);
-    return withTime[0]?.s || null;
+        .sort((a, b) => {
+        const aHas = !Number.isNaN(a.t);
+        const bHas = !Number.isNaN(b.t);
+        if (aHas && bHas)
+            return b.t - a.t;
+        if (aHas)
+            return -1;
+        if (bHas)
+            return 1;
+        return a.idx - b.idx;
+    });
+    return withTime.map((x) => x.s);
 }
 /**
- * Scores Display Widget - full-width, view-only widget
+ * Scores Display Widget - full-width, view-only widget (list)
  *
  * Expected config (reference):
  * {
  *   "widget": "scores-display",
  *   "widget-type": "group",
  *   "widget-id": "record-scores",
- *   "widget-data-source": {
- *     "type": "api",
- *     "service": "staff-portal-api",
- *     "endpoint": "get_scores",
- *     "method": "POST",
- *     "params": { "internal_record_id_path": "internal_record_id" }
- *   }
+ *   "widget-data-path": "scores"
  * }
- *
- * The host's `dataSourceRequestHandler` is invoked with:
- * - service: config.widget-data-source.service
- * - endpoint: config.widget-data-source.endpoint
- * - method: config.widget-data-source.method (default POST)
- * - params: { internal_record_id: <resolved from internal_record_id_path> }
  */
-const ScoresDisplayWidget = ({ config, dataSourceRequestHandler: propHandler, schemaData: propSchemaData, }) => {
-    const { dataSourceRequestHandler: ctxHandler, schemaData: ctxSchemaData } = useWidgetContext();
-    const handler = propHandler || ctxHandler;
-    const schemaData = propSchemaData || ctxSchemaData || {};
+const ScoresDisplayWidget = ({ config, schemaData: propSchemaData, }) => {
+    const { schemaData: ctxSchemaData } = useWidgetContext();
+    const schemaData = (propSchemaData || ctxSchemaData || {});
     const values = useSelector((state) => state.widget.values);
-    const api = config['widget-data-source'];
-    const isApi = api?.type === 'api';
-    const apiDs = isApi ? api : null;
-    const internalIdPath = useMemo(() => {
-        if (!apiDs)
-            return undefined;
-        const p = apiDs.params || {};
-        const fromParams = p.internal_record_id_path || p.internalRecordIdPath;
-        const fromConfig = typeof config.internal_record_id_path === 'string'
-            ? config.internal_record_id_path
-            : undefined;
-        return fromParams || fromConfig;
-    }, [apiDs, config]);
-    const internalRecordId = useMemo(() => {
-        if (!internalIdPath)
+    const dataPath = config['widget-data-path'];
+    const rawScores = useMemo(() => {
+        if (!dataPath || typeof dataPath !== 'string')
             return undefined;
-        const fromValues = getValueByPath(values || {}, internalIdPath);
-        if (fromValues !== undefined && fromValues !== null && String(fromValues).trim() !== '') {
-            return String(fromValues);
-        }
-        const fromSchema = getValueByPath(schemaData || {}, internalIdPath);
-        if (fromSchema !== undefined && fromSchema !== null && String(fromSchema).trim() !== '') {
-            return String(fromSchema);
+        const valuesObj = values;
+        const tryResolve = (path) => {
+            const fromValues = getValueByPathOrKey(valuesObj, path);
+            if (fromValues !== undefined)
+                return fromValues;
+            return getValueByPathOrKey(schemaData, path);
+        };
+        // 1) Try exact path (works when schema/store is already namespaced)
+        const direct = tryResolve(dataPath);
+        if (direct !== undefined)
+            return direct;
+        // 2) If section/widget config has been namespaced (e.g. "rv-section-0.scores"),
+        // fall back to the original path ("scores") so examples still work even when
+        // schemaData/store are not namespaced.
+        if (dataPath.includes('.')) {
+            const unNamespaced = dataPath.split('.').slice(1).join('.');
+            const fallback = tryResolve(unNamespaced);
+            if (fallback !== undefined)
+                return fallback;
         }
         return undefined;
-    }, [internalIdPath, values, schemaData]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [response, setResponse] = useState(null);
-    useEffect(() => {
-        let cancelled = false;
-        const load = async () => {
-            if (!apiDs) {
-                setError('Scores widget requires an API data source.');
-                setResponse(null);
-                return;
-            }
-            if (!handler) {
-                setError(null);
-                setResponse(null);
-                return;
-            }
-            const service = apiDs.service;
-            const endpoint = apiDs.endpoint;
-            const method = apiDs.method || 'POST';
-            if (!service || !endpoint) {
-                setError('Scores widget API data source is missing service/endpoint.');
-                setResponse(null);
-                return;
-            }
-            if (!internalRecordId) {
-                setError(null);
-                setResponse(null);
-                return;
-            }
-            try {
-                setLoading(true);
-                setError(null);
-                const rawParams = apiDs.params || {};
-                // Never pass the path helper through to the API.
-                const { internal_record_id_path, internalRecordIdPath, ...rest } = rawParams;
-                void internal_record_id_path;
-                void internalRecordIdPath;
-                const params = {
-                    ...rest,
-                    internal_record_id: internalRecordId,
-                };
-                const res = await handler(service, endpoint, method, params, {
-                    headers: apiDs.headers,
-                });
-                if (cancelled)
-                    return;
-                // Accept either direct payload or OpenG2P wrapper objects.
-                const envelope = res && typeof res === 'object' ? res : null;
-                const payload = envelope?.response_body?.response_payload ?? envelope?.data ?? res;
-                if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
-                    setResponse(payload);
-                }
-                else {
-                    setResponse({ scores: Array.isArray(payload) ? payload : [] });
-                }
-            }
-            catch (e) {
-                if (cancelled)
-                    return;
-                const maybeErr = e;
-                const msg = maybeErr && typeof maybeErr === 'object' && typeof maybeErr.message === 'string'
-                    ? maybeErr.message
-                    : 'Failed to load scores.';
-                setError(msg);
-                setResponse(null);
-            }
-            finally {
-                if (!cancelled)
-                    setLoading(false);
-            }
-        };
-        load();
-        return () => {
-            cancelled = true;
-        };
-    }, [apiDs, handler, internalRecordId]);
-    const latest = useMemo(() => pickLatestScore(response?.scores), [response]);
+    }, [dataPath, values, schemaData]);
+    const scores = useMemo(() => {
+        if (!rawScores)
+            return [];
+        if (Array.isArray(rawScores))
+            return rawScores;
+        if (typeof rawScores === 'object') {
+            const maybe = rawScores.scores;
+            if (Array.isArray(maybe))
+                return maybe;
+        }
+        return [];
+    }, [rawScores]);
+    const sortedScores = useMemo(() => sortScores(scores), [scores]);
     const cls = `scores-display-widget-${config['widget-id']}`;
-    const scoreType = latest?.score_type ? String(latest.score_type) : '-';
-    const scoreValue = latest?.computed_score !== undefined && latest?.computed_score !== null && String(latest.computed_score) !== ''
-        ? String(latest.computed_score)
-        : '-';
-    const computedAt = tryFormatDateTime(latest?.computed_at);
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
           width: 100%;
@@ -9712,66 +9642,95 @@ const ScoresDisplayWidget = ({ config, dataSourceRequestHandler: propHandler, sc
           font-weight: 400;
         }
 
-        .${cls} .scores-card {
+        .${cls} .scores-grid {
           width: 100%;
-          border: none;
-          border-radius: 0;
-          background: transparent;
-          padding: 0;
           display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
+          grid-template-columns: repeat(3, minmax(220px, 1fr));
           gap: 16px;
-          align-items: center;
         }
 
-        .${cls} .scores-col {
-          min-width: 0;
+        .${cls} .scores-card {
+          border: 1px solid var(--owt-color-border-light, #E4E4E4);
+          border-radius: 10px;
+          background: var(--owt-color-bg, #FFFFFF);
+          padding: 14px 14px;
           display: flex;
           flex-direction: column;
-          gap: 6px;
+          gap: 10px;
+          min-width: 0;
+          box-shadow: 0 1px 2px rgba(1, 22, 39, 0.06), 0 6px 16px rgba(1, 22, 39, 0.06);
         }
 
-        .${cls} .scores-label {
-          font-size: 12px;
-          color: var(--owt-color-text-muted, #727474);
-          font-weight: 600;
-          letter-spacing: 0.25px;
-          text-transform: uppercase;
+        .${cls} .scores-type {
+          font-size: 16px;
+          font-weight: 800;
+          color: var(--owt-color-primary-dark, #F07B1A);
+          line-height: 1.2;
+          word-break: break-word;
         }
 
         .${cls} .scores-value {
-          font-size: 16px;
-          font-weight: 600;
+          font-size: 34px;
+          font-weight: 800;
           color: var(--owt-color-text, #011627);
-          line-height: 1.25;
-          word-break: break-word;
+          line-height: 1.05;
+          letter-spacing: -0.25px;
         }
 
-        .${cls} .scores-value--highlight {
-          font-weight: 800;
-          color: var(--owt-color-primary-dark, #F07B1A);
+        .${cls} .scores-separator {
+          height: 1px;
+          width: 100%;
+          background-color: var(--owt-color-border-light, #E4E4E4);
+          border: none;
+          margin: 2px 0;
         }
 
-        .${cls} .scores-value-wrap {
-          display: inline-flex;
-          align-items: baseline;
-          gap: 10px;
-          flex-wrap: wrap;
+        .${cls} .scores-value .scores-muted {
+          font-size: 18px;
+          font-weight: 600;
+          color: var(--owt-color-text-muted, #727474);
+          margin-left: 6px;
         }
 
-        .${cls} .scores-value-badge { display: inline; }
+        .${cls} .scores-meta {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
 
-        .${cls} .scores-statusline {
-          grid-column: 1 / -1;
-          margin-top: 2px;
+        .${cls} .scores-meta-line {
+          font-size: 13px;
+          color: var(--owt-color-text-muted, #727474);
+          font-weight: 500;
         }
 
-        @media (max-width: 768px) {
-          .${cls} .scores-card {
+        .${cls} .scores-meta-line strong {
+          color: var(--owt-color-text, #011627);
+          font-weight: 700;
+        }
+
+        @media (max-width: 1024px) {
+          .${cls} .scores-grid {
+            grid-template-columns: repeat(2, minmax(220px, 1fr));
+          }
+        }
+
+        @media (max-width: 640px) {
+          .${cls} .scores-grid {
             grid-template-columns: 1fr;
           }
         }
-      ` }), jsxRuntimeExports.jsx("div", { className: cls, children: jsxRuntimeExports.jsxs("div", { className: "scores-card", children: [jsxRuntimeExports.jsxs("div", { className: "scores-col", "aria-live": "polite", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Score Type" }), jsxRuntimeExports.jsx("div", { className: "scores-value-wrap", children: jsxRuntimeExports.jsx("span", { className: "scores-value-badge", children: jsxRuntimeExports.jsx("span", { className: "scores-value scores-value--highlight", children: scoreType }) }) })] }), jsxRuntimeExports.jsxs("div", { className: "scores-col", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Score" }), jsxRuntimeExports.jsx("div", { className: "scores-value-wrap", children: jsxRuntimeExports.jsx("span", { className: "scores-value-badge", children: jsxRuntimeExports.jsx("span", { className: "scores-value scores-value--highlight", children: scoreValue }) }) })] }), jsxRuntimeExports.jsxs("div", { className: "scores-col", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Computed at" }), jsxRuntimeExports.jsx("div", { className: "scores-value", children: computedAt })] }), jsxRuntimeExports.jsx("div", { className: "scores-statusline", children: loading ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "Loading scores\u2026" })) : error ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", style: { color: 'var(--owt-color-error, #B91C1C)' }, children: error })) : !latest ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "No scores available." })) : null })] }) })] }));
+      ` }), jsxRuntimeExports.jsx("div", { className: cls, children: sortedScores.length === 0 ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "No scores available." })) : (jsxRuntimeExports.jsx("div", { className: "scores-grid", children: sortedScores.map((s, idx) => {
+                        const scoreType = s?.score_type ? String(s.score_type) : '-';
+                        const scoreValue = s?.computed_score !== undefined &&
+                            s?.computed_score !== null &&
+                            String(s.computed_score) !== ''
+                            ? String(s.computed_score)
+                            : '-';
+                        const computedAt = tryFormatDateTime(s?.computed_at);
+                        const key = `${scoreType}-${String(s?.computed_at || '')}-${idx}`;
+                        return (jsxRuntimeExports.jsxs("div", { className: "scores-card", "aria-live": idx === 0 ? 'polite' : undefined, children: [jsxRuntimeExports.jsx("div", { className: "scores-type", children: scoreType }), jsxRuntimeExports.jsx("div", { className: "scores-value", children: scoreValue }), jsxRuntimeExports.jsx("hr", { className: "scores-separator" }), jsxRuntimeExports.jsx("div", { className: "scores-meta", children: jsxRuntimeExports.jsxs("div", { className: "scores-meta-line", children: ["Computed at: ", jsxRuntimeExports.jsx("strong", { children: computedAt })] }) })] }, key));
+                    }) })) })] }));
 };
 
 /**