@mailstep/design-system 0.8.51 → 0.9.0

package/ui/Modules/Dashboard/components/Widgets/PieChart/styles.d.ts

@@ -0,0 +1,14 @@
+import { DefaultRawDatum, PieLayer } from '@nivo/pie';
+export declare const margin: {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+export declare const layers: (centeredMetric?: ({ dataWithArc, centerX, centerY }: import("./components/CenteredMetric").CenteredMetricProps) => import("react").JSX.Element) => PieLayer<DefaultRawDatum>[];
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OtherText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/ui/Modules/Dashboard/components/Widgets/PieChart/styles.js

@@ -0,0 +1,47 @@
+import CenteredMetric from "./components/CenteredMetric.js";
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/styles.ts
+const margin = {
+	top: 20,
+	bottom: 120,
+	right: 20,
+	left: 100
+};
+const layers = (centeredMetric = CenteredMetric) => [
+	"arcs",
+	"arcLabels",
+	"arcLinkLabels",
+	"legends",
+	centeredMetric
+];
+const Title = styled.div`
+  font-size: 30px;
+  color: #333;
+  margin-bottom: 35px;
+`;
+const Subtitle = styled.div`
+  font-size: 20px;
+  color: #999;
+  margin-bottom: 5px;
+`;
+const Description = styled.div`
+  font-size: 22px;
+  color: #333;
+  margin-bottom: 15px;
+`;
+const OtherText = styled.div`
+  font-size: 15px;
+  color: #aaa;
+`;
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+const WrapperText = styled.div`
+  margin-right: 20px;
+  padding-left: 30px;
+  padding-top: 30px;
+`;
+//#endregion
+export { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, layers, margin };

package/ui/Modules/Dashboard/components/Widgets/Table/Config.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import { MultiConfigProps } from '../../Config/MultiConfig';
+import { Source } from '../../../types';
+import { TableColumn } from './types';
+export type TableConfigProps = MultiConfigProps & {
+    columns?: TableColumn[];
+    sources?: Source[];
+};
+export declare const Config: ({ onChange, config, columns, sources }: TableConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/Table/Config.js

@@ -0,0 +1,87 @@
+import Button_default from "../../../../../Elements/Button/index.js";
+import styles_default from "../../../styles.js";
+import Text, { useText } from "../../Text/Text.js";
+import { MultiConfig } from "../../Config/MultiConfig.js";
+import useCondition from "./hooks/useCondition.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/Config.tsx
+const Config = ({ onChange, config, columns, sources }) => {
+	const [add, remove, change] = useCondition(onChange, config);
+	const textAllColumns = useText("widgets.allColumns");
+	const textColumn = useText("widgets.column");
+	const textCondition = useText("widgets.condition");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MultiConfig, {
+		onChange,
+		config,
+		sources
+	}), /* @__PURE__ */ jsxs(styles_default.ConfigRow, {
+		isBlock: true,
+		children: [/* @__PURE__ */ jsxs(styles_default.ConfigLabel, { children: [/* @__PURE__ */ jsx(Text, { code: "widgets.conditions" }), ":"] }), /* @__PURE__ */ jsxs(styles_default.ConfigInput, { children: [config?.conditions?.map((cond, key) => /* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [
+			/* @__PURE__ */ jsxs(styles_default.Select, {
+				onChange: change(key, "column"),
+				value: cond.column || "",
+				width: "100px",
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						children: textColumn
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "all",
+						children: textAllColumns
+					}),
+					columns?.map?.((column, index) => /* @__PURE__ */ jsx("option", {
+						value: column.key,
+						children: column.label
+					}, `${column.key}-${index}`))
+				]
+			}),
+			/* @__PURE__ */ jsxs(styles_default.Select, {
+				onChange: change(key, "comparator"),
+				value: cond.comparator || "",
+				width: "100px",
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						children: textCondition
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "<",
+						children: "<"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: ">",
+						children: ">"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "=",
+						children: "="
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(styles_default.Input, {
+				onChange: change(key, "value"),
+				defaultValue: cond.value || "",
+				type: "text",
+				placeholder: "value",
+				width: "100px"
+			}),
+			/* @__PURE__ */ jsx(styles_default.Input, {
+				onChange: change(key, "color"),
+				defaultValue: cond.color || "",
+				type: "color"
+			}),
+			/* @__PURE__ */ jsx(Button_default, {
+				onClick: remove(key),
+				children: "🗑"
+			})
+		] }, key)), /* @__PURE__ */ jsx(Button_default, {
+			onClick: add,
+			children: "+"
+		})] })]
+	})] });
+};
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/Table/Table.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { TableProps } from './types';
+declare const Table: ({ data, columns, isLoading, error, onValueClick, onChange, onSaveConfigProps, config, hasPages, hasServerPages, hasSorting, hasServerSorting, innerRef, returnWidgetWithPaginationHeight, minRows, serverTotal, components, }: TableProps) => JSX.Element;
+export default Table;

