@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/jsx/views/Dashboard.native.js

@@ -38,6 +38,9 @@ __export(Dashboard_exports, {
   ChartCard: () => ChartCard,
   Dashboard: () => Dashboard,
   KPICard: () => KPICard,
+  ListCard: () => ListCard,
+  ProgressCard: () => ProgressCard,
+  ShortcutCard: () => ShortcutCard,
   aggregateData: () => aggregateData,
   calculatePercentageChange: () => calculatePercentageChange,
   calculateTrend: () => calculateTrend,
@@ -48,11 +51,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_BarChart = require("../charts/BarChart.native.js");
 var import_LineChart = require("../charts/LineChart.native.js");
 var import_PieChart = require("../charts/PieChart.native.js");
+var import_Sparkline = require("../charts/Sparkline.native.js");
 var import_componentColors = require("../componentColors.native.js");
 var import_AsyncBoundary = require("../layouts/AsyncBoundary.native.js");
+var import_surfaces = require("../surfaces.native.js");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = __toESM(require("react"));
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.native.js");
 var import_tamagui = require("tamagui");
 var SECTION_HEADING_TAGS = {
   2: import_tamagui.H2,
@@ -61,6 +66,94 @@ var SECTION_HEADING_TAGS = {
   5: import_tamagui.H5,
   6: import_tamagui.H6
 };
+function splitNestedControl(nested) {
+  var {
+    px,
+    hitSlop,
+    ...box
+  } = nested;
+  return {
+    px,
+    hitSlop,
+    box
+  };
+}
+function trendFill(color) {
+  if (color === import_componentColors.componentColors.semantic.success) return "$green4";
+  if (color === import_componentColors.componentColors.semantic.error) return "$red4";
+  return "$color4";
+}
+function useWidgetChrome(onPress) {
+  var resolved = (0, import_theme.useResolvedKnobs)();
+  var {
+    knobProps,
+    control
+  } = resolved;
+  var nested = splitNestedControl(knobProps.nestedControl);
+  var interactive = onPress ? {
+    cursor: "pointer",
+    hoverStyle: control.hoverKnobProps,
+    pressStyle: control.pressKnobProps,
+    focusVisibleStyle: control.focusVisibleKnobProps,
+    onPress,
+    role: "button"
+  } : void 0;
+  return {
+    knobProps,
+    control,
+    nested,
+    interactive
+  };
+}
+function NestedIconWell(param) {
+  var {
+    color,
+    box,
+    px,
+    radius,
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    ...box,
+    ...radius,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: color || "$accentBackground",
+    overflow: "hidden",
+    "data-nested-px": px,
+    children
+  });
+}
+function TrendPill(param) {
+  var {
+    symbol,
+    value,
+    color,
+    px,
+    radius,
+    label
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    height: px,
+    minHeight: px,
+    maxHeight: px,
+    paddingHorizontal: "$2",
+    alignItems: "center",
+    gap: "$1",
+    backgroundColor: trendFill(color),
+    ...radius,
+    "data-nested-px": px,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...label,
+      color,
+      children: symbol
+    }), value != null && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...label,
+      color,
+      children: value
+    })]
+  });
+}
 function resolveTrendColor(trend, goodDirection) {
   if (!trend || trend === "neutral") return import_componentColors.componentColors.text.muted;
   if (!goodDirection || goodDirection === "none") return import_componentColors.componentColors.text.muted;
@@ -72,8 +165,17 @@ function KPICard(param) {
     ...stackProps
   } = param;
   var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+    t
+  } = (0, import_i18n.useTranslation)();
+  var {
+    knobProps,
+    nested,
+    interactive
+  } = useWidgetChrome(config.onClick);
+  var {
+    px,
+    box
+  } = nested;
   var formatMetric = (0, import_react.useCallback)(function (num) {
     if (config.format === "currency") {
       return (0, import_theme.formatCurrency)(num, {
@@ -95,66 +197,54 @@ function KPICard(param) {
     if (config.trend === "down") return "\u2193";
     return "\u2014";
   }, [config.trend]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
-    size: knobProps.sizeToken,
-    ...knobProps.borderRadius,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.Card, {
+    width: "100%",
     elevation: knobProps.elevation,
-    borderWidth: 1,
-    borderColor: "$borderColor",
-    cursor: config.onClick ? "pointer" : void 0,
-    hoverStyle: config.onClick ? {
-      scale: 0.98,
-      borderColor: "$accentBackground"
-    } : void 0,
-    pressStyle: config.onClick ? {
-      scale: 0.97
-    } : void 0,
-    onPress: config.onClick,
+    ...knobProps.surface,
+    ...interactive,
     ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Header, {
-      ...knobProps.panelPadding,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          color: import_componentColors.componentColors.text.muted,
-          fontWeight: "500",
-          children: config.title
-        }), config.icon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          backgroundColor: config.color || "$accentBackground",
-          padding: "$2",
-          ...knobProps.borderRadius,
-          children: config.icon
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Footer, {
-      ...knobProps.panelPadding,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.gap,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$8",
-          fontWeight: "700",
-          color: "$color",
-          children: formattedValue
-        }), (config.trend || config.trendValue) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          alignItems: "center",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: trendColor,
-            children: trendSymbol
-          }), config.trendValue && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: trendColor,
-            children: config.trendValue
-          }), config.previousValue !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: import_componentColors.componentColors.text.muted,
-            children: ["vs ", formatMetric(config.previousValue)]
-          })]
-        })]
-      })
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: import_componentColors.componentColors.text.muted,
+        flex: 1,
+        children: config.title
+      }), config.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NestedIconWell, {
+        color: config.color,
+        box,
+        px,
+        radius: knobProps.borderRadius,
+        children: config.icon
+      }) : null]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$8",
+      color: "$color",
+      ...knobProps.heading,
+      children: formattedValue
+    }), config.sparkline && config.sparkline.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Sparkline.Sparkline, {
+      data: config.sparkline,
+      height: px,
+      title: config.title
+    }) : null, (config.trend || config.trendValue) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TrendPill, {
+        symbol: trendSymbol,
+        value: config.trendValue,
+        color: trendColor,
+        px,
+        radius: knobProps.borderRadius,
+        label: knobProps.label
+      }), config.previousValue !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: import_componentColors.componentColors.text.muted,
+        children: t("vs {{previousValue}}", {
+          previousValue: formatMetric(config.previousValue)
+        })
+      })]
     })]
   });
 }
