@tap-payments/os-micro-frontend-shared 0.1.365-test.2 → 0.1.365-test.21

package/build/components/ActivityAreaChart/ActivityAreaChart.js

@@ -1,43 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
-import { useTheme } from '@mui/material/styles';
-import { ChartTooltip, LoadingChart } from './components';
+import { ChartTooltip, LoadingChart, ChartLegend, LEGENDS } from './components';
 const ActivityAreaChart = ({ data, dataKey, isLoading, dateRange, selectedCurrency }) => {
-    const theme = useTheme();
     const [chartHovered, setChartHovered] = useState(false);
     const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const [activeLegend, setActiveLegend] = useState(LEGENDS.CHARGE.key);
     const isEmpty = (data === null || data === void 0 ? void 0 : data.length) === 0;
+    const isAmountDataKeyActive = dataKey === 'amount';
     const handleMouseMove = (e) => {
         if (e.activeCoordinate && e.isTooltipActive) {
             setCursorPosition(e.activeCoordinate);
         }
     };
     const MemoizedChartTooltip = useMemo(() => {
-        return _jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency });
+        return (_jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency, activeLegend: activeLegend, activeDataKey: dataKey }));
     }, [cursorPosition]);
     if (isLoading || isEmpty) {
         return _jsx(LoadingChart, {});
     }
