@ttoss/react-dashboard 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-dashboard",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "ttoss dashboard module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -26,11 +26,11 @@
   "dependencies": {
     "react-day-picker": "^9.11.3",
     "react-grid-layout": "^1.5.2",
-    "@ttoss/components": "^2.11.7",
+    "@ttoss/components": "^2.12.1",
+    "@ttoss/react-icons": "^0.5.6",
+    "@ttoss/forms": "^0.37.3",
     "@ttoss/react-i18n": "^2.0.25",
-    "@ttoss/forms": "^0.37.1",
-    "@ttoss/ui": "^6.4.0",
-    "@ttoss/react-icons": "^0.5.6"
+    "@ttoss/ui": "^6.4.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/dist/esm/index.js

@@ -1,599 +0,0 @@
-/** 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";
-
-// 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 "feedback.text.positive.default";
-  }
-  if (status === "negative") {
-    return "feedback.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), ["positive", "negative"].includes(props.trend?.status || "") && /* @__PURE__ */React.createElement(Text2, {
-    sx: {
-      color: getTrendColor(props.trend.status),
-      fontSize: "sm",
-      fontWeight: "medium"
-    }
-  }, props.trend.status === "positive" ? "+" : "", 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,
-    selectedTemplate
-  } = 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
-  );
-  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,
-  selectedTemplate
-}) => {
-  return /* @__PURE__ */React.createElement(Flex6, {
-    sx: {
-      flexDirection: "column",
-      gap: "5",
-      padding: "2",
-      width: "100%"
-    }
-  }, /* @__PURE__ */React.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React.createElement(Divider, null), /* @__PURE__ */React.createElement(DashboardGrid, {
-    loading,
-    selectedTemplate
-  }));
-}, "DashboardContent");
-var Dashboard = /* @__PURE__ */__name(({
-  selectedTemplate,
-  loading = false,
-  templates = [],
-  filters = [],
-  headerChildren,
-  onFiltersChange
-}) => {
-  return /* @__PURE__ */React.createElement(DashboardProvider, {
-    filters,
-    templates,
-    onFiltersChange,
-    selectedTemplate
-  }, /* @__PURE__ */React.createElement(DashboardContent, {
-    loading,
-    headerChildren,
-    selectedTemplate
-  }));
-}, "Dashboard");
-export { Dashboard, DashboardCard, DashboardFilterType, DashboardFilters, DashboardGrid, DashboardHeader, DashboardProvider, useDashboard };

package/dist/index.d.ts

@@ -1,126 +0,0 @@
-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?: 'higher' | 'lower';
-};
-type StatusIndicator = {
-    text: string;
-    icon?: string;
-};
-type SourceType = CardSourceType['source'];
-type MetricsRecord = {
-    [K in SourceType]: {
-        [P in K]: string[];
-    } & Partial<Record<Exclude<SourceType, K>, string[]>>;
-}[SourceType];
-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;
-    metrics?: MetricsRecord[];
-}
-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: ({ selectedTemplate, loading, templates, filters, headerChildren, onFiltersChange, }: {
-    selectedTemplate?: DashboardTemplate;
-    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;
-    selectedTemplate?: DashboardTemplate;
-}) => 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 };