@@ -174,46 +264,241 @@ function ChartCard(param) {
   var showXAxis = config.showLabels !== false;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
+    width: "100%",
     ...stackProps,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
       margin: 0,
+      ...knobProps.heading,
       ...import_componentColors.sectionHeading,
       children: config.title
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
-      size: knobProps.sizeToken,
-      ...knobProps.borderRadius,
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
       elevation: knobProps.elevation,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Footer, {
-        ...knobProps.panelPadding,
-        children: config.type === "pie" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PieChart.PieChart, {
-          data: config.data,
-          height: config.height,
-          // Parity with the old card pie anatomy (0.5-ratio hole) — now a
-          // true transparent arc hole instead of a painted circle.
-          donut: 0.5,
-          colors: dataColors,
-          showLegend: config.showLegend,
-          title: config.title
-        }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
-          data: config.data,
-          height: config.height,
-          color: dataColors === null || dataColors === void 0 ? void 0 : dataColors[0],
-          showPoints: true,
-          showXAxis,
-          showYAxis: false
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
-          data: config.data,
-          height: config.height,
-          colors: dataColors,
-          showXAxis,
-          showYAxis: false
+      ...knobProps.surface,
+      children: config.type === "pie" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PieChart.PieChart, {
+        data: config.data,
+        height: config.height,
+        donut: 0.5,
+        colors: dataColors,
+        showLegend: config.showLegend,
+        title: config.title
+      }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
+        data: config.data,
+        height: config.height,
+        color: dataColors === null || dataColors === void 0 ? void 0 : dataColors[0],
+        showPoints: true,
+        showXAxis,
+        showYAxis: false
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
+        data: config.data,
+        height: config.height,
+        colors: dataColors,
+        showXAxis,
+        showYAxis: false
+      })
+    })]
+  });
+}
+function ProgressCard(param) {
+  var {
+    config,
+    ...stackProps
+  } = param;
+  var {
+    knobProps,
+    nested
+  } = useWidgetChrome();
+  var {
+    px
+  } = nested;
+  var max = config.max && config.max > 0 ? config.max : 100;
+  var pct = Math.max(0, Math.min(100, config.value / max * 100));
+  var trackHeight = Math.max(6, Math.round(px / 4));
+  var label = config.format === "number" ? (0, import_theme.formatNumber)(config.value) : (0, import_theme.formatPercent)(Math.round(pct));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.Card, {
+    width: "100%",
+    elevation: knobProps.elevation,
+    ...knobProps.surface,
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      justifyContent: "space-between",
+      alignItems: "baseline",
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.label,
+        color: import_componentColors.componentColors.text.muted,
+        flex: 1,
+        children: config.title
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color",
+        ...knobProps.label,
+        children: label
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      height: trackHeight,
+      backgroundColor: "$color4",
+      overflow: "hidden",
+      ...knobProps.borderRadius,
+      role: "progressbar",
+      "aria-valuenow": config.value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": config.title,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        height: "100%",
+        width: `${pct}%`,
+        backgroundColor: config.color || "$accentBackground"
+      })
+    })]
+  });
+}
+function ShortcutCard(param) {
+  var {
+    config,
+    ...stackProps
+  } = param;
+  var {
+    knobProps,
+    nested,
+    interactive
+  } = useWidgetChrome(config.onClick);
+  var {
+    px,
+    box,
+    hitSlop
+  } = nested;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+    width: "100%",
+    elevation: knobProps.elevation,
+    ...knobProps.surface,
+    ...interactive,
+    hitSlop: config.onClick ? hitSlop : void 0,
+    ...stackProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      ...knobProps.gap,
+      children: [config.icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NestedIconWell, {
+        color: config.color,
+        box,
+        px,
+        radius: knobProps.borderRadius,
+        children: config.icon
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.body,
+        fontWeight: "600",
+        flex: 1,
+        numberOfLines: 1,
+        children: config.title
+      }), config.count != null && config.count !== "" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        height: px,
+        minHeight: px,
+        maxHeight: px,
+        minWidth: px,
+        paddingHorizontal: "$2",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "$color4",
+        ...knobProps.borderRadius,
+        "data-nested-px": px,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          color: import_componentColors.componentColors.text.secondary,
+          children: config.count
         })
