@tap-payments/os-micro-frontend-shared 0.1.280 → 0.1.281

package/build/components/ColorPicker/ColorPicker.js

@@ -15,7 +15,6 @@ const DEFAULT_OPTIONS = {
 const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options = DEFAULT_OPTIONS }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const { disableAlpha = false, hideReset = false } = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
-    console.log('disableAlpha', disableAlpha);
     const rootRef = useRef(null);
     const handleOpen = useCallback(() => {
         setAnchorEl(rootRef.current);

package/build/components/TableReports/DownloadIconButton.d.ts

@@ -0,0 +1,6 @@
+import { DownloadedReport } from './type';
+export type DownloadIconButtonProps = {
+    onDownload?: () => Promise<DownloadedReport>;
+};
+declare function DownloadIconButton({ onDownload }: DownloadIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default DownloadIconButton;

package/build/components/TableReports/DownloadIconButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress } from '@mui/material';
+import { motion } from 'framer-motion';
+import { doneIcon, redVerifyIcon, reportIcon } from '../../constants/index.js';
+import { CircularProgressWrapper, LoadingButton, Counting, DownloadIcon } from './style';
+import { useDownloadReport } from './hooks';
+function DownloadIconButton({ onDownload }) {
+    const { loading, error, success, handleDownloadReport } = useDownloadReport({ onDownload });
+    if (loading) {
+        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsx(LoadingButton, { children: _jsxs(CircularProgressWrapper, { children: [_jsx(Counting, { children: "1" }), _jsx(CircularProgress, {})] }) }) })));
+    }
+    if (success) {
+        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsx(LoadingButton, { children: _jsx(DownloadIcon, { src: doneIcon, alt: "done" }) }) })));
+    }
+    if (error) {
+        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsx(LoadingButton, { children: _jsx(DownloadIcon, { src: redVerifyIcon, alt: "failed" }) }) })));
+    }
+    return _jsx(DownloadIcon, { onClick: handleDownloadReport, src: reportIcon, alt: "reports" });
+}
+export default DownloadIconButton;

