@ttoss/react-dashboard 0.1.2 → 0.1.3

package/dist/esm/index.js

@@ -0,0 +1,609 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+
+// src/Dashboard.tsx
+import { Divider, Flex as Flex6 } from "@ttoss/ui";
+import * as React8 from "react";
+
+// src/DashboardGrid.tsx
+import "react-grid-layout/css/styles.css";
+import { Box as Box3, Flex as Flex3, Spinner } from "@ttoss/ui";
+import { Responsive, WidthProvider } from "react-grid-layout";
+
+// src/Cards/BigNumber.tsx
+import { Icon } from "@ttoss/react-icons";
+import { Box as Box2, Flex as Flex2, Text as Text2 } from "@ttoss/ui";
+
+// src/Cards/Wrapper.tsx
+import { Box, Flex, Text, TooltipIcon } from "@ttoss/ui";
+var CardWrapper = /* @__PURE__ */__name(({
+  title,
+  children,
+  description,
+  variant = "default"
+}) => {
+  const getBackgroundColor = /* @__PURE__ */__name(() => {
+    switch (variant) {
+      case "dark":
+        return "input.background.secondary.default";
+      case "light-green":
+        return "feedback.background.positive.default";
+      case "default":
+      default:
+        return "display.background.primary.default";
+    }
+  }, "getBackgroundColor");
+  const getTitleColor = /* @__PURE__ */__name(() => {
+    switch (variant) {
+      case "dark":
+        return "action.text.primary.default";
+      case "light-green":
+        return "feedback.text.positive.default";
+      case "default":
+      default:
+        return "display.text.primary.default";
+    }
+  }, "getTitleColor");
+  return /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      gap: "3",
+      backgroundColor: getBackgroundColor(),
+      borderRadius: "lg",
+      padding: "4",
+      width: "100%",
+      height: "100%",
+      boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      alignItems: "center",
+      gap: "2"
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    variant: "h5",
+    sx: {
+      color: getTitleColor(),
+      flex: 1,
+      minWidth: 0
+    }
+  }, title), description && /* @__PURE__ */React.createElement(TooltipIcon, {
+    variant: "info",
+    icon: "ant-design:info-circle-outlined",
+    tooltip: {
+      children: description
+    },
+    sx: {
+      marginLeft: "2",
+      flexShrink: 0
+    }
+  })), /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      flex: "auto",
+      height: "100%",
+      justifyContent: "center"
+    }
+  }, children));
+}, "CardWrapper");
+
+// src/Cards/BigNumber.tsx
+var formatNumber = /* @__PURE__ */__name((value, type) => {
+  if (value === void 0 || value === null) {
+    return "-";
+  }
+  switch (type) {
+    case "currency":
+      return new Intl.NumberFormat("pt-BR", {
+        style: "currency",
+        currency: "BRL"
+      }).format(value);
+    case "percentage":
+      return `${value.toFixed(2)}%`;
+    case "number":
+    default:
+      {
+        const formatted = new Intl.NumberFormat("pt-BR", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        }).format(value);
+        return formatted;
+      }
+  }
+}, "formatNumber");
+var getValueColor = /* @__PURE__ */__name((color, variant) => {
+  if (variant === "dark") {
+    return "action.text.primary.default";
+  }
+  if (variant === "light-green") {
+    return "feedback.text.positive.default";
+  }
+  if (!color) {
+    return "display.text.primary.default";
+  }
+  if (["green", "accent", "positive"].includes(color.toLowerCase())) {
+    return "display.text.accent.default";
+  }
+  return "display.text.primary.default";
+}, "getValueColor");
+var getTrendColor = /* @__PURE__ */__name(status => {
+  if (status === "positive") {
+    return "display.text.accent.default";
+  }
+  if (status === "negative") {
+    return "display.text.negative.default";
+  }
+  return "display.text.primary.default";
+}, "getTrendColor");
+var BigNumber = /* @__PURE__ */__name(props => {
+  const total = props.data.api?.total ?? props.data.meta?.total ?? void 0;
+  const formattedValue = formatNumber(total, props.numberType);
+  const displayValue = props.numberType === "number" && props.title.toLowerCase().includes("roas") ? `${formattedValue}x` : formattedValue;
+  const valueColor = getValueColor(props.color, props.variant);
+  const variant = props.variant || "default";
+  return /* @__PURE__ */React.createElement(CardWrapper, {
+    title: props.title,
+    description: props.description || "",
+    variant
+  }, /* @__PURE__ */React.createElement(Flex2, {
+    sx: {
+      flexDirection: "column",
+      gap: "2"
+    }
+  }, /* @__PURE__ */React.createElement(Text2, {
+    sx: {
+      color: valueColor,
+      fontSize: "2xl",
+      fontWeight: "bold",
+      lineHeight: "1.2"
+    }
+  }, displayValue), props.trend && /* @__PURE__ */React.createElement(Flex2, {
+    sx: {
+      alignItems: "center",
+      gap: "1"
+    }
+  }, /* @__PURE__ */React.createElement(Box2, {
+    sx: {
+      color: getTrendColor(props.trend.status),
+      display: "flex",
+      alignItems: "center"
+    }
+  }, props.trend.status === "positive" ? /* @__PURE__ */React.createElement(Icon, {
+    icon: "mdi:arrow-up",
+    width: 16
+  }) : props.trend.status === "negative" ? /* @__PURE__ */React.createElement(Icon, {
+    icon: "mdi:arrow-down",
+    width: 16
+  }) : null, props.trend.status === "neutral" ? /* @__PURE__ */React.createElement(Icon, {
+    icon: "mdi:arrow-right",
+    width: 16
+  }) : null), /* @__PURE__ */React.createElement(Text2, {
+    sx: {
+      color: getTrendColor(props.trend.status),
+      fontSize: "sm",
+      fontWeight: "medium"
+    }
+  }, props.trend.status === "positive" ? "+" : "", props.trend.status === "negative" ? "-" : "", props.trend.status === "neutral" ? "" : "", props.trend.value.toFixed(1), "%", " ", props.trend ? "vs. per\xEDodo anterior" : "")), props.additionalInfo && /* @__PURE__ */React.createElement(Text2, {
+    sx: {
+      color: getValueColor(props.color, props.variant),
+      fontSize: "sm",
+      mt: "1"
+    }
+  }, props.additionalInfo), props.status && /* @__PURE__ */React.createElement(Flex2, {
+    sx: {
+      alignItems: "center",
+      gap: "1",
+      mt: props.trend || props.additionalInfo ? "2" : "1"
+    }
+  }, props.status.icon && /* @__PURE__ */React.createElement(Box2, {
+    sx: {
+      color: "feedback.text.positive.default",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: props.status.icon,
+    width: 16
+  })), /* @__PURE__ */React.createElement(Text2, {
+    sx: {
+      color: "feedback.text.positive.default",
+      fontSize: "sm",
+      fontWeight: "medium"
+    }
+  }, props.status.text))));
+}, "BigNumber");
+
+// src/DashboardCard.tsx
+var DashboardCard = /* @__PURE__ */__name(props => {
+  switch (props.type) {
+    case "bigNumber":
+      return /* @__PURE__ */React.createElement(BigNumber, props);
+    default:
+      return null;
+  }
+}, "DashboardCard");
+
+// src/DashboardGrid.tsx
+var ResponsiveGridLayout = WidthProvider(Responsive);
+var DashboardGrid = /* @__PURE__ */__name(({
+  loading,
+  selectedTemplate
+}) => {
+  if (!selectedTemplate) {
+    return null;
+  }
+  const breakpoints = {
+    xs: 0,
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  };
+  const cols = {
+    xs: 2,
+    sm: 2,
+    md: 12,
+    lg: 12,
+    xl: 12,
+    "2xl": 12
+  };
+  const baseLayout = selectedTemplate.grid.map(item => {
+    const {
+      card,
+      ...layout
+    } = item;
+    return layout;
+  });
+  const layouts = {
+    xs: baseLayout,
+    sm: baseLayout,
+    md: baseLayout,
+    lg: baseLayout,
+    xl: baseLayout,
+    "2xl": baseLayout
+  };
+  return /* @__PURE__ */React.createElement(Box3, {
+    sx: {
+      width: "100%",
+      height: "full"
+    }
+  }, loading ? /* @__PURE__ */React.createElement(Flex3, {
+    sx: {
+      width: "100%",
+      height: "full",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Spinner, null)) : /* @__PURE__ */React.createElement(ResponsiveGridLayout, {
+    className: "layout",
+    layouts,
+    breakpoints,
+    cols,
+    rowHeight: 30,
+    margin: [10, 10],
+    containerPadding: [0, 0]
+  }, selectedTemplate.grid.map(item => {
+    return /* @__PURE__ */React.createElement("div", {
+      key: item.i
+    }, /* @__PURE__ */React.createElement(DashboardCard, item.card));
+  })));
+}, "DashboardGrid");
+
+// src/DashboardHeader.tsx
+import { Flex as Flex5 } from "@ttoss/ui";
+import * as React7 from "react";
+
+// src/DashboardFilters.tsx
+import { Flex as Flex4 } from "@ttoss/ui";
+import * as React6 from "react";
+
+// src/DashboardProvider.tsx
+import * as React2 from "react";
+var DashboardContext = /* @__PURE__ */React2.createContext({
+  filters: [],
+  updateFilter: /* @__PURE__ */__name(() => {}, "updateFilter"),
+  templates: [],
+  selectedTemplate: void 0
+});
+var DashboardProvider = /* @__PURE__ */__name(props => {
+  const {
+    filters: externalFilters,
+    templates: externalTemplates,
+    onFiltersChange
+  } = props;
+  const onFiltersChangeRef = React2.useRef(onFiltersChange);
+  const filtersRef = React2.useRef(externalFilters);
+  React2.useEffect(() => {
+    onFiltersChangeRef.current = onFiltersChange;
+  }, [onFiltersChange]);
+  React2.useEffect(() => {
+    filtersRef.current = externalFilters;
+  }, [externalFilters]);
+  const updateFilter = React2.useCallback((key, value) => {
+    const updatedFilters = filtersRef.current.map(filter => {
+      return filter.key === key ? {
+        ...filter,
+        value
+      } : filter;
+    });
+    onFiltersChangeRef.current?.(updatedFilters);
+  }, []
+  // Empty deps - we use refs for current values
+  );
+  const selectedTemplate = React2.useMemo(() => {
+    const templateId = externalFilters.find(filter => {
+      return filter.key === "template";
+    })?.value;
+    return externalTemplates.find(template => {
+      return template.id === templateId;
+    });
+  }, [externalFilters, externalTemplates]);
+  return /* @__PURE__ */React2.createElement(DashboardContext.Provider, {
+    value: {
+      filters: externalFilters,
+      updateFilter,
+      templates: externalTemplates,
+      selectedTemplate
+    }
+  }, props.children);
+}, "DashboardProvider");
+var useDashboard = /* @__PURE__ */__name(() => {
+  const context = React2.useContext(DashboardContext);
+  if (!context) {
+    throw new Error("useDashboard must be used within a DashboardProvider");
+  }
+  return context;
+}, "useDashboard");
+
+// src/Filters/DateRangeFilter.tsx
+import { FormFieldDatePicker } from "@ttoss/forms";
+import { FormProvider, useForm } from "@ttoss/forms";
+import * as React3 from "react";
+var DateRangeFilter = /* @__PURE__ */__name(({
+  label,
+  value,
+  presets,
+  onChange
+}) => {
+  const formMethods = useForm({
+    defaultValues: {
+      dateRange: value
+    },
+    mode: "onChange"
+  });
+  React3.useEffect(() => {
+    if (value !== void 0) {
+      formMethods.setValue("dateRange", value, {
+        shouldDirty: false
+      });
+    }
+  }, [value, formMethods]);
+  const currentValue = formMethods.watch("dateRange");
+  const dateRangesEqual = React3.useCallback((a, b) => {
+    if (a === b) {
+      return true;
+    }
+    if (!a || !b) {
+      return false;
+    }
+    const aFrom = a.from?.getTime();
+    const aTo = a.to?.getTime();
+    const bFrom = b.from?.getTime();
+    const bTo = b.to?.getTime();
+    return aFrom === bFrom && aTo === bTo;
+  }, []);
+  React3.useEffect(() => {
+    if (currentValue !== void 0 && !dateRangesEqual(currentValue, value)) {
+      onChange?.(currentValue);
+    }
+  }, [currentValue, value, onChange, dateRangesEqual]);
+  return /* @__PURE__ */React3.createElement(FormProvider, formMethods, /* @__PURE__ */React3.createElement(FormFieldDatePicker, {
+    name: "dateRange",
+    label,
+    presets
+  }));
+}, "DateRangeFilter");
+
+// src/Filters/SelectFilter.tsx
+import { FormFieldSelect, FormProvider as FormProvider2, useForm as useForm2 } from "@ttoss/forms";
+import * as React4 from "react";
+var SelectFilter = /* @__PURE__ */__name(props => {
+  const {
+    value,
+    onChange,
+    label,
+    options
+  } = props;
+  const formMethods = useForm2({
+    defaultValues: {
+      value
+    },
+    mode: "onChange"
+  });
+  React4.useEffect(() => {
+    const propValue = value;
+    formMethods.setValue("value", propValue, {
+      shouldDirty: false
+    });
+  }, [value, formMethods]);
+  const currentValue = formMethods.watch("value");
+  React4.useEffect(() => {
+    if (currentValue !== void 0 && currentValue !== value) {
+      onChange(currentValue);
+    }
+  }, [currentValue, value, onChange]);
+  return /* @__PURE__ */React4.createElement(FormProvider2, formMethods, /* @__PURE__ */React4.createElement(FormFieldSelect, {
+    name: "value",
+    label,
+    options,
+    sx: {
+      fontSize: "sm"
+    }
+  }));
+}, "SelectFilter");
+
+// src/Filters/TextFilter.tsx
+import { FormFieldInput, FormProvider as FormProvider3, useForm as useForm3 } from "@ttoss/forms";
+import * as React5 from "react";
+var TextFilter = /* @__PURE__ */__name(props => {
+  const {
+    value,
+    onChange,
+    label,
+    placeholder
+  } = props;
+  const formMethods = useForm3({
+    defaultValues: {
+      value: value.toString()
+    },
+    mode: "onChange"
+  });
+  React5.useEffect(() => {
+    const stringValue = value.toString();
+    formMethods.setValue("value", stringValue, {
+      shouldDirty: false
+    });
+  }, [value, formMethods]);
+  const currentValue = formMethods.watch("value");
+  React5.useEffect(() => {
+    if (currentValue !== void 0 && currentValue !== value.toString()) {
+      onChange(currentValue);
+    }
+  }, [currentValue, value, onChange]);
+  return /* @__PURE__ */React5.createElement(FormProvider3, formMethods, /* @__PURE__ */React5.createElement(FormFieldInput, {
+    name: "value",
+    label,
+    placeholder,
+    sx: {
+      fontSize: "sm"
+    }
+  }));
+}, "TextFilter");
+
+// src/DashboardFilters.tsx
+var DashboardFilterType = /* @__PURE__ */function (DashboardFilterType2) {
+  DashboardFilterType2["TEXT"] = "text";
+  DashboardFilterType2["SELECT"] = "select";
+  DashboardFilterType2["DATE_RANGE"] = "date-range";
+  DashboardFilterType2["NUMBER"] = "number";
+  DashboardFilterType2["BOOLEAN"] = "boolean";
+  return DashboardFilterType2;
+}({});
+var DashboardFilters = /* @__PURE__ */__name(() => {
+  const {
+    filters,
+    updateFilter
+  } = useDashboard();
+  const onChangeHandlers = React6.useMemo(() => {
+    const handlers = /* @__PURE__ */new Map();
+    for (const filter of filters) {
+      handlers.set(filter.key, value => {
+        updateFilter(filter.key, value);
+      });
+    }
+    return handlers;
+  }, [filters, updateFilter]);
+  return /* @__PURE__ */React6.createElement(Flex4, {
+    sx: {
+      gap: "2",
+      flexDirection: "row",
+      "@media (max-width: 768px)": {
+        flexWrap: "wrap"
+      }
+    }
+  }, filters.map(filter => {
+    const onChange = onChangeHandlers.get(filter.key);
+    if (!onChange) {
+      return null;
+    }
+    switch (filter.type) {
+      case "text":
+        return /* @__PURE__ */React6.createElement(TextFilter, {
+          key: filter.key,
+          name: filter.key,
+          label: filter.label,
+          value: filter.value,
+          placeholder: filter.placeholder,
+          onChange
+        });
+      case "select":
+        return /* @__PURE__ */React6.createElement(SelectFilter, {
+          key: filter.key,
+          name: filter.key,
+          label: filter.label,
+          value: filter.value,
+          options: filter.options ?? [],
+          onChange: /* @__PURE__ */__name(value => {
+            onChange(value);
+          }, "onChange")
+        });
+      case "date-range":
+        return /* @__PURE__ */React6.createElement(DateRangeFilter, {
+          label: filter.label,
+          key: filter.key,
+          value: filter.value,
+          presets: filter.presets,
+          onChange: /* @__PURE__ */__name(range => {
+            onChange(range);
+          }, "onChange")
+        });
+      default:
+        return null;
+    }
+  }));
+}, "DashboardFilters");
+
+// src/DashboardHeader.tsx
+var DashboardHeader = /* @__PURE__ */__name(({
+  children
+}) => {
+  return /* @__PURE__ */React7.createElement(Flex5, {
+    sx: {
+      padding: "2"
+    }
+  }, /* @__PURE__ */React7.createElement(DashboardFilters, null), children);
+}, "DashboardHeader");
+
+// src/Dashboard.tsx
+var DashboardContent = /* @__PURE__ */__name(({
+  loading = false,
+  headerChildren
+}) => {
+  const {
+    selectedTemplate
+  } = useDashboard();
+  return /* @__PURE__ */React8.createElement(Flex6, {
+    sx: {
+      flexDirection: "column",
+      gap: "5",
+      padding: "2",
+      width: "100%"
+    }
+  }, /* @__PURE__ */React8.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React8.createElement(Divider, null), /* @__PURE__ */React8.createElement(DashboardGrid, {
+    loading,
+    selectedTemplate
+  }));
+}, "DashboardContent");
+var Dashboard = /* @__PURE__ */__name(({
+  loading = false,
+  templates = [],
+  filters = [],
+  headerChildren,
+  onFiltersChange
+}) => {
+  return /* @__PURE__ */React8.createElement(DashboardProvider, {
+    filters,
+    templates,
+    onFiltersChange
+  }, /* @__PURE__ */React8.createElement(DashboardContent, {
+    loading,
+    headerChildren
+  }));
+}, "Dashboard");
+export { Dashboard, DashboardCard, DashboardFilterType, DashboardFilters, DashboardGrid, DashboardHeader, DashboardProvider, useDashboard };

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import ReactGridLayout from 'react-grid-layout';
+import { DateRange } from '@ttoss/components/DatePicker';
+
+type CardNumberType = 'number' | 'percentage' | 'currency';
+type CardSourceType = {
+    source: 'meta' | 'oneclickads' | 'api';
+    level?: 'adAccount' | 'campaign' | 'adSet' | 'ad';
+};
+type DashboardCardType = 'bigNumber' | 'pieChart' | 'barChart' | 'lineChart' | 'table' | 'list';
+type DashboardCardData = {
+    meta?: {
+        total?: number;
+        daily?: number[];
+    };
+    api?: {
+        total?: number;
+        daily?: number[];
+    };
+};
+type CardVariant = 'default' | 'dark' | 'light-green';
+type TrendIndicator = {
+    value: number;
+    status?: 'positive' | 'negative' | 'neutral';
+};
+type StatusIndicator = {
+    text: string;
+    icon?: string;
+};
+interface DashboardCard {
+    title: string;
+    description?: string;
+    icon?: string;
+    color?: string;
+    variant?: CardVariant;
+    numberType: CardNumberType;
+    type: DashboardCardType;
+    sourceType: CardSourceType[];
+    labels?: Array<string | number>;
+    data: DashboardCardData;
+    trend?: TrendIndicator;
+    additionalInfo?: string;
+    status?: StatusIndicator;
+}
+declare const DashboardCard: (props: DashboardCard) => react_jsx_runtime.JSX.Element | null;
+
+type DashboardFilterValue = string | number | boolean | {
+    from: Date;
+    to: Date;
+};
+declare enum DashboardFilterType {
+    TEXT = "text",
+    SELECT = "select",
+    DATE_RANGE = "date-range",
+    NUMBER = "number",
+    BOOLEAN = "boolean"
+}
+type DashboardFilter = {
+    key: string;
+    type: DashboardFilterType;
+    label: string;
+    placeholder?: string;
+    value: DashboardFilterValue;
+    onChange?: (value: DashboardFilterValue) => void;
+    options?: {
+        label: string;
+        value: string | number | boolean;
+    }[];
+    presets?: {
+        label: string;
+        getValue: () => DateRange;
+    }[];
+};
+declare const DashboardFilters: () => react_jsx_runtime.JSX.Element;
+
+type DashboardGridItem = ReactGridLayout.Layout & {
+    card: DashboardCard;
+};
+interface DashboardTemplate {
+    id: string;
+    name: string;
+    description?: string;
+    grid: DashboardGridItem[];
+}
+declare const Dashboard: ({ loading, templates, filters, headerChildren, onFiltersChange, }: {
+    loading?: boolean;
+    headerChildren?: React.ReactNode;
+    templates?: DashboardTemplate[];
+    filters?: DashboardFilter[];
+    onFiltersChange?: (filters: DashboardFilter[]) => void;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const DashboardGrid: ({ loading, selectedTemplate, }: {
+    loading: boolean;
+    selectedTemplate?: DashboardTemplate;
+}) => react_jsx_runtime.JSX.Element | null;
+
+declare const DashboardHeader: ({ children, }: {
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const DashboardProvider: (props: {
+    children: React.ReactNode;
+    filters: DashboardFilter[];
+    templates: DashboardTemplate[];
+    onFiltersChange?: (filters: DashboardFilter[]) => void;
+}) => react_jsx_runtime.JSX.Element;
+declare const useDashboard: () => {
+    filters: DashboardFilter[];
+    updateFilter: (key: string, value: DashboardFilterValue) => void;
+    templates: DashboardTemplate[];
+    selectedTemplate: DashboardTemplate | undefined;
+};
+
+export { Dashboard, DashboardCard, type DashboardFilter, DashboardFilterType, type DashboardFilterValue, DashboardFilters, DashboardGrid, type DashboardGridItem, DashboardHeader, DashboardProvider, type DashboardTemplate, useDashboard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-dashboard",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "ttoss dashboard module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -26,10 +26,10 @@
   "dependencies": {
     "react-day-picker": "^9.11.3",
     "react-grid-layout": "^1.5.2",
-    "@ttoss/react-icons": "^0.5.6",
     "@ttoss/components": "^2.10.2",
+    "@ttoss/forms": "^0.36.0",
+    "@ttoss/react-icons": "^0.5.6",
     "@ttoss/react-i18n": "^2.0.25",
-    "@ttoss/forms": "^0.35.3",
     "@ttoss/ui": "^6.1.0"
   },
   "peerDependencies": {