+      }) : null]
+    })
+  });
+}
+function ListCard(param) {
+  var {
+    config,
+    headingLevel = 2,
+    ...stackProps
+  } = param;
+  var {
+    knobProps,
+    nested,
+    control
+  } = useWidgetChrome();
+  var {
+    px,
+    hitSlop
+  } = nested;
+  var HeadingTag = SECTION_HEADING_TAGS[headingLevel];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    width: "100%",
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
+      margin: 0,
+      ...knobProps.heading,
+      ...import_componentColors.sectionHeading,
+      children: config.title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+      elevation: knobProps.elevation,
+      ...knobProps.surface,
+      children: config.items.map(function (item) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          height: px,
+          minHeight: px,
+          maxHeight: px,
+          alignItems: "center",
+          justifyContent: "space-between",
+          ...knobProps.gap,
+          "data-nested-px": px,
+          cursor: item.onClick ? "pointer" : void 0,
+          hitSlop: item.onClick ? hitSlop : void 0,
+          hoverStyle: item.onClick ? control.hoverKnobProps : void 0,
+          pressStyle: item.onClick ? control.pressKnobProps : void 0,
+          focusVisibleStyle: item.onClick ? control.focusVisibleKnobProps : void 0,
+          onPress: item.onClick,
+          role: item.onClick ? "button" : void 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            flex: 1,
+            numberOfLines: 1,
+            children: item.label
+          }), item.meta ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: import_componentColors.componentColors.text.muted,
+            children: item.meta
+          }) : null]
+        }, item.id);
       })
     })]
   });
 }