package/ui/Modules/Dashboard/components/Widgets/Table/Table.js

@@ -0,0 +1,93 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import PaginatorLocation from "./components/PaginatorLocation.js";
+import styles_default$1 from "./styles.js";
+import PaginatorList from "./components/PaginatorList.js";
+import TableCell, { getColor } from "./components/TableCell.js";
+import { usePages } from "./hooks/usePages.js";
+import { useSort } from "./hooks/useSort.js";
+import React, { useCallback, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/Table.tsx
+const Table = ({ data = [], columns = [], isLoading, error, onValueClick, onChange, onSaveConfigProps, config = {}, hasPages = true, hasServerPages = false, hasSorting = true, hasServerSorting = false, innerRef, returnWidgetWithPaginationHeight, minRows, serverTotal, components }) => {
+	const onClick = useCallback((row, columnName) => () => onValueClick?.(row, columnName, config), [onValueClick, config]);
+	const { toggleSort, sort, sortedData } = useSort(data, !hasServerSorting, config?.sort);
+	const [tableRowRef, tHeadRef, paginatorRef] = [
+		useRef(null),
+		useRef(null),
+		useRef(null)
+	];
+	const { slicedData, page, from, to, perPage, setPage, pages, totalHeight } = usePages(sortedData, hasPages, innerRef, tHeadRef, paginatorRef, tableRowRef, minRows, hasServerPages, serverTotal);
+	const CustomPagination = components?.pagination;
+	React.useEffect(() => {
+		onChange?.(sort, {
+			page,
+			from,
+			to,
+			perPage
+		});
+	}, [
+		sort,
+		pages,
+		page,
+		from,
+		to,
+		perPage
+	]);
+	React.useEffect(() => {
+		returnWidgetWithPaginationHeight?.(totalHeight);
+	}, [totalHeight]);
+	React.useEffect(() => {
+		if (perPage > 0) onSaveConfigProps?.({
+			perPage,
+			...Object.keys(sort || {}).length > 0 ? { sort } : {}
+		});
+	}, [perPage, sort]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsxs(styles_default.ItemContent, {
+			ref: innerRef,
+			children: [
+				(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+				/* @__PURE__ */ jsxs(styles_default$1.Table, {
+					cellSpacing: "0",
+					cellPadding: "0",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+						ref: tHeadRef,
+						children: columns?.map?.((column, i) => /* @__PURE__ */ jsx(styles_default$1.Th, {
+							onClick: hasSorting ? toggleSort(column.key) : void 0,
+							sort: sort?.[column.key],
+							children: column.label
+						}, `column-${column.key}-${i}`))
+					}) }), /* @__PURE__ */ jsx("tbody", { children: slicedData.map((row) => /* @__PURE__ */ jsx(styles_default$1.Tr, {
+						ref: tableRowRef,
+						children: columns?.map?.((column) => /* @__PURE__ */ jsx(styles_default$1.Td, {
+							onClick: onValueClick && onClick(row, column.key),
+							color: getColor(config, column.key, row[column.key]),
+							children: /* @__PURE__ */ jsx(TableCell, {
+								data: row[column.key],
+								component: column.component
+							})
+						}, `row-${row.id}-column-${column.label}`))
+					}, `row-${row.id}`)) })]
+				}),
+				/* @__PURE__ */ jsxs(styles_default$1.Paginator, {
+					ref: paginatorRef,
+					children: [hasPages && perPage > 0 && !components?.pagination && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PaginatorLocation, {
+						from,
+						to,
+						total: serverTotal || data.length
+					}), /* @__PURE__ */ jsx(PaginatorList, {
+						total: pages,
+						page,
+						onChange: setPage
+					})] }), hasPages && perPage > 0 && components?.pagination && /* @__PURE__ */ jsx(CustomPagination, { perPage })]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Table as default };