package/build/components/TableReports/Downloads.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DownloadedReport, ReportItem } from './type';
+type DownloadsProps = {
+    reports: ReportItem[];
+    isLoading?: boolean;
+    onDownloadReport?: (reportId: string) => Promise<DownloadedReport>;
+};
+declare function Downloads({ reports, isLoading, onDownloadReport }: DownloadsProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Downloads>;
+export default _default;

package/build/components/TableReports/Downloads.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import dayjs from 'dayjs';
+import { csvIcon } from '../../constants/index.js';
+import { getRelativeTime } from '../../utils/index.js';
+import DownloadIconButton from './DownloadIconButton';
+import { RecordLoading } from './RecordLoading';
+import { DownloadedFile, DownloadedFileInfo, DownloadedFileDetails, DownloadedFileName, DownloadedFileTime, DownloadsStyled } from './style';
+import { getReportDate } from './utils';
+function Downloads({ reports, isLoading = false, onDownloadReport }) {
+    const handleDownloadReport = useCallback((reportId) => {
+        if (!onDownloadReport)
+            return Promise.reject(new Error('No download report function provided'));
+        return onDownloadReport(reportId);
+    }, [onDownloadReport]);
+    const reportsList = reports.map((report) => {
+        const isMoreThanDayAgo = dayjs(report.created_at).isBefore(dayjs().subtract(1, 'day'));
+        return (_jsxs(DownloadedFile, { children: [_jsx("img", { src: csvIcon, alt: "download" }), _jsxs(DownloadedFileDetails, { children: [_jsxs(DownloadedFileInfo, { children: [_jsx(DownloadedFileName, { children: report.result_file }), _jsx(DownloadedFileTime, { children: !isMoreThanDayAgo ? getRelativeTime(new Date(report.created_at)) : getReportDate(new Date(report.created_at)) })] }), _jsx(DownloadIconButton, { onDownload: () => handleDownloadReport(report.id) })] })] }, report.id));
+    });
+    if (isLoading)
+        return (_jsxs(DownloadsStyled, { children: [_jsx(RecordLoading, {}), _jsx(RecordLoading, {})] }));
+    return _jsx(DownloadsStyled, { children: reportsList });
+}
+export default memo(Downloads);

package/build/components/TableReports/RecordLoading.d.ts

@@ -0,0 +1 @@
+export declare function RecordLoading(): import("react/jsx-runtime").JSX.Element;

package/build/components/TableReports/RecordLoading.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Skeleton from '../Skeleton';
+import { RecordLoadingWrapper } from './style';
+export function RecordLoading() {
+    return (_jsxs(RecordLoadingWrapper, { children: [_jsx(Skeleton, { width: "16px", height: "16px", variant: "rectangular" }), _jsx(Skeleton, { width: "100%", variant: "text" }), _jsx(Skeleton, { width: "12px", height: "12px", variant: "circular" })] }));
+}

package/build/components/TableReports/TableReports.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TableReportsProps } from './type';
+declare function TableReports(props: TableReportsProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableReports>;
+export default _default;

package/build/components/TableReports/TableReports.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { motion, AnimatePresence } from 'framer-motion';
+import CircularProgress from '@mui/material/CircularProgress';
+import LinearProgress from '@mui/material/LinearProgress';
+import Popper from '@mui/material/Popper';
+import { CustomBackdrop, Tooltip } from '../index.js';
+import { csvIcon, doneIcon, redVerifyIcon, reportsIconOutlined } from '../../constants/index.js';
+import Downloads from './Downloads';
+import { ReportsWrapper, ReportsDropdown, FileType, FileTypeName, ExportButton, LinearProgressStyled, LoadingButton, CircularProgressWrapper, Counting, OpenApp, } from './style';
+function TableReports(props) {
+    var _a;
+    const { progress, reportsQueryResult, isStatusReady: isReady, isStatusFailed: isFailed, isLoading, notificationState, onOpenDropdown, onRequestReportFile, onOpenReportsApp, hideOpenReportsApp = false, onDownloadReport, } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const { data: reportsData, isLoading: isLoadingReportsData } = reportsQueryResult;
+    const openDropdown = useCallback((event) => {
+        if (isLoading || isReady)
+            return;
+        onOpenDropdown === null || onOpenDropdown === void 0 ? void 0 : onOpenDropdown();
+        setAnchorEl(event.currentTarget);
+    }, [isLoading, isReady, onOpenDropdown]);
+    const onCloseDropdown = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleRequestReportFile = useCallback(() => {
+        if (!isLoading) {
+            onCloseDropdown();
+            onRequestReportFile === null || onRequestReportFile === void 0 ? void 0 : onRequestReportFile();
+        }
+    }, [isLoading, onCloseDropdown, onRequestReportFile]);
+    const openReportsApp = (e) => {
+        e.stopPropagation();
+        onOpenReportsApp === null || onOpenReportsApp === void 0 ? void 0 : onOpenReportsApp();
+        onCloseDropdown();
+    };
+    const getExportButtonContent = () => {
+        if (isLoading) {
+            return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsxs(LoadingButton, { children: [_jsxs(CircularProgressWrapper, { children: [_jsx(Counting, { children: "1" }), _jsx(CircularProgress, {})] }), _jsx("span", { children: t('preparing') }), _jsx(LinearProgressStyled, { children: _jsx(LinearProgress, { variant: "determinate", value: progress }) })] }) })));
+        }
+        if (isReady) {
+            return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsxs(LoadingButton, { children: [_jsx("img", { src: doneIcon, alt: "done" }), _jsx("span", { children: t('ready') }), _jsx(LinearProgressStyled, Object.assign({ className: "done" }, { children: _jsx(LinearProgress, { variant: "determinate", value: 100 }) }))] }) })));
+        }
+        if (isFailed) {
+            return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsxs(LoadingButton, { children: [_jsx("img", { src: redVerifyIcon, alt: "failed" }), _jsx("span", { children: t('failed') }), _jsx(LinearProgressStyled, Object.assign({ className: "failed" }, { children: _jsx(LinearProgress, { variant: "determinate", value: 100 }) }))] }) })));
+        }
+        return _jsx("img", { src: reportsIconOutlined, alt: "reports" });
+    };
+    return (_jsxs(ReportsWrapper, Object.assign({ "data-testid": "TableReports_ReportsWrapper" }, { children: [_jsx(AnimatePresence, { children: _jsx(Tooltip, Object.assign({ title: t('reports') }, { children: _jsx(ExportButton, Object.assign({ "data-testid": "TableReports_ExportButton", onClick: openDropdown, notificationState: notificationState, open: open, loading: isLoading, ready: isReady, failed: isFailed, sx: Object.assign({}, ((isLoading || isReady || isFailed) && { borderBottom: 'none' })), initial: { width: 'auto' }, transition: { duration: 0.25 } }, { children: getExportButtonContent() })) })) }), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end" }, { children: _jsxs(ReportsDropdown, Object.assign({ sx: { width: 208 } }, { children: [_jsxs(FileType, Object.assign({ onClick: handleRequestReportFile }, { children: [_jsx("img", { src: csvIcon, alt: "download" }), _jsx(FileTypeName, { children: "csv" })] })), _jsx(Downloads, { reports: (_a = reportsData === null || reportsData === void 0 ? void 0 : reportsData.reports) !== null && _a !== void 0 ? _a : [], isLoading: isLoadingReportsData, onDownloadReport: onDownloadReport }), !hideOpenReportsApp && _jsx(OpenApp, Object.assign({ onClick: openReportsApp }, { children: t('openReportsApp') }))] })) }))] })));
+}
+export default memo(TableReports);

package/build/components/TableReports/components/DownloadButton/DownloadButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DownloadedReport } from '../../type';
+type DownloadButtonProps = {
+    onDownload: () => Promise<DownloadedReport>;
+};
+declare function DownloadButton({ onDownload }: DownloadButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DownloadButton>;
+export default _default;

package/build/components/TableReports/components/DownloadButton/DownloadButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import CircularProgress from '@mui/material/CircularProgress';
+import { AnimatePresence, motion } from 'framer-motion';
+import { exclamationWhiteIcon } from '../../../../constants/index.js';
+import { Icon } from '../../../index.js';
+import { Button } from './style';
+import { useDownloadReport } from '../../hooks';
+function DownloadButton({ onDownload }) {
+    const { loading, error, success, handleDownloadReport } = useDownloadReport({ onDownload });
+    const { t } = useTranslation();
+    const isIdle = !loading && !error && !success;
+    return (_jsx(Button, Object.assign({ onClick: handleDownloadReport }, { children: _jsxs(AnimatePresence, Object.assign({ mode: "wait", initial: false }, { children: [loading && (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, style: { display: 'flex', alignItems: 'center' } }, { children: _jsx(CircularProgress, { size: "10px", sx: { color: 'rgba(255, 255, 255, 0.62)' } }) }), "loading")), !!error && (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: _jsx(Icon, { src: exclamationWhiteIcon, sx: { width: 'auto', height: 'auto' }, alt: "error" }) }), "error")), isIdle && (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: t('download') }), "text"))] })) })));
+}
+export default memo(DownloadButton);