+function DefaultWidget(param) {
+  var {
+    widget
+  } = param;
+  switch (widget.type) {
+    case "kpi":
+      return widget.kpiConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(KPICard, {
+        config: widget.kpiConfig
+      }) : null;
+    case "chart":
+      return widget.chartConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartCard, {
+        config: widget.chartConfig
+      }) : null;
+    case "progress":
+      return widget.progressConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProgressCard, {
+        config: widget.progressConfig
+      }) : null;
+    case "shortcut":
+      return widget.shortcutConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShortcutCard, {
+        config: widget.shortcutConfig
+      }) : null;
+    case "list":
+      return widget.listConfig ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ListCard, {
+        config: widget.listConfig
+      }) : null;
+    case "custom":
+      var _widget_content;
+      return (_widget_content = widget.content) !== null && _widget_content !== void 0 ? _widget_content : null;
+    default:
+      return null;
+  }
+}
 function Dashboard(param) {
   var {
     widgets,
@@ -231,32 +516,33 @@ function Dashboard(param) {
   } = param;
   var {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   var emptyMessage = emptyMessageProp !== null && emptyMessageProp !== void 0 ? emptyMessageProp : t("No widgets to display");
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  var sz = knobProps.sizeToken;
-  var gap = gapProp !== null && gapProp !== void 0 ? gapProp : sz === "$3" ? 12 : sz === "$5" ? 20 : 16;
-  var padding = paddingProp !== null && paddingProp !== void 0 ? paddingProp : sz === "$3" ? 12 : sz === "$5" ? 20 : 16;
+  var gap = gapProp !== null && gapProp !== void 0 ? gapProp : 16;
   var header = title || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
-    marginBottom: "$2",
     children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+      margin: 0,
+      ...knobProps.heading,
       children: title
     }), description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: sz,
+      ...knobProps.body,
+      ...knobProps.label,
       color: import_componentColors.componentColors.text.muted,
       children: description
     })]
   }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      padding,
+      ...(paddingProp != null ? {
+        padding: paddingProp
+      } : knobProps.panelPadding),
       gap,
       ...stackProps,
-      children: [/* Title stays mounted across async states (EUI: avoid header jump). */
-      header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
+      children: [header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
         loading: !error && isLoading && widgets.length === 0,
         empty: !error && widgets.length === 0,
         error,
@@ -266,21 +552,33 @@ function Dashboard(param) {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
           flexWrap: "wrap",
           gap,
-          marginHorizontal: -gap / 2,
+          ...(import_tamagui.isWeb ?
+          // CSS grid props are web-only and absent from the RN-flavored
+          // View type; Tamagui forwards them to the DOM (house Record cast).
+          {
+            display: "grid",
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+          } : {
+            marginHorizontal: -gap / 2
+          }),
           children: widgets.map(function (widget) {
-            var span = widget.colSpan || 1;
+            var span = Math.min(widget.colSpan || 1, columns);
             var widthPercent = span / columns * 100;
             var adjustedWidth = `calc(${widthPercent}% - ${gap}px)`;
             return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-              width: adjustedWidth,
-              minWidth: 200,
-              marginHorizontal: gap / 2,
-              children: renderWidget ? renderWidget(widget) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                children: [widget.type === "kpi" && widget.kpiConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(KPICard, {
-                  config: widget.kpiConfig
-                }), widget.type === "chart" && widget.chartConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartCard, {
-                  config: widget.chartConfig
-                })]
+              "data-dashboard-widget": widget.type,
+              ...(import_tamagui.isWeb ? {
+                gridColumn: `span ${span}`,
+                minWidth: 0,
+                width: "100%"
+              } : {
+                width: adjustedWidth,
+                minWidth: 200,
+                marginHorizontal: gap / 2,
+                marginBottom: gap
+              }),
+              children: renderWidget ? renderWidget(widget) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultWidget, {
+                widget
               })
             }, widget.id);
           })