package/ui/Modules/Dashboard/components/Widgets/Table/components/IconLabelCell.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export interface IconLabelCellProps {
+    icon?: string;
+    label?: string;
+    text?: string;
+    iconRight?: boolean;
+}
+export declare const IconLabelCell: ({ icon, label, text, iconRight }: IconLabelCellProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/Table/components/IconLabelCell.js

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../../../../../_virtual/_rolldown/runtime.js";
+import styles_default from "../styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/IconLabelCell.tsx
+var IconLabelCell_exports = /* @__PURE__ */ __exportAll({ IconLabelCell: () => IconLabelCell });
+const IconLabelCell = ({ icon, label, text, iconRight = false }) => /* @__PURE__ */ jsxs(styles_default.IconLabelCell, { children: [
+	icon && !iconRight && /* @__PURE__ */ jsx(styles_default.CellIcon, {
+		iconRight,
+		children: icon
+	}),
+	/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(styles_default.CellLabel, { children: label }), /* @__PURE__ */ jsx(styles_default.CellText, { children: text })] }),
+	icon && iconRight && /* @__PURE__ */ jsx(styles_default.CellIcon, {
+		iconRight,
+		children: icon
+	})
+] });
+//#endregion
+export { IconLabelCell, IconLabelCell_exports };

package/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorList.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+interface PaginatorListProps {
+    total: number;
+    page: number;
+    pagins?: number;
+    onChange: (page: number) => void;
+}
+declare const PaginatorList: ({ total, pagins, onChange, page }: PaginatorListProps) => JSX.Element | null;
+export default PaginatorList;

package/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorList.js

@@ -0,0 +1,31 @@
+import styles_default from "../styles.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorList.tsx
+const PaginatorList = ({ total, pagins = 7, onChange, page }) => {
+	const max = Math.min(page + pagins + 1, total);
+	const min = Math.round(Math.max(page - pagins / 2, 0));
+	const pages = Math.min(max - min, pagins);
+	const items = new Array(pages).fill(1).map((_, i) => i + min);
+	const onClick = useCallback((index) => () => onChange(index), [onChange]);
+	const onPreviousClick = useCallback(() => onChange(items[0] - 1), [items, onChange]);
+	const onNextClick = useCallback(() => onChange(page + 1), [page, onChange]);
+	if (total <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		items[0] > 0 && /* @__PURE__ */ jsx(styles_default.PaginatorItem, {
+			onClick: onPreviousClick,
+			children: "❮ "
+		}),
+		items.map((value) => /* @__PURE__ */ jsxs(styles_default.PaginatorItem, {
+			onClick: onClick(value),
+			selected: value === page,
+			children: [value + 1, " "]
+		}, value)),
+		page + 1 < total && /* @__PURE__ */ jsx(styles_default.PaginatorItem, {
+			onClick: onNextClick,
+			children: "❯"
+		})
+	] });
+};
+//#endregion
+export { PaginatorList as default };

package/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorLocation.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+interface PaginatorLocationProps {
+    from: number;
+    to: number;
+    total: number;
+}
+declare const PaginatorLocation: ({ from, to, total }: PaginatorLocationProps) => JSX.Element;
+export default PaginatorLocation;

package/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorLocation.js