package/build/components/TableReports/components/DownloadButton/index.d.ts

@@ -0,0 +1,2 @@
+import DownloadButton from './DownloadButton';
+export default DownloadButton;

package/build/components/TableReports/components/DownloadButton/index.js

@@ -0,0 +1,2 @@
+import DownloadButton from './DownloadButton';
+export default DownloadButton;

package/build/components/TableReports/components/DownloadButton/style.d.ts

@@ -0,0 +1,264 @@
+/// <reference types="react" />
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    hidden?: boolean | undefined;
+    color?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "off" | "on" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "true" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "true" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/TableReports/components/DownloadButton/style.js

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export const Button = styled(motion.div)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    width: 54,
+    height: 18,
+    backgroundColor: '#1F88D0',
+    borderRadius: '2px',
+    fontSize: '8px',
+    fontWeight: 600,
+    color: theme.palette.common.white,
+}));

package/build/components/TableReports/hooks/index.d.ts

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

package/build/components/TableReports/hooks/index.js

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

package/build/components/TableReports/hooks/useDownloadReport.d.ts

@@ -0,0 +1,11 @@
+import { DownloadedReport } from '../type';
+type UseDownloadReportProps = {
+    onDownload?: () => Promise<DownloadedReport>;
+};
+export declare const useDownloadReport: ({ onDownload }: UseDownloadReportProps) => {
+    loading: boolean;
+    error: unknown;
+    success: boolean;
+    handleDownloadReport: () => void;
+};
+export {};

