@ttoss/react-dashboard 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024, Terezinha Tech Operations (ttoss)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,539 @@
+# @ttoss/react-dashboard
+
+## About
+
+A comprehensive React dashboard module that provides fully customizable dashboard functionality with filters, templates, and responsive grid layouts. This module enables you to create data-rich dashboards with support for multiple card types, filter systems, and template management.
+
+## Installation
+
+```shell
+pnpm add @ttoss/react-dashboard @ttoss/components @ttoss/react-icons @ttoss/ui @emotion/react react-day-picker react-grid-layout
+```
+
+## Getting Started
+
+### Provider Setup
+
+If you're using the `Dashboard` component directly, you don't need to set up the provider separately as it wraps the `DashboardProvider` internally. However, if you need to use the `useDashboard` hook in other components, you can wrap your application with the `DashboardProvider`:
+
+```tsx
+import { DashboardProvider } from '@ttoss/react-dashboard';
+import { ThemeProvider } from '@ttoss/ui';
+import type {
+  DashboardTemplate,
+  DashboardFilter,
+} from '@ttoss/react-dashboard';
+
+const templates: DashboardTemplate[] = [];
+const filters: DashboardFilter[] = [];
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <DashboardProvider filters={filters} templates={templates}>
+        <App />
+      </DashboardProvider>
+    </ThemeProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+```
+
+### Basic Dashboard Usage
+
+```tsx
+import { Dashboard } from '@ttoss/react-dashboard';
+import type {
+  DashboardTemplate,
+  DashboardFilter,
+} from '@ttoss/react-dashboard';
+import { DashboardFilterType } from '@ttoss/react-dashboard';
+
+const MyDashboard = () => {
+  const templates: DashboardTemplate[] = [
+    {
+      id: 'default',
+      name: 'Default Template',
+      description: 'My default dashboard layout',
+      grid: [
+        {
+          i: 'card-1',
+          x: 0,
+          y: 0,
+          w: 4,
+          h: 4,
+          card: {
+            title: 'Total Revenue',
+            numberType: 'currency',
+            type: 'bigNumber',
+            sourceType: [{ source: 'api' }],
+            data: {
+              api: { total: 150000 },
+            },
+          },
+        },
+      ],
+    },
+  ];
+
+  const filters: DashboardFilter[] = [
+    {
+      key: 'date-range',
+      type: DashboardFilterType.DATE_RANGE,
+      label: 'Date Range',
+      value: { from: new Date(), to: new Date() },
+    },
+  ];
+
+  return <Dashboard templates={templates} filters={filters} loading={false} />;
+};
+```
+
+## Components
+
+### Dashboard
+
+The main dashboard component that orchestrates the entire dashboard experience.
+
+```tsx
+import { Dashboard } from '@ttoss/react-dashboard';
+
+<Dashboard
+  templates={templates}
+  filters={filters}
+  loading={false}
+  headerChildren={<CustomHeaderContent />}
+  onFiltersChange={(filters) => {
+    // Handle filter changes
+  }}
+/>;
+```
+
+**Props:**
+
+| Prop              | Type                                   | Default | Description                                |
+| ----------------- | -------------------------------------- | ------- | ------------------------------------------ |
+| `templates`       | `DashboardTemplate[]`                  | `[]`    | Array of dashboard templates               |
+| `filters`         | `DashboardFilter[]`                    | `[]`    | Array of dashboard filters                 |
+| `loading`         | `boolean`                              | `false` | Loading state for the dashboard            |
+| `headerChildren`  | `React.ReactNode`                      | -       | Additional content to render in the header |
+| `onFiltersChange` | `(filters: DashboardFilter[]) => void` | -       | Callback when filters change               |
+
+### DashboardProvider
+
+Context provider that manages dashboard state (filters and templates).
+
+```tsx
+import { DashboardProvider } from '@ttoss/react-dashboard';
+
+<DashboardProvider
+  filters={filters}
+  templates={templates}
+  onFiltersChange={handleFiltersChange}
+>
+  {children}
+</DashboardProvider>;
+```
+
+**Props:**
+
+| Prop              | Type                                   | Default | Description                  |
+| ----------------- | -------------------------------------- | ------- | ---------------------------- |
+| `children`        | `React.ReactNode`                      | -       | Child components             |
+| `filters`         | `DashboardFilter[]`                    | `[]`    | Filter state                 |
+| `templates`       | `DashboardTemplate[]`                  | `[]`    | Template state               |
+| `onFiltersChange` | `(filters: DashboardFilter[]) => void` | -       | Callback when filters change |
+
+### useDashboard Hook
+
+Hook to access and modify dashboard state.
+
+```tsx
+import { useDashboard } from '@ttoss/react-dashboard';
+
+const MyComponent = () => {
+  const { filters, updateFilter, templates, selectedTemplate } = useDashboard();
+
+  // Use dashboard state
+  const handleFilterChange = (key: string, value: DashboardFilterValue) => {
+    updateFilter(key, value);
+  };
+};
+```
+
+**Returns:**
+
+| Property           | Type                                                 | Description                                  |
+| ------------------ | ---------------------------------------------------- | -------------------------------------------- |
+| `filters`          | `DashboardFilter[]`                                  | Current filter state                         |
+| `updateFilter`     | `(key: string, value: DashboardFilterValue) => void` | Function to update a specific filter by key  |
+| `templates`        | `DashboardTemplate[]`                                | Current template state                       |
+| `selectedTemplate` | `DashboardTemplate \| undefined`                     | Currently selected template based on filters |
+
+### DashboardCard
+
+Component for rendering individual dashboard cards. Currently supports `bigNumber` type.
+
+```tsx
+import { DashboardCard } from '@ttoss/react-dashboard';
+
+<DashboardCard
+  title="Total Revenue"
+  description="Revenue from all sources"
+  numberType="currency"
+  type="bigNumber"
+  sourceType={[{ source: 'api' }]}
+  data={{
+    api: { total: 150000 },
+  }}
+  trend={{
+    value: 15.5,
+    status: 'positive',
+  }}
+/>;
+```
+
+**Props:**
+
+| Prop             | Type                      | Default | Description                                                                               |
+| ---------------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `title`          | `string`                  | -       | Card title                                                                                |
+| `description`    | `string`                  | -       | Optional card description                                                                 |
+| `icon`           | `string`                  | -       | Optional icon name                                                                        |
+| `color`          | `string`                  | -       | Optional color for the card                                                               |
+| `variant`        | `CardVariant`             | -       | Card variant (`'default' \| 'dark' \| 'light-green'`)                                     |
+| `numberType`     | `CardNumberType`          | -       | Number formatting type (`'number' \| 'percentage' \| 'currency'`)                         |
+| `type`           | `DashboardCardType`       | -       | Card type (`'bigNumber' \| 'pieChart' \| 'barChart' \| 'lineChart' \| 'table' \| 'list'`) |
+| `sourceType`     | `CardSourceType[]`        | -       | Data source configuration                                                                 |
+| `labels`         | `Array<string \| number>` | -       | Optional labels for the card                                                              |
+| `data`           | `DashboardCardData`       | -       | Card data from various sources                                                            |
+| `trend`          | `TrendIndicator`          | -       | Optional trend indicator                                                                  |
+| `additionalInfo` | `string`                  | -       | Optional additional information text                                                      |
+| `status`         | `StatusIndicator`         | -       | Optional status indicator                                                                 |
+
+### DashboardFilters
+
+Component that automatically renders filters based on the dashboard state.
+
+```tsx
+import { DashboardFilters } from '@ttoss/react-dashboard';
+
+// Automatically renders filters from DashboardProvider context
+<DashboardFilters />;
+```
+
+This component reads filters from the `DashboardProvider` context and renders the appropriate filter component for each filter type.
+
+### DashboardHeader
+
+Header component that displays filters and optional custom content.
+
+```tsx
+import { DashboardHeader } from '@ttoss/react-dashboard';
+
+<DashboardHeader>
+  <CustomActionButtons />
+</DashboardHeader>;
+```
+
+**Props:**
+
+| Prop       | Type              | Description                          |
+| ---------- | ----------------- | ------------------------------------ |
+| `children` | `React.ReactNode` | Optional content to render in header |
+
+### DashboardGrid
+
+Responsive grid layout component that displays dashboard cards using `react-grid-layout`.
+
+```tsx
+import { DashboardGrid } from '@ttoss/react-dashboard';
+
+<DashboardGrid loading={false} />;
+```
+
+**Props:**
+
+| Prop      | Type      | Default | Description                   |
+| --------- | --------- | ------- | ----------------------------- |
+| `loading` | `boolean` | -       | Shows loading spinner if true |
+
+## Filter Types
+
+### Text Filter
+
+A text input filter for string values.
+
+```tsx
+import { DashboardFilterType } from '@ttoss/react-dashboard';
+
+const textFilter: DashboardFilter = {
+  key: 'search',
+  type: DashboardFilterType.TEXT,
+  label: 'Search',
+  placeholder: 'Enter search term...',
+  value: '',
+  onChange: (value) => {
+    console.log('Search:', value);
+  },
+};
+```
+
+### Select Filter
+
+A dropdown select filter for predefined options.
+
+```tsx
+const selectFilter: DashboardFilter = {
+  key: 'status',
+  type: DashboardFilterType.SELECT,
+  label: 'Status',
+  value: 'active',
+  options: [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+  ],
+  onChange: (value) => {
+    console.log('Status:', value);
+  },
+};
+```
+
+### Date Range Filter
+
+A date range picker with optional presets.
+
+```tsx
+const dateRangeFilter: DashboardFilter = {
+  key: 'date-range',
+  type: DashboardFilterType.DATE_RANGE,
+  label: 'Date Range',
+  value: { from: new Date(), to: new Date() },
+  presets: [
+    {
+      label: 'Last 7 days',
+      getValue: () => ({
+        from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+        to: new Date(),
+      }),
+    },
+    {
+      label: 'Last 30 days',
+      getValue: () => ({
+        from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+        to: new Date(),
+      }),
+    },
+  ],
+  onChange: (value) => {
+    console.log('Date range:', value);
+  },
+};
+```
+
+## Types
+
+### DashboardTemplate
+
+```tsx
+interface DashboardTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  grid: DashboardGridItem[];
+}
+```
+
+### DashboardGridItem
+
+```tsx
+interface DashboardGridItem extends ReactGridLayout.Layout {
+  card: DashboardCard;
+}
+```
+
+### DashboardFilter
+
+```tsx
+interface 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 }[];
+}
+```
+
+### DashboardFilterValue
+
+```tsx
+type DashboardFilterValue =
+  | string
+  | number
+  | boolean
+  | { from: Date; to: Date };
+```
+
+### DashboardFilterType
+
+```tsx
+enum DashboardFilterType {
+  TEXT = 'text',
+  SELECT = 'select',
+  DATE_RANGE = 'date-range',
+  NUMBER = 'number',
+  BOOLEAN = 'boolean',
+}
+```
+
+### DashboardCard
+
+See [DashboardCard](#dashboardcard) section for full interface.
+
+### CardNumberType
+
+```tsx
+type CardNumberType = 'number' | 'percentage' | 'currency';
+```
+
+### CardSourceType
+
+```tsx
+type CardSourceType = {
+  source: 'meta' | 'oneclickads' | 'api';
+  level?: 'adAccount' | 'campaign' | 'adSet' | 'ad';
+};
+```
+
+### DashboardCardType
+
+```tsx
+type DashboardCardType =
+  | 'bigNumber'
+  | 'pieChart'
+  | 'barChart'
+  | 'lineChart'
+  | 'table'
+  | 'list';
+```
+
+### CardVariant
+
+```tsx
+type CardVariant = 'default' | 'dark' | 'light-green';
+```
+
+## Complete Example
+
+```tsx
+import { Dashboard } from '@ttoss/react-dashboard';
+import type {
+  DashboardTemplate,
+  DashboardFilter,
+} from '@ttoss/react-dashboard';
+import { DashboardFilterType } from '@ttoss/react-dashboard';
+
+const App = () => {
+  const templates: DashboardTemplate[] = [
+    {
+      id: 'default',
+      name: 'Default Dashboard',
+      grid: [
+        {
+          i: 'revenue',
+          x: 0,
+          y: 0,
+          w: 4,
+          h: 4,
+          card: {
+            title: 'Total Revenue',
+            numberType: 'currency',
+            type: 'bigNumber',
+            sourceType: [{ source: 'api' }],
+            data: {
+              api: { total: 150000 },
+            },
+            trend: {
+              value: 15.5,
+              status: 'positive',
+            },
+          },
+        },
+        {
+          i: 'roas',
+          x: 4,
+          y: 0,
+          w: 4,
+          h: 4,
+          card: {
+            title: 'ROAS',
+            numberType: 'number',
+            type: 'bigNumber',
+            sourceType: [{ source: 'api' }],
+            data: {
+              api: { total: 3.5 },
+            },
+            variant: 'light-green',
+          },
+        },
+      ],
+    },
+  ];
+
+  const filters: DashboardFilter[] = [
+    {
+      key: 'template',
+      type: DashboardFilterType.SELECT,
+      label: 'Template',
+      value: 'default',
+      options: [{ label: 'Default Dashboard', value: 'default' }],
+    },
+    {
+      key: 'date-range',
+      type: DashboardFilterType.DATE_RANGE,
+      label: 'Date Range',
+      value: {
+        from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+        to: new Date(),
+      },
+      presets: [
+        {
+          label: 'Last 7 days',
+          getValue: () => ({
+            from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+            to: new Date(),
+          }),
+        },
+        {
+          label: 'Last 30 days',
+          getValue: () => ({
+            from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+            to: new Date(),
+          }),
+        },
+      ],
+    },
+  ];
+
+  const handleFiltersChange = (updatedFilters: DashboardFilter[]) => {
+    console.log('Filters changed:', updatedFilters);
+    // Update your data fetching logic here
+  };
+
+  return (
+    <Dashboard
+      templates={templates}
+      filters={filters}
+      loading={false}
+      onFiltersChange={handleFiltersChange}
+    />
+  );
+};
+```
+
+## License
+
+[MIT](https://github.com/ttoss/ttoss/blob/main/LICENSE)

package/dist/esm/index.js

@@ -0,0 +1,611 @@
+/** 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 * as React3 from "react";
+import { FormProvider, useForm } from "react-hook-form";
+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 } from "@ttoss/forms";
+import * as React4 from "react";
+import { FormProvider as FormProvider2, useForm as useForm2 } from "react-hook-form";
+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 } from "@ttoss/forms";
+import * as React5 from "react";
+import { FormProvider as FormProvider3, useForm as useForm3 } from "react-hook-form";
+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

@@ -0,0 +1,59 @@
+{
+  "name": "@ttoss/react-dashboard",
+  "version": "0.1.1",
+  "description": "ttoss dashboard module for React apps.",
+  "license": "MIT",
+  "author": "ttoss",
+  "contributors": [
+    "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ttoss/ttoss.git",
+    "directory": "packages/react-dashboard"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-day-picker": "^9.11.2",
+    "react-grid-layout": "^1.5.2",
+    "react-hook-form": "^7.66.1",
+    "@ttoss/components": "^2.10.1",
+    "@ttoss/forms": "^0.35.2",
+    "@ttoss/config": "^1.35.12",
+    "@ttoss/test-utils": "^4.0.1",
+    "@ttoss/react-icons": "^0.5.5",
+    "@ttoss/ui": "^6.0.4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.6",
+    "@types/react-grid-layout": "^1.3.6",
+    "jest": "^30.2.0",
+    "react-hook-form": "^7.66.1",
+    "tsup": "^8.5.1",
+    "@ttoss/components": "^2.10.1",
+    "@ttoss/forms": "^0.35.2"
+  },
+  "keywords": [
+    "React",
+    "dashboard"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "jest --projects tests/unit"
+  }
+}