@@ -0,0 +1,15 @@
+import "react";
+import { jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorLocation.tsx
+const PaginatorLocation = ({ from, to, total }) => /* @__PURE__ */ jsxs("span", { children: [
+	/* @__PURE__ */ jsxs("b", { children: [
+		from + 1,
+		"–",
+		to
+	] }),
+	" ",
+	"of ",
+	total
+] });
+//#endregion
+export { PaginatorLocation as default };

package/ui/Modules/Dashboard/components/Widgets/Table/components/TableCell.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import { WidgetConfig } from '../../../../types';
+import { TableCellProps } from '../types';
+declare const TableCell: ({ component: Cell, data }: TableCellProps) => JSX.Element;
+export declare const getColor: (config: WidgetConfig, columnKey: string, columnValue: any) => string;
+export default TableCell;

package/ui/Modules/Dashboard/components/Widgets/Table/components/TableCell.js

@@ -0,0 +1,33 @@
+import { IconLabelCell } from "./IconLabelCell.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/TableCell.tsx
+const TableCell = ({ component: Cell = IconLabelCell, data }) => /* @__PURE__ */ jsx(Cell, { ...data });
+const getColor = (config, columnKey, columnValue) => {
+	const isAllColumns = config?.conditions?.[0]?.column === "all";
+	const conditions = config?.conditions?.filter((c) => c.column === columnKey);
+	const value = columnValue !== void 0 && "value" in columnValue ? columnValue.value : columnValue;
+	let color = "";
+	const setColor = (condition) => {
+		const isNumberComparison = !Number.isNaN(Number(value)) && !Number.isNaN(Number(condition.value));
+		switch (condition.comparator) {
+			case ">":
+				if (isNumberComparison && value > condition.value) color = condition.color;
+				break;
+			case "<":
+				if (isNumberComparison && value < condition.value) color = condition.color;
+				break;
+			case "=":
+				if (String(value) === String(condition.value)) color = condition.color;
+				break;
+			default: break;
+		}
+	};
+	conditions?.forEach((condition) => {
+		setColor(condition);
+	});
+	if (isAllColumns) setColor(config.conditions[0]);
+	return color;
+};
+//#endregion
+export { TableCell as default, getColor };

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useCondition.d.ts

@@ -0,0 +1,10 @@
+import { ConfigProps } from '../../../../types';
+interface UseCondition {
+    (onChange: ConfigProps['onChange'], config: ConfigProps['config']): [
+        (e: React.MouseEvent<HTMLElement>) => void,
+        (index: number) => (e: React.MouseEvent<HTMLElement>) => void,
+        (index: number, name: string) => (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => void
+    ];
+}
+declare const useCondition: UseCondition;
+export default useCondition;

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useCondition.js

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/hooks/useCondition.ts
+const useCondition = (onChange, config) => {
+	return [
+		useCallback(() => onChange({
+			...config,
+			conditions: [...config?.conditions || [], {}]
+		}), [onChange, config]),
+		useCallback((index) => () => onChange({
+			...config,
+			conditions: config.conditions.filter((_, i) => i !== index)
+		}), [onChange, config]),
+		useCallback((index, name) => (e) => {
+			const newConditions = [...config.conditions];
+			newConditions[index] = {
+				...newConditions[index],
+				[name]: e.target.value
+			};
+			onChange({
+				...config,
+				conditions: newConditions
+			});
+		}, [config])
+	];
+};
+//#endregion
+export { useCondition as default };

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/usePages.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { TableRow } from '../types';
+interface UsePagesProps {
+    (data: TableRow[], enabled: boolean, wrapperRef: RefObject<HTMLDivElement> | ((node: HTMLDivElement) => void) | undefined, tHeadRef: RefObject<HTMLTableRowElement | null>, paginatorRef: RefObject<HTMLDivElement | null>, tableRowRef: RefObject<HTMLTableRowElement | null>, minRows?: number, useServer?: boolean, serverTotal?: number): Paginator;
+}
+type Paginator = {
+    slicedData: TableRow[];
+    pages: number;
+    page: number;
+    from: number;
+    to: number;
+    perPage: number;
+    setPage: (page: number) => void;
+    totalHeight: number;
+};
+export declare const usePages: UsePagesProps;
+export {};

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/usePages.js

@@ -0,0 +1,27 @@
+import { useResize } from "../../../../hooks/useResize.js";
+import { useState } from "react";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/hooks/usePages.ts
+const usePages = (data, enabled, wrapperRef, tHeadRef, paginatorRef, tableRowRef, minRows = 1, useServer, serverTotal) => {
+	const { height: wrapperHeight } = useResize(wrapperRef);
+	const { height: tableHeadHeight } = useResize(tHeadRef);
+	const { height: paginatorHeight } = useResize(paginatorRef);
+	const { height: rowHeight } = useResize(tableRowRef);
+	const [page, setPage] = useState(0);
+	const total = useServer ? serverTotal || 0 : data.length;
+	const space = Math.max(wrapperHeight - tableHeadHeight - paginatorHeight - 8, 0);
+	const perPage = rowHeight ? Math.floor(space / (rowHeight || 1)) || minRows : 0;
+	const from = page * perPage;
+	const to = Math.min(from + perPage, total);
+	return {
+		slicedData: enabled && perPage > 0 && !useServer ? data.slice(from, to) : data,
+		pages: Math.ceil(total / perPage),
+		page,
+		from,
+		to,
+		perPage,
+		setPage,
+		totalHeight: tableHeadHeight + paginatorHeight + (to - from) * rowHeight
+	};
+};
+//#endregion
+export { usePages };

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useSort.d.ts

@@ -0,0 +1,10 @@
+import { TableRow, WidgetSort } from '../types';
+interface UseSort {
+    (data: TableRow[], enabled: boolean, initialSort: WidgetSort | undefined): {
+        toggleSort: (column: string) => () => void;
+        sort: WidgetSort | null;
+        sortedData: TableRow[];
+    };
+}
+export declare const useSort: UseSort;
+export {};

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useSort.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import omit from "lodash/omit";
+import orderBy from "lodash/orderBy";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/hooks/useSort.ts
+const initialSortValue = {};
+const useSort = (data, enabled, initialSort = initialSortValue) => {
+	const [sort, setSort] = React.useState(initialSort);
+	const toggleSort = React.useCallback((column) => () => {
+		if (sort[column] === "desc") setSort(omit(sort, [column]));
+		else if (sort[column] === "asc") setSort({
+			...sort,
+			[column]: "desc"
+		});
+		else setSort({ [column]: "asc" });
+	}, [sort]);
+	useEffect(() => {
+		setSort(initialSort);
+	}, [initialSort]);
+	if (enabled) return {
+		toggleSort,
+		sort,
+		sortedData: orderBy(data, Object.keys(sort).map((column) => `${column}.value`), Object.values(sort))
+	};
+	return {
+		toggleSort,
+		sort,
+		sortedData: data
+	};
+};
+//#endregion
+export { useSort };

package/ui/Modules/Dashboard/components/Widgets/Table/index.d.ts

@@ -0,0 +1,5 @@
+import Table from './Table';
+export * from './Table';
+export * as components from './components/IconLabelCell';
+export * from './Config';
+export default Table;

package/ui/Modules/Dashboard/components/Widgets/Table/index.js

@@ -0,0 +1,7 @@
+import { IconLabelCell_exports } from "./components/IconLabelCell.js";
+import Table from "./Table.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/index.tsx
+var Table_default = Table;
+//#endregion
+export { Config, IconLabelCell_exports as components, Table_default as default };

package/ui/Modules/Dashboard/components/Widgets/Table/storybook.sample.d.ts

@@ -0,0 +1,73 @@
+import { components } from '.';
+export declare const tableData: {
+    id: string;
+    company: {
+        icon: string;
+        label: string;
+        value: string;
+        text: string;
+    };
+    category: {
+        icon: string;
+        label: string;
+        value: string;
+    };
+    views: {
+        label: string;
+        value: number;
+        text: string;
+    };
+    revenue: {
+        label: string;
+        value: number;
+    };
+    sales: {
+        icon: string;
+        label: string;
+        value: number;
+    };
+}[];
+export declare const tableBigData: {
+    id: number;
+    readableId: {
+        text: number;
+    };
+    company: {
+        icon: string;
+        label: string;
+        value: string;
+        text: string;
+    };
+    category: {
+        icon: string;
+        label: string;
+        value: string;
+    };
+    views: {
+        label: number;
+        value: number;
+        text: string;
+    };
+    revenue: {
+        label: string;
+        value: number;
+    };
+    sales: {
+        icon: string;
+        label: string;
+        value: number;
+    };
+}[];
+export declare const tableColumns: ({
+    key: string;
+    label: string;
+    component?: undefined;
+} | {
+    key: string;
+    label: string;
+    component: ({ icon, label, text, iconRight }: components.IconLabelCellProps) => import("react").JSX.Element;
+} | {
+    key: string;
+    label: string;
+    component: import("react").ComponentType<components.IconLabelCellProps>;
+})[];