package/build/components/TableReports/hooks/useDownloadReport.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useReducer } from 'react';
+import { generateFileNameWithExtension } from '../utils';
+import { handleURLDownload } from '../../../utils/index.js';
+import toast from 'react-hot-toast';
+const initialState = {
+    loading: false,
+    success: false,
+    error: null,
+};
+const downloadReportReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case 'RESET':
+            return initialState;
+        case 'LOADING':
+            return Object.assign(Object.assign({}, state), { loading: true });
+        case 'SUCCESS':
+            return Object.assign(Object.assign({}, state), { success: true });
+        case 'ERROR':
+            return Object.assign(Object.assign({}, state), { error: action.error });
+        default:
+            return state;
+    }
+};
+export const useDownloadReport = ({ onDownload }) => {
+    const [{ loading, error, success }, dispatch] = useReducer(downloadReportReducer, initialState);
+    const setLoading = useCallback(() => dispatch({ type: 'LOADING' }), []);
+    const setSuccess = useCallback(() => dispatch({ type: 'SUCCESS' }), []);
+    const setError = useCallback((err) => dispatch({ type: 'ERROR', error: err }), []);
+    const resetState = useCallback(() => dispatch({ type: 'RESET' }), []);
+    useEffect(() => {
+        if (success || error) {
+            setTimeout(() => {
+                resetState();
+            }, 3000);
+        }
+    }, [success, error, resetState]);
+    const handleDownloadReport = useCallback(() => {
+        if (!onDownload)
+            return;
+        setLoading();
+        onDownload()
+            .then((data) => {
+            setSuccess();
+            handleURLDownload(data.url, generateFileNameWithExtension(data.result_file, data.id));
+        })
+            .catch((err) => {
+            var _a, _b, _c;
+            setError(err);
+            toast.error(((_c = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || (err === null || err === void 0 ? void 0 : err.message) || 'Failed to download report');
+        });
+    }, [onDownload, setLoading, setSuccess, setError]);
+    return {
+        loading,
+        error,
+        success,
+        handleDownloadReport,
+    };
+};

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

@@ -0,0 +1,7 @@
+import TableReports from './TableReports';
+export { default as DownloadIconButton } from './DownloadIconButton';
+export * from './DownloadIconButton';
+export { default as DownloadButton } from './components/DownloadButton';
+export * from './components/DownloadButton';
+export * from './hooks';
+export default TableReports;

package/build/components/TableReports/index.js

@@ -0,0 +1,7 @@
+import TableReports from './TableReports';
+export { default as DownloadIconButton } from './DownloadIconButton';
+export * from './DownloadIconButton';
+export { default as DownloadButton } from './components/DownloadButton';
+export * from './components/DownloadButton';
+export * from './hooks';
+export default TableReports;

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

@@ -0,0 +1,324 @@
+/// <reference types="react" />
+/// <reference types="react" />
+type ExportButtonProps = {
+    notificationState?: {
+        success: boolean;
+        failed: boolean;
+    };
+    open?: boolean;
+    loading?: boolean;
+    ready?: boolean;
+    failed?: boolean;
+};
+export declare const ExportButton: import("@emotion/styled").StyledComponent<{
+    hidden?: boolean | undefined;
+    color?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "off" | "on" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "true" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "true" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ExportButtonProps, {}, {}>;
+export declare const ReportsWrapper: 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 ReportsDropdown: 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 OpenApp: 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 DownloadedFile: 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 DownloadedFileInfo: 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 DownloadedFileDetails: 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 DownloadedFileName: 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 DownloadedFileTime: 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 FileType: 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 FileTypeName: 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 DownloadsStyled: 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 LinearProgressStyled: 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 LoadingButton: 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 CircularProgressWrapper: 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 Counting: 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 DownloadIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const RecordLoadingWrapper: 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 {};

package/build/components/TableReports/style.js

@@ -0,0 +1,163 @@
+import { styled, Box, alpha } from '@mui/material';
+import { motion } from 'framer-motion';
+export const ExportButton = styled(motion.div, {
+    shouldForwardProp: (props) => props !== 'notificationState' && props !== 'open' && props !== 'loading' && props !== 'ready',
+})(({ theme, notificationState, open, loading, ready, failed }) => (Object.assign(Object.assign({ position: 'relative', border: `1px solid ${theme.palette.divider}`, padding: '0 8px', height: 32, borderRadius: '4px', display: 'flex', alignItems: 'center', overflow: 'hidden', fontSize: '11px', fontWeight: 500, color: theme.palette.text.primary, transition: 'width 2s ease-in-out', cursor: 'pointer' }, (((notificationState === null || notificationState === void 0 ? void 0 : notificationState.success) || (notificationState === null || notificationState === void 0 ? void 0 : notificationState.failed)) &&
+    !loading &&
+    !ready &&
+    !failed && {
+    '&:after': {
+        content: '""',
+        width: 7,
+        height: 7,
+        backgroundColor: (notificationState === null || notificationState === void 0 ? void 0 : notificationState.failed) ? theme.palette.common.red : theme.palette.success.dark,
+        borderRadius: '50%',
+        position: 'absolute',
+        top: 5,
+        border: `1px solid ${theme.palette.common.white}`,
+        right: 6,
+    },
+})), (open && {
+    border: `1px solid ${theme.palette.info.dark}`,
+    boxShadow: theme.shadows[7],
+}))));
+export const ReportsWrapper = styled(Box)(() => ({
+    position: 'relative',
+}));
+export const ReportsDropdown = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[9],
+    borderRadius: '4px',
+    marginTop: '8px',
+}));
+export const OpenApp = styled(Box)(({ theme }) => ({
+    background: theme.palette.background.transparent[2],
+    backdropFilter: 'blur(2px)',
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    fontWeight: 500,
+    height: 31,
+    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    overflow: 'hidden',
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
+}));
+export const DownloadedFile = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '5.5px 8px',
+    minHeight: 48,
+    height: 'auto',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    cursor: 'pointer',
+    '&:hover': {
+        boxShadow: theme.shadows[3],
+    },
+}));
+export const DownloadedFileInfo = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+}));
+export const DownloadedFileDetails = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flex: 1,
+}));
+export const DownloadedFileName = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    fontWeight: 500,
+    wordBreak: 'break-all',
+    paddingInlineEnd: '8px',
+}));
+export const DownloadedFileTime = styled(Box)(({ theme }) => ({
+    fontSize: '9px',
+    color: theme.palette.text.textSecondary,
+    fontWeight: 600,
+}));
+export const FileType = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    height: 32,
+    padding: '4px 8px',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    cursor: 'pointer',
+    '&:hover': {
+        boxShadow: theme.shadows[3],
+    },
+}));
+export const FileTypeName = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    fontWeight: 400,
+    textTransform: 'uppercase',
+}));
+export const DownloadsStyled = styled(Box)(({ theme }) => ({
+    borderTop: `2px solid ${theme.palette.divider}`,
+}));
+export const LinearProgressStyled = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    left: 0,
+    '.MuiLinearProgress-root': {
+        backgroundColor: theme.palette.divider,
+        height: 2,
+    },
+    '.MuiLinearProgress-bar': {
+        background: theme.palette.background.gradient.shadedBlue,
+    },
+    '&.done .MuiLinearProgress-bar': {
+        background: theme.palette.success.dark,
+    },
+    '&.failed .MuiLinearProgress-bar': {
+        background: theme.palette.common.red,
+    },
+}));
+export const LoadingButton = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    '.MuiCircularProgress-root': {
+        width: '14px !important',
+        height: '14px !important',
+        display: 'flex',
+    },
+    '.MuiCircularProgress-circle': {
+        strokeWidth: '1.017px',
+        stroke: alpha(theme.palette.common.black, 0.62),
+    },
+}));
+export const CircularProgressWrapper = styled(Box)(() => ({
+    position: 'relative',
+}));
+export const Counting = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    color: theme.palette.common.black,
+    fontSize: '7.875px',
+    fontWeight: 700,
+    width: 14,
+    height: 14,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const DownloadIcon = styled('img')(() => ({
+    width: 14,
+    height: 14,
+}));
+export const RecordLoadingWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '8px',
+}));

package/build/components/TableReports/type.d.ts

@@ -0,0 +1,32 @@
+export type ReportItem = {
+    id: string;
+    result_file: string;
+    created_at: number;
+};
+export type DownloadedReport = {
+    id: string;
+    url: string;
+    result_file: string;
+    created_at: number;
+};
+export interface TableReportsProps {
+    progress: number;
+    reportsQueryResult: {
+        data?: {
+            reports?: ReportItem[];
+        };
+        isLoading?: boolean;
+    };
+    isStatusReady?: boolean;
+    isStatusFailed?: boolean;
+    isLoading?: boolean;
+    notificationState?: {
+        success: boolean;
+        failed: boolean;
+    };
+    onRequestReportFile?: () => Promise<unknown>;
+    onOpenDropdown?: () => void;
+    onOpenReportsApp?: () => void;
+    hideOpenReportsApp?: boolean;
+    onDownloadReport?: (reportId: string) => Promise<DownloadedReport>;
+}

package/build/components/TableReports/type.js

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

package/build/components/TableReports/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getReportDate: (date: Date) => string;
+export declare const generateFileNameWithExtension: (fileName: string, newName?: string) => string;

package/build/components/TableReports/utils.js

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+export const getReportDate = (date) => {
+    const todayDate = new Date();
+    const isCurrentYear = dayjs(date).isSame(todayDate, 'year');
+    let format = {
+        sameDay: 'DD MMM, YYYY',
+        nextDay: 'DD MMM, YYYY',
+        lastDay: 'DD MMM, YYYY',
+        sameElse: 'DD MMM, YYYY',
+        lastWeek: 'DD MMM, YYYY',
+        nextWeek: 'DD MMM, YYYY',
+    };
+    if (isCurrentYear) {
+        format = {
+            sameDay: 'DD MMM',
+            nextDay: 'DD MMM',
+            lastDay: 'DD MMM',
+            sameElse: 'DD MMM',
+            lastWeek: 'DD MMM',
+            nextWeek: 'DD MMM',
+        };
+    }
+    return dayjs(date).calendar(null, format);
+};
+export const generateFileNameWithExtension = (fileName, newName) => {
+    const currentDate = new Date().toISOString().split('T')[0];
+    const finalName = newName !== null && newName !== void 0 ? newName : `file_${currentDate}`;
+    const extensionRegex = /\.(xlx|xlsx|csv|txt|doc|docx|pdf|jpg|png|gif|zip|rar)$/i;
+    const match = extensionRegex.exec(fileName);
+    const extension = match ? match[0] : '.csv';
+    return `${finalName}${extension}`;
+};

package/build/components/index.d.ts

@@ -141,3 +141,5 @@ export * from './MerchantsDropdown';
 export * from './ViewColumnRadioFilter';
 export * from './Filters';
 export * from './StatusFilter';
+export { default as TableReports } from './TableReports';
+export * from './TableReports';

package/build/components/index.js

@@ -141,3 +141,5 @@ export * from './MerchantsDropdown';
 export * from './ViewColumnRadioFilter';
 export * from './Filters';
 export * from './StatusFilter';
+export { default as TableReports } from './TableReports';
+export * from './TableReports';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.280",
+  "version": "0.1.281",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",