-    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: {
-                top: 20,
-            }, data: data, onMouseMove: handleMouseMove }, { children: [data.length > 0 && (_jsx(Tooltip, { content: MemoizedChartTooltip, cursor: {
-                        fill: '#A5A8A3',
-                        stroke: '#A5A8A3',
-                        strokeWidth: 1,
-                        strokeOpacity: 1,
-                        stopOpacity: 0.3,
-                        strokeDasharray: '5 5',
-                        strokeLinecap: 'round',
-                        strokeLinejoin: 'round',
-                    } })), _jsx(Area, { dataKey: dataKey, type: "monotone", fill: "#76BB4012", stroke: theme.palette.success.dark, activeDot: {
-                        r: 5,
-                        fill: theme.palette.success.dark,
-                        strokeWidth: 2,
-                        stroke: 'white',
-                        cursor: chartHovered ? 'pointer' : 'default',
-                        onMouseOver: () => setChartHovered(true),
-                        onMouseLeave: () => setChartHovered(false),
-                    } })] })) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: { top: 20 }, data: data, onMouseMove: handleMouseMove }, { children: [(data === null || data === void 0 ? void 0 : data.length) > 0 && (_jsx(Tooltip, { content: MemoizedChartTooltip, cursor: {
+                                fill: '#A5A8A3',
+                                stroke: '#A5A8A3',
+                                strokeWidth: 1,
+                                strokeOpacity: 1,
+                                stopOpacity: 0.3,
+                                strokeDasharray: '5 5',
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                            } })), activeLegend === LEGENDS.REFUNDS.key && (_jsx(Area, { dataKey: isAmountDataKeyActive ? 'refundAmount' : 'refundCount', type: "monotone", stackId: "1", fill: "#5E30EB07", stroke: LEGENDS.REFUNDS.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.REFUNDS.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.REFUNDS.key}`)), _jsx(Area, { dataKey: isAmountDataKeyActive ? 'chargeAmount' : 'chargedCount', type: "monotone", stackId: "1", fill: "#76BB4007", stroke: LEGENDS.TRANSACTIONS.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.TRANSACTIONS.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.TRANSACTIONS.key}`), activeLegend === LEGENDS.CHARGE.key && (_jsx(Area, { dataKey: "chargeRateValue", type: "monotone", stackId: "1", fill: "#1F88D007", stroke: LEGENDS.CHARGE.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.CHARGE.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.CHARGE.key}`))] })) }), _jsx(ChartLegend, { activeLegend: activeLegend, onSelectLegend: setActiveLegend })] }));
 };
 export default ActivityAreaChart;

package/build/components/ActivityAreaChart/components/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@mui/material/Box';
+import { LegendKey } from './type';
+interface ChartLegendProps extends BoxProps {
+    activeLegend: LegendKey;
+    onSelectLegend: (key: LegendKey) => void;
+}
+export declare const ChartLegend: ({ activeLegend, onSelectLegend }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ActivityAreaChart/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,31 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { MenuItem } from '../../../index.js';
+import { downArrowIcon } from '../../../../constants/index.js';
+import { LegendLabel } from './LegendLabel';
+import { LEGENDS } from './constant';
+import { ChartLegendContainer, StyledMenu, LegendWrapper } from './style';
+export const ChartLegend = ({ activeLegend, onSelectLegend }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const active = LEGENDS[activeLegend];
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const onSelect = (key) => {
+        onSelectLegend(key);
+        onClose();
+    };
+    return (_jsxs(ChartLegendContainer, Object.assign({ sx: {
+            backgroundImage: activeLegend === LEGENDS.REFUNDS.key
+                ? 'linear-gradient(180deg, rgba(94, 48, 235, 0.025) 38.02%, rgba(255, 255, 255, 0) 99.99%)'
+                : 'linear-gradient(180deg, rgba(118, 187, 64, 0.025) 49.57%, rgba(255, 255, 255, 0) 100%)',
+        } }, { children: [_jsx(LegendLabel, Object.assign({}, LEGENDS.TRANSACTIONS)), _jsxs(LegendWrapper, Object.assign({ onMouseEnter: onOpen, onMouseLeave: onClose }, { children: [_jsx(LegendLabel, Object.assign({}, active)), _jsx(Box, { component: "img", src: downArrowIcon, alt: "down arrow", sx: { width: 15, marginTop: '2px' } }), _jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: Object.values(LEGENDS)
+                            .filter((l) => l.key !== activeLegend && l.key !== LEGENDS.TRANSACTIONS.key)
+                            .map((legend) => (_jsx(MenuItem, Object.assign({ hideCheckbox: true, onClick: () => onSelect(legend.key) }, { children: _createElement(LegendLabel, Object.assign({}, legend, { key: legend.key })) }), legend.key))) }))] }))] })));
+};

package/build/components/ActivityAreaChart/components/ChartLegend/LegendLabel.d.ts

@@ -0,0 +1,6 @@
+interface LegendLabelProps {
+    label: string;
+    color: string;
+}
+export declare const LegendLabel: ({ label, color }: LegendLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ActivityAreaChart/components/ChartLegend/LegendLabel.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { Text } from '../../../index.js';
+export const LegendLabel = ({ label, color }) => (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { background: color, width: 8, height: 8, borderRadius: '50%' } }), _jsx(Text, Object.assign({ sx: { fontWeight: 500, fontSize: '11px' } }, { children: label }))] })));

package/build/components/ActivityAreaChart/components/ChartLegend/constant.d.ts

@@ -0,0 +1,17 @@
+export declare const LEGENDS: {
+    readonly TRANSACTIONS: {
+        readonly key: "TRANSACTIONS";
+        readonly label: "Transactions";
+        readonly color: "rgb(118, 187, 64)";
+    };
+    readonly REFUNDS: {
+        readonly key: "REFUNDS";
+        readonly label: "Refunds";
+        readonly color: "rgb(94, 48, 235)";
+    };
+    readonly CHARGE: {
+        readonly key: "CHARGE";
+        readonly label: "Charge rate";
+        readonly color: "rgb(31, 136, 208)";
+    };
+};

package/build/components/ActivityAreaChart/components/ChartLegend/constant.js

@@ -0,0 +1,17 @@
+export const LEGENDS = {
+    TRANSACTIONS: {
+        key: 'TRANSACTIONS',
+        label: 'Transactions',
+        color: 'rgb(118, 187, 64)',
+    },
+    REFUNDS: {
+        key: 'REFUNDS',
+        label: 'Refunds',
+        color: 'rgb(94, 48, 235)',
+    },
+    CHARGE: {
+        key: 'CHARGE',
+        label: 'Charge rate',
+        color: 'rgb(31, 136, 208)',
+    },
+};

package/build/components/ActivityAreaChart/components/ChartLegend/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ChartLegend';
+export * from './constant';
+export * from './type';

package/build/components/ActivityAreaChart/components/ChartLegend/index.js

@@ -0,0 +1,3 @@
+export * from './ChartLegend';
+export * from './constant';
+export * from './type';

package/build/components/ActivityAreaChart/components/ChartLegend/style.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ChartLegendContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<Omit<import("../../../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LegendWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ActivityAreaChart/components/ChartLegend/style.js

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Menu from '../../../Menu';
+export const ChartLegendContainer = styled(Box)(() => ({
+    padding: '8px 16px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    position: 'relative',
+}));
+export const StyledMenu = styled(Menu)(() => ({
+    marginTop: '8px',
+    marginBottom: '8px',
+    maxHeight: '190px',
+    overflow: 'auto',
+    minWidth: '100px',
+}));
+export const LegendWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+    cursor: 'pointer',
+}));

package/build/components/ActivityAreaChart/components/ChartLegend/type.d.ts

@@ -0,0 +1,2 @@
+import { LEGENDS } from './constant';
+export type LegendKey = keyof typeof LEGENDS;

package/build/components/ActivityAreaChart/components/ChartLegend/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/ActivityAreaChart/components/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,2 @@
+import { ChartTooltipProps } from '../../types';
+export declare const ChartTooltip: ({ active, payload, dateRange, activeLegend, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

package/build/components/ActivityAreaChart/components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
+import { TooltipContainer, TimeTypography, ValueTypography } from '../../styles';
+import { 
+// getTooltipFormattedValue,
+getFormattedDateWithTimezone, } from '../../utils';
+import Text from '../../../Text';
+import { LEGENDS } from '../ChartLegend';
+export const ChartTooltip = ({ active, payload, dateRange, 
+// selectedCurrency,
+activeLegend, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
+    const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
+    const isSingleDay = dateRangeFrom === null || dateRangeFrom === void 0 ? void 0 : dateRangeFrom.isSame(dateRangeTo, 'day');
+    if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
+        const point = payload[0];
+        // const localizedUnitLabel = getLocalizedUnitLabel(activeDataKey, point?.value)
+        const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
+        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsx(ValueTypography, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px' } }, { children: [activeLegend === LEGENDS.CHARGE.key && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.CHARGE.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_e = point.payload) === null || _e === void 0 ? void 0 : _e.chargeRate} Charge Rate` }))] }))), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.TRANSACTIONS.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_f = point.payload) === null || _f === void 0 ? void 0 : _f.chargeCount} Transactions` }))] })), activeLegend === LEGENDS.REFUNDS.key && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.REFUNDS.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_g = point.payload) === null || _g === void 0 ? void 0 : _g.chargeCount} Refunds` }))] })))] })) })] })));
+    }
+    return null;
+};

package/build/components/ActivityAreaChart/components/ChartTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/build/components/ActivityAreaChart/components/ChartTooltip/index.js

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/build/components/ActivityAreaChart/components/LoadingChart/LoadingChart.d.ts

@@ -0,0 +1 @@
+export declare const LoadingChart: () => import("react/jsx-runtime").JSX.Element;

package/build/components/ActivityAreaChart/components/{LoadingChart.js → LoadingChart/LoadingChart.js}

@@ -10,9 +10,8 @@ const loadingData = [
     { dataKey: 94.3882 },
     { dataKey: 110.406 },
 ];
-const LoadingChart = () => {
+export const LoadingChart = () => {
     return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: {
                 top: 40,
             }, data: loadingData }, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: "loadingGradient", x1: "0", y1: "0", x2: "0", y2: "1", gradientUnits: "objectBoundingBox" }, { children: [_jsx("stop", { offset: "0.54", stopColor: "rgba(67, 67, 67, 0.035)" }), _jsx("stop", { offset: "1", stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx(Area, { dataKey: "dataKey", type: "linear", fill: "url(#loadingGradient)", fillOpacity: 1, stroke: "#C2C2C2", strokeWidth: 1, strokeLinecap: "round", strokeDasharray: "4 4", activeDot: false })] })) }));
 };
-export default LoadingChart;

package/build/components/ActivityAreaChart/components/LoadingChart/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingChart';

package/build/components/ActivityAreaChart/components/LoadingChart/index.js

@@ -0,0 +1 @@
+export * from './LoadingChart';

package/build/components/ActivityAreaChart/components/index.d.ts

@@ -1,2 +1,3 @@
-export { default as ChartTooltip } from './ChartTooltip';
-export { default as LoadingChart } from './LoadingChart';
+export * from './ChartTooltip';
+export * from './LoadingChart';
+export * from './ChartLegend';

package/build/components/ActivityAreaChart/components/index.js

@@ -1,2 +1,3 @@
-export { default as ChartTooltip } from './ChartTooltip';
-export { default as LoadingChart } from './LoadingChart';
+export * from './ChartTooltip';
+export * from './LoadingChart';
+export * from './ChartLegend';

package/build/components/ActivityAreaChart/styles.d.ts

@@ -13,4 +13,6 @@ export declare const CurrencyBox: import("@emotion/styled").StyledComponent<impo
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CurrencyText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ActivityAreaChart/styles.js

@@ -1,3 +1,4 @@
+import Text from '../Text';
 import { Box, Typography, styled } from '@mui/material';
 export const TooltipContainer = styled(Box)(() => ({
     width: 'auto',
@@ -33,14 +34,13 @@ export const ValueTypography = styled(Typography)({
 export const CurrencyBox = styled(Box)({
     display: 'flex',
     alignItems: 'center',
-    height: '100%',
+    // height: '100%',
     gap: '2.6px',
     maxHeight: '19px',
 });
-export const CurrencyText = styled(Typography)({
-    fontWeight: 500,
+export const CurrencyText = styled(Text)({
+    fontWeight: 600,
     fontSize: 11,
     lineHeight: '130%',
-    color: '#4B4847',
     letterSpacing: '-0.14px',
 });

package/build/components/ActivityAreaChart/types.d.ts

@@ -1,3 +1,4 @@
+import { LegendKey } from './components';
 export interface ActivityAreaChartProps {
     data: ChartDataPoint[];
     dataKey: string;
@@ -5,17 +6,23 @@ export interface ActivityAreaChartProps {
     dateRange: [Date, Date];
     selectedCurrency: string;
 }
+export interface ChartDataPoint {
+    date: string;
+    chargeCount: number;
+    chargeAmount: number;
+    chargeRate: number;
+    refundCount: number;
+    refundAmount: number;
+    hour?: number;
+}
 export interface ChartTooltipProps {
     active?: boolean;
+    activeLegend: LegendKey;
+    activeDataKey: string;
     payload?: Array<{
         value?: number;
         dataKey?: string;
-        payload?: {
-            date?: string;
-            count?: number;
-            amount?: number;
-            hour?: number;
-        };
+        payload?: ChartDataPoint;
     }>;
     position?: {
         x: number;
@@ -24,9 +31,4 @@ export interface ChartTooltipProps {
     dateRange: [Date, Date];
     selectedCurrency: string;
 }
-export interface ChartDataPoint {
-    date: string;
-    count: number;
-    amount: number;
-}
 export type PayloadItem = NonNullable<ChartTooltipProps['payload']>[number];

package/build/components/FilterDropdown/FilterDropdown.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="react" />
-interface FilterDropdownProps {
-    children?: React.ReactNode;
+import { BoxProps } from '@mui/material/Box';
+import { SxProps } from '@mui/material';
+interface FilterDropdownProps extends BoxProps {
     onConfirm: () => void;
     onCancel: () => void;
     isOkayButDisabled?: boolean;
     isDisabled?: boolean;
+    icon?: string;
+    title?: string;
+    menuStyle?: SxProps;
 }
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
+export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, ...props }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/FilterDropdown/FilterDropdown.js

@@ -1,12 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { useTranslation } from 'react-i18next';
-import { useState, useEffect } from 'react';
-import { ClickAwayListener } from '@mui/material';
 import { darkFilterIcon } from '../../constants/index.js';
 import { Menu, CustomBackdrop } from '../index.js';
 import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }) {
+export default function FilterDropdown(_a) {
+    var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle"]);
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const { t } = useTranslation();
@@ -50,5 +62,5 @@ export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled,
         onConfirm();
         onClose();
     };
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, Object.assign({}, props, { children: [_jsx(FilterButton, Object.assign({ className: "filter-button", isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && Object.assign({ pointerEvents: 'none', opacity: 0.5 }, props.sx))) }, { children: _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: Object.assign({ marginTop: '8px', marginBottom: '8px', width: 193 }, menuStyle), placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] })) })));
 }

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface DonutProps {
+    size?: number;
+    chartData: Array<{
+        name: string;
+        value: number;
+        color: string;
+    }>;
+    chartInfo?: ReactNode;
+}
+export declare const MultiDatakeyDonut: ({ chartData, size, chartInfo }: DonutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+import { DonutWrapper, CenterOverlay, Empty } from './style';
+export const MultiDatakeyDonut = ({ chartData, size = 170, chartInfo }) => {
+    const pieSegments = useMemo(() => {
+        const total = chartData.reduce((sum, d) => sum + d.value, 0) || 1;
+        let cumulative = 0;
+        return chartData.map((d) => {
+            const start = (cumulative / total) * 360;
+            const end = ((cumulative + d.value) / total) * 360;
+            cumulative += d.value;
+            return Object.assign(Object.assign({}, d), { startAngle: start, endAngle: end });
+        });
+    }, [chartData]);
+    const isEmpty = chartData.every((d) => d.value === 0);
+    return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), !isEmpty &&
+                            pieSegments.map((segment) => (_jsx(Pie, Object.assign({ data: [segment], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", startAngle: 90 - segment.startAngle, endAngle: 90 - segment.endAngle, cornerRadius: 0, stroke: "none", isAnimationActive: true, animationDuration: 800, style: { outline: 'none' } }, { children: _jsx(Cell, { fill: segment.color, tabIndex: -1 }, segment.name) }), segment.name)))] }) }), _jsx(CenterOverlay, { children: !chartInfo ? _jsx(Empty, { children: "----" }) : chartInfo })] })));
+};

package/build/components/MultiDatakeyDonut/index.d.ts

@@ -0,0 +1 @@
+export * from './MultiDatakeyDonut';

package/build/components/MultiDatakeyDonut/index.js

@@ -0,0 +1 @@
+export * from './MultiDatakeyDonut';

package/build/components/MultiDatakeyDonut/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const DonutWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CenterOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Empty: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/MultiDatakeyDonut/style.js

@@ -0,0 +1,23 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const DonutWrapper = styled(Box)(() => ({
+    width: '100%',
+    maxWidth: 500,
+    aspectRatio: '1',
+    position: 'relative',
+}));
+export const CenterOverlay = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none',
+    gap: theme.spacing(1),
+}));
+export const Empty = styled(Box)(({ theme }) => ({
+    fontSize: 17,
+    fontWeight: 700,
+    color: '#CFD0D2',
+}));

package/build/components/RangeCalender/RangeCalender.js

@@ -58,8 +58,10 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
         onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
     };
     const getSelectedDate = () => {
-        const startSelectedTime = dates[0].format('MMM D');
-        const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
+        const nowYear = dayjs().year();
+        const formatDate = (date) => (date.year === nowYear ? date.format('MMM D') : date.format('MMM D, YYYY'));
+        const startSelectedTime = formatDate(dates[0]);
+        const endSelectedTime = dates[1] ? formatDate(dates[1]) : formatDate(dates[0]);
         return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
     };
     const onChange = (newDate) => {

package/build/components/index.d.ts

@@ -153,3 +153,4 @@ export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
 export * from './VerificationIcon';
+export * from './MultiDatakeyDonut';

package/build/components/index.js

@@ -153,3 +153,4 @@ export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
 export * from './VerificationIcon';
+export * from './MultiDatakeyDonut';

package/build/constants/assets.d.ts

@@ -76,6 +76,7 @@ export declare const closeIcon: string;
 export declare const dashedCheckIcon: string;
 export declare const deactivatedIcon: string;
 export declare const topUpIcon: string;
+export declare const AIOverviewIcon: string;
 export declare const deMaximizeIcon: string;
 export declare const pendingFlag: string;
 export declare const ibanIcon: string;

package/build/constants/assets.js

@@ -81,6 +81,7 @@ export const closeIcon = `${lightUrl}/close.svg`;
 export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
 export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
 export const topUpIcon = `${lightUrl}/topup.svg`;
+export const AIOverviewIcon = `${lightUrl}/AIOverviewIcon.svg`;
 export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
 export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
 export const ibanIcon = `${lightUrl}/ibanIcon.svg`;

package/build/constants/reports.d.ts

@@ -1,23 +1,6 @@
-/**
- * Maps report **source codes** (app or service)
- * to the corresponding **backend report filter types**.
- *
- * Used as a translation layer between UI report grouping
- * and backend report filtering.
- *
- * - Key: App code or service code
- * - Value: One or more backend filter types
- */
-export declare const reportFilterTypesMap: {
+export declare const filtersTypeMap: {
     [x: string]: string[];
 };
-/**
- * Reports apps
- *
- * Defines apps shown in the reports app, with each service linked
- * to its backend filter type (REPORT_FILTER_TYPES).
- *
- */
 export declare const REPORTS_APPS: {
     code: string;
     name: string;

package/build/constants/reports.js

@@ -1,89 +1,39 @@
 import { APP_CODES } from './apps';
 import { acceptanceAppIcon, billingAppIcon, payoutsAppIcon, walletAppIcon } from './assets';
-/**
- * Backend report filter types (used by reports APIs)
- *
- * Maps frontend report identifiers to the backend API filter types.
- * Acts as the source of truth for all report types across apps/services
- */
-const REPORT_FILTER_TYPES = {
-    // Acceptance
-    CHARGE: 'CHARGE',
-    AUTHORIZE: 'AUTHORIZE',
-    REFUND: 'REFUND',
-    CHARGEBACKS: 'CHARGEBACKS',
-    DESTINATIONS: 'DESTINATIONS',
-    // Wallet
-    STATEMENT: 'STATEMENT',
-    STATEMENT_SUMMARY: 'STATEMENT_SUMMARY',
-    // Billing
-    INVOICE: 'INVOICE',
-    // Payouts
-    PAYOUT: 'PAYOUT',
-    MERCHANT_PAYOUT: 'MERCHANT_PAYOUT',
-    RETAILER_PAYOUT: 'RETAILER_PAYOUT',
+export const filtersTypeMap = {
+    [APP_CODES.acceptance.services.charges.code]: ['CHARGE'],
+    [APP_CODES.acceptance.services.authorization.code]: ['AUTHORIZE'],
+    [APP_CODES.acceptance.services.refunds.code]: ['REFUND'],
+    [APP_CODES.acceptance.services.chargeback.code]: ['CHARGEBACKS'],
+    [APP_CODES.acceptance.services.destinations.code]: ['DESTINATIONS'],
+    [APP_CODES.acceptance.code]: ['CHARGE', 'AUTHORIZE', 'REFUND', 'CHARGEBACKS', 'DESTINATIONS'],
+    [APP_CODES.payouts.code]: ['PAYOUT', 'RETAILER_PAYOUT', 'MERCHANT_PAYOUT'],
+    [APP_CODES.wallet.code]: ['STATEMENT', 'STATEMENT_SUMMARY'],
+    [APP_CODES.billing.code]: ['INVOICE'],
+    [APP_CODES.payouts.services.payouts.code]: ['PAYOUT'],
+    [APP_CODES.wallet.services.merchants.functions.statement.code]: ['STATEMENT'],
+    [APP_CODES.wallet.services.merchants.functions.summary.code]: ['STATEMENT_SUMMARY'],
+    [APP_CODES.billing.services.invoices.code]: ['INVOICE'],
+    [APP_CODES.payouts.services.merchantPayout.code]: ['MERCHANT_PAYOUT'],
+    [APP_CODES.payouts.services.retailerPayout.code]: ['RETAILER_PAYOUT'],
 };
-/**
- * Maps report **source codes** (app or service)
- * to the corresponding **backend report filter types**.
- *
- * Used as a translation layer between UI report grouping
- * and backend report filtering.
- *
- * - Key: App code or service code
- * - Value: One or more backend filter types
- */
-export const reportFilterTypesMap = {
-    // Acceptance
-    [APP_CODES.acceptance.services.charges.code]: [REPORT_FILTER_TYPES.CHARGE],
-    [APP_CODES.acceptance.services.authorization.code]: [REPORT_FILTER_TYPES.AUTHORIZE],
-    [APP_CODES.acceptance.services.refunds.code]: [REPORT_FILTER_TYPES.REFUND],
-    [APP_CODES.acceptance.services.chargeback.code]: [REPORT_FILTER_TYPES.CHARGEBACKS],
-    [APP_CODES.acceptance.services.destinations.code]: [REPORT_FILTER_TYPES.DESTINATIONS],
-    [APP_CODES.acceptance.code]: [
-        REPORT_FILTER_TYPES.CHARGE,
-        REPORT_FILTER_TYPES.AUTHORIZE,
-        REPORT_FILTER_TYPES.REFUND,
-        REPORT_FILTER_TYPES.CHARGEBACKS,
-        REPORT_FILTER_TYPES.DESTINATIONS,
-    ],
-    // Wallet
-    [APP_CODES.wallet.services.merchants.functions.statement.code]: [REPORT_FILTER_TYPES.STATEMENT],
-    [APP_CODES.wallet.services.merchants.functions.summary.code]: [REPORT_FILTER_TYPES.STATEMENT_SUMMARY],
-    [APP_CODES.wallet.code]: [REPORT_FILTER_TYPES.STATEMENT, REPORT_FILTER_TYPES.STATEMENT_SUMMARY],
-    // Billing
-    [APP_CODES.billing.services.invoices.code]: [REPORT_FILTER_TYPES.INVOICE],
-    [APP_CODES.billing.code]: [REPORT_FILTER_TYPES.INVOICE],
-    // Payouts
-    [APP_CODES.payouts.services.payouts.code]: [REPORT_FILTER_TYPES.PAYOUT],
-    [APP_CODES.payouts.services.merchantPayout.code]: [REPORT_FILTER_TYPES.MERCHANT_PAYOUT],
-    [APP_CODES.payouts.services.retailerPayout.code]: [REPORT_FILTER_TYPES.RETAILER_PAYOUT],
-    [APP_CODES.payouts.code]: [REPORT_FILTER_TYPES.PAYOUT, REPORT_FILTER_TYPES.MERCHANT_PAYOUT, REPORT_FILTER_TYPES.RETAILER_PAYOUT],
-};
-/**
- * Reports apps
- *
- * Defines apps shown in the reports app, with each service linked
- * to its backend filter type (REPORT_FILTER_TYPES).
- *
- */
 export const REPORTS_APPS = [
     {
         code: APP_CODES.billing.code,
         name: 'Billing',
         icon: billingAppIcon,
-        services: [{ name: 'Invoices', code: REPORT_FILTER_TYPES.INVOICE }],
+        services: [{ name: 'Invoices', code: 'INVOICE' }],
     },
     {
         code: APP_CODES.acceptance.code,
         name: 'Acceptance',
         icon: acceptanceAppIcon,
         services: [
-            { name: 'Authorisations', code: REPORT_FILTER_TYPES.AUTHORIZE },
-            { name: 'Charges', code: REPORT_FILTER_TYPES.CHARGE },
-            { name: 'Refunds', code: REPORT_FILTER_TYPES.REFUND },
-            { name: 'Chargebacks', code: REPORT_FILTER_TYPES.CHARGEBACKS },
-            { name: 'Destinations', code: REPORT_FILTER_TYPES.DESTINATIONS },
+            { name: 'Authorisations', code: 'AUTHORIZE' },
+            { name: 'Charges', code: 'CHARGE' },
+            { name: 'Refunds', code: 'REFUND' },
+            { name: 'Chargebacks', code: 'CHARGEBACKS' },
+            { name: 'Destinations', code: 'DESTINATIONS' },
         ],
     },
     {
@@ -91,8 +41,8 @@ export const REPORTS_APPS = [
         name: 'Wallet',
         icon: walletAppIcon,
         services: [
-            { name: 'Aggregated Statement', code: REPORT_FILTER_TYPES.STATEMENT_SUMMARY },
-            { name: 'Detailed Statement', code: REPORT_FILTER_TYPES.STATEMENT },
+            { name: 'Aggregated Statement', code: 'STATEMENT_SUMMARY' },
+            { name: 'Detailed Statement', code: 'STATEMENT' },
         ],
     },
     {
@@ -100,9 +50,9 @@ export const REPORTS_APPS = [
         name: 'Payouts',
         icon: payoutsAppIcon,
         services: [
-            { name: 'Payouts', code: REPORT_FILTER_TYPES.PAYOUT },
-            { name: 'Merchant Payouts', code: REPORT_FILTER_TYPES.MERCHANT_PAYOUT },
-            { name: 'Retailer Payouts', code: REPORT_FILTER_TYPES.RETAILER_PAYOUT },
+            { name: 'Payouts', code: 'PAYOUT' },
+            { name: 'Merchant Payouts', code: 'MERCHANT_PAYOUT' },
+            { name: 'Retailer Payouts', code: 'RETAILER_PAYOUT' },
         ],
     },
 ];

package/build/types/apps.d.ts

@@ -1,17 +1,18 @@
 import { ColumnsView } from './column';
 import { Segment, SegmentCountry, SegmentUser, SelectedBrand, SelectedCountry, User } from './user';
+import { BusinessMerchant } from './merchant';
 import type { i18n } from 'i18next';
 import { Theme } from '@mui/material';
 import { CalenderMode } from './theme';
 import { Timezone } from './appConfig';
 import { Brand, Entity, TableMode } from './index.js';
 import { TextAndLang } from './common';
-export type AppPayload<TServiceCodes extends string = string> = {
-    services: {
-        [key in TServiceCodes]?: ServicePayload;
-    };
-};
-export interface ServicePayload {
+export interface AccountAppPayload {
+    disabledAccountDataFetching?: boolean;
+    isAccountDetailsOpen: boolean;
+    selectedMerchant?: BusinessMerchant;
+}
+export interface AppPayload extends Partial<AccountAppPayload> {
     columnFilters?: Record<string, any>;
     filteredIds?: string[];
     dateRange?: [Date, Date];
@@ -20,7 +21,6 @@ export interface ServicePayload {
     isTextShown?: boolean;
     tableViews?: ColumnsView[];
     calendarTimezone?: number;
-    reportTypes?: string[];
 }
 export interface AppDetails {
     id: string;
@@ -43,7 +43,7 @@ export interface AppDetails {
         minWidth: number | string;
         minHeight: number | string;
     };
-    payload?: Record<string, any> & ServicePayload;
+    payload?: Record<string, any> & AppPayload;
     toolbarIconUrl?: string;
     hideMaximizedApp?: boolean;
     hideMinimizeApp?: boolean;
@@ -99,7 +99,7 @@ export type MFWidgetBaseProps = {
         hasHeader: boolean;
         sandboxMode: boolean;
         initialServiceCode?: string;
-        initialAppPayload?: AppPayload;
+        initialPayload?: Record<string, any> & AppPayload;
     };
     user: User;
     segment: {

package/build/types/toggleOptions.d.ts

@@ -0,0 +1,2 @@
+import { DATA_KEY } from '../constants/index.js';
+export type DataKey = (typeof DATA_KEY)[keyof typeof DATA_KEY];

package/build/types/toggleOptions.js

@@ -0,0 +1 @@
+export {};

package/build/utils/date.d.ts

@@ -43,4 +43,9 @@ export declare function isWithinTimeAgo(timestampMs: number, amount: number, uni
 export declare const formatRelativeTimeWithinHour: (timestampMs: number) => string;
 export declare const isTodayDate: (date: string | Date) => boolean;
 export declare const isYesterdayDate: (date: string | Date) => boolean;
+export interface InsightDateLabelResult {
+    label: string;
+    isCustom: boolean;
+}
+export declare const getDateLabel: (from: Date, to: Date) => InsightDateLabelResult;
 export {};

package/build/utils/date.js

@@ -243,3 +243,32 @@ export const formatRelativeTimeWithinHour = (timestampMs) => {
 };
 export const isTodayDate = (date) => dayjs(date).isToday();
 export const isYesterdayDate = (date) => dayjs(date).isYesterday();
+export const getDateLabel = (from, to) => {
+    const start = dayjs(from).startOf('day');
+    const end = dayjs(to).endOf('day');
+    const today = dayjs().startOf('day');
+    const currentYear = today.year();
+    const diffDays = end.diff(start, 'day') + 1;
+    if (start.isToday() && end.isToday())
+        return { label: 'Today', isCustom: false };
+    if (start.isYesterday() && end.isYesterday())
+        return { label: 'Yesterday', isCustom: false };
+    if (diffDays === 7 && end.isSame(today, 'day')) {
+        return { label: 'Last 7 days', isCustom: false };
+    }
+    // Last 30 days (inclusive)
+    if (diffDays === 31 && end.isSame(today, 'day'))
+        return { label: 'Last 30 days', isCustom: false };
+    if (start.date() === 1 && end.date() === end.daysInMonth() && start.month() === end.month()) {
+        const monthLabel = start.year() === currentYear ? start.format('MMMM') : start.format('MMMM YYYY');
+        return { label: monthLabel, isCustom: false };
+    }
+    const showStartYear = start.year() !== currentYear;
+    const showEndYear = end.year() !== currentYear;
+    const startLabel = start.format(`MMM D${showStartYear ? ', YYYY' : ''}`);
+    const endLabel = end.format(`MMM D${showEndYear ? ', YYYY' : ''}`);
+    return {
+        label: `${startLabel} – ${endLabel}`,
+        isCustom: true,
+    };
+};

package/build/utils/navigation.d.ts

@@ -6,7 +6,7 @@ export declare const openNewAppAttrs: ({ appCode, serviceCode, sandboxMode, payl
     numberOfOpenedApps: number;
     segmentId: string;
 }) => {
-    payload?: (Record<string, any> & import("../types/index.js").ServicePayload) | undefined;
+    payload?: (Record<string, any> & import("../types/index.js").AppPayload) | undefined;
     segmentId: string;
     appCode: string;
     serviceCode: string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.365-test.2",
-  "testVersion": 2,
+  "version": "0.1.365-test.21",
+  "testVersion": 21,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

package/build/components/ActivityAreaChart/components/ChartTooltip.d.ts

@@ -1,3 +0,0 @@
-import { ChartTooltipProps } from '../types';
-declare const ChartTooltip: ({ active, payload, dateRange, selectedCurrency }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
-export default ChartTooltip;

package/build/components/ActivityAreaChart/components/ChartTooltip.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import Box from '@mui/material/Box';
-import { getLocalizedUnitLabel } from '../../../utils/index.js';
-import { DATA_KEY } from '../../../constants/index.js';
-import CountryFlag from '../../CountryFlag';
-import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText } from '../styles';
-import { getTooltipFormattedValue, getFormattedDateWithTimezone } from '../utils';
-const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
-    var _a, _b, _c, _d;
-    const { t } = useTranslation();
-    const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
-    const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
-    const isSingleDay = dateRangeFrom === null || dateRangeFrom === void 0 ? void 0 : dateRangeFrom.isSame(dateRangeTo, 'day');
-    if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
-        const point = payload[0];
-        const localizedUnitLabel = getLocalizedUnitLabel(point === null || point === void 0 ? void 0 : point.dataKey, point === null || point === void 0 ? void 0 : point.value);
-        const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
-        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CountryFlag, { currencyCode: selectedCurrency, width: 12 }), _jsx(CurrencyText, { children: selectedCurrency })] })), _jsx(Box, { children: `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}` })] })] })));
-    }
-    return null;
-};
-export default ChartTooltip;

package/build/components/ActivityAreaChart/components/LoadingChart.d.ts

@@ -1,2 +0,0 @@
-declare const LoadingChart: () => import("react/jsx-runtime").JSX.Element;
-export default LoadingChart;