@quillsql/react 2.6.4 → 2.6.5

package/lib/ReportBuilder.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPostgresBasicType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
+// // @ts-nocheck
 const react_1 = require("react");
 // import './nightOwlLight.css';
 const Context_1 = require("./Context");
@@ -13,13 +13,14 @@ const SQLEditor_1 = require("./SQLEditor");
 const date_fns_1 = require("date-fns");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const dataFetcher_1 = require("./utils/dataFetcher");
+const Dashboard_1 = require("./Dashboard");
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 const Table_1 = __importDefault(require("./Table"));
 const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
 const UiComponents_1 = require("./components/UiComponents");
-function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = UiComponents_1.MemoizedTextInput, containerStyle, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, }) {
+function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = UiComponents_1.MemoizedTextInput, containerStyle, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, }) {
     const [data, setData] = (0, react_1.useState)([]);
-    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [client, setClient] = (0, react_1.useContext)(Context_1.ClientContext);
     const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [columns, setColumns] = (0, react_1.useState)([]);
@@ -28,6 +29,26 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
     const [selectedPivot, setSelectedPivot] = (0, react_1.useState)(null);
     const defaultDateRange = (0, dateRangePickerUtils_1.getRangeFromPreset)('90d');
     const [dateRange, setDateRange] = (0, react_1.useState)(defaultDateRange);
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getClient() {
+            try {
+                const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `client/${client.publicKey}/`, null, 'GET');
+                if (resp) {
+                    setClient({ ...client, ...resp.client });
+                }
+            }
+            catch (error) {
+                console.error('ERROR getting client:', error);
+            }
+        }
+        if (isSubscribed) {
+            getClient();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         let isSubscribed = true;
         async function getSchema() {
@@ -108,7 +129,7 @@ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeL
     if (!schema || !schema.length || !tableName) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ReportingTool, { containerStyle: containerStyle, theme: theme, data: data, columns: columns, fields: fields, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: pivot => {
+    return ((0, jsx_runtime_1.jsx)(ReportingTool, { containerStyle: containerStyle, destinationDashboard: destinationDashboard, client: client, theme: theme, data: data, columns: columns, fields: fields, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: pivot => {
             setSelectedPivot(pivot);
             if (onChangePivot) {
                 const table = pivot
@@ -168,31 +189,157 @@ function getPostgresBasicType(column) {
     return format;
 }
 exports.getPostgresBasicType = getPostgresBasicType;
-const newDateWhereAST = (column, dateRange) => {
-    return {
-        type: 'binary_expr',
-        operator: 'BETWEEN',
-        left: {
-            type: 'column_ref',
-            table: null,
-            column: column,
-        },
-        right: {
-            type: 'expr_list',
-            value: [
-                {
-                    type: 'single_quote_string',
-                    value: (0, date_fns_1.format)(new Date(dateRange[0]), 'MM/dd/yyyy'),
-                },
-                {
-                    type: 'single_quote_string',
-                    value: (0, date_fns_1.format)(new Date(dateRange[1]), 'MM/dd/yyyy'),
-                },
-            ],
-        },
-    };
+const newDateWhereAST = (column, dateRange, databaseType) => {
+    // all time means no filter
+    if (dateRange[2] === 'at') {
+        return null;
+    }
+    // if using preset
+    if (dateRange[2]) {
+        const timeInterval = dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === dateRange[2])?.dayInterval;
+        switch (databaseType) {
+            case 'BigQuery': {
+                return {
+                    type: 'binary_expr',
+                    operator: 'BETWEEN',
+                    left: {
+                        type: 'function',
+                        name: 'Date',
+                        args: {
+                            type: 'expr_list',
+                            value: [
+                                {
+                                    type: 'column_ref',
+                                    table: null,
+                                    column: column,
+                                },
+                            ],
+                        },
+                        over: null,
+                    },
+                    right: {
+                        type: 'expr_list',
+                        value: [
+                            {
+                                type: 'function',
+                                name: 'DATE_SUB',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [
+                                        {
+                                            type: 'function',
+                                            name: 'CURRENT_DATE',
+                                            args: {
+                                                type: 'expr_list',
+                                                value: [],
+                                            },
+                                            over: null,
+                                        },
+                                        {
+                                            type: 'interval',
+                                            expr: {
+                                                type: 'number',
+                                                value: timeInterval,
+                                            },
+                                            unit: 'day',
+                                        },
+                                    ],
+                                },
+                                over: null,
+                            },
+                            {
+                                type: 'function',
+                                name: 'CURRENT_DATE',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [],
+                                },
+                                over: null,
+                            },
+                        ],
+                    },
+                };
+            }
+            default: {
+                return {
+                    type: 'binary_expr',
+                    operator: 'AND',
+                    left: {
+                        type: 'binary_expr',
+                        operator: '>=',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'binary_expr',
+                            operator: '-',
+                            left: {
+                                type: 'function',
+                                name: 'now',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [],
+                                },
+                            },
+                            right: {
+                                type: 'interval',
+                                expr: {
+                                    type: 'single_quote_string',
+                                    value: `${timeInterval} day`,
+                                },
+                                unit: '',
+                            },
+                        },
+                    },
+                    right: {
+                        type: 'binary_expr',
+                        operator: '<=',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'function',
+                            name: 'now',
+                            args: {
+                                type: 'expr_list',
+                                value: [],
+                            },
+                        },
+                    },
+                };
+            }
+        }
+    }
+    else {
+        return {
+            type: 'binary_expr',
+            operator: 'BETWEEN',
+            left: {
+                type: 'column_ref',
+                table: null,
+                column: column,
+            },
+            right: {
+                type: 'expr_list',
+                value: [
+                    {
+                        type: 'single_quote_string',
+                        value: (0, date_fns_1.format)(new Date(dateRange[0]), 'MM/dd/yyyy'),
+                    },
+                    {
+                        type: 'single_quote_string',
+                        value: (0, date_fns_1.format)(new Date(dateRange[1]), 'MM/dd/yyyy'),
+                    },
+                ],
+            },
+        };
+    }
 };
-function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, }) {
+function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, client, destinationDashboard, }) {
     const selectedTable = (0, react_1.useMemo)(() => schema.find(t => t.displayName === tableName), [schema, tableName]);
     const [selectedColumn, setSelectedColumn] = (0, react_1.useState)(schema[0].columns.find(elem => elem.name !== 'id'));
     const parentRef = (0, react_1.useRef)();
@@ -205,21 +352,23 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
         columns: '*',
         into: { position: null },
         from: [{ db: null, table: selectedTable.displayName, as: null }],
-        where: newDateWhereAST(dateColumn, defaultDateRange),
+        // where: newDateWhereAST(dateColumn, defaultDateRange),
+        where: null,
         groupby: null,
         having: null,
         orderby: null,
         limit: { seperator: '', value: [] },
         window: null,
     });
+    const [ASTNoDateColumn, setASTNoDateColumn] = (0, react_1.useState)(AST);
     const [numberStart, setNumberStart] = (0, react_1.useState)(0);
     const [numberEnd, setNumberEnd] = (0, react_1.useState)(0);
-    const [dateStart, setDateStart] = (0, react_1.useState)('');
-    const [dateEnd, setDateEnd] = (0, react_1.useState)('');
+    const [filterDateRange, setFilterDateRange] = (0, react_1.useState)((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
     const [computedColumns, setComputedColumns] = (0, react_1.useState)({});
     const [stringFilterValues, setStringFilterValues] = (0, react_1.useState)([]);
     const [columnType, setColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
     const [sqlQuery, setSqlQuery] = (0, react_1.useState)('');
+    const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = (0, react_1.useState)('');
     const [indexBeingEdited, setIndexBeingEdited] = (0, react_1.useState)(-1);
     const [isAddFilterModalOpen, setIsAddFilterModalOpen] = (0, react_1.useState)(false);
     const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
@@ -255,8 +404,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
             setIndexBeingEdited(index);
         }
         else if (filter.columnType === 'date') {
-            setDateStart(filter.dateStart);
-            setDateEnd(filter.dateEnd);
+            setFilterDateRange(filter.filterDateRange);
             setIndexBeingEdited(index);
         }
     };
@@ -311,14 +459,17 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                 });
             }
             else if (columnType === 'date') {
+                const label = filterDateRange[2]
+                    ? dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
+                        ?.text
+                    : `${(0, date_fns_1.format)(new Date(filterDateRange[0]), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(filterDateRange[1]), 'MMM dd')}`;
                 setFilters(filters => {
                     const newFilters = [...filters];
                     newFilters[index] = {
                         column: selectedColumn.name,
                         columnType,
-                        dateStart,
-                        dateEnd,
-                        tag: `${selectedColumn.name} (${(0, date_fns_1.format)(new Date(dateStart), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(dateEnd), 'MMM dd')})`,
+                        filterDateRange,
+                        tag: `${selectedColumn.name} (${label})`,
                     };
                     return newFilters;
                 });
@@ -326,14 +477,13 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
             setStringFilterValues([]);
             setNumberStart(0);
             setNumberEnd(0);
-            setDateStart('');
-            setDateEnd('');
+            setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
             setIndexBeingEdited(-1);
             return;
         }
     };
     // ADD FILTER TO "FILTERS" ARRAY
-    const addFilter = () => {
+    const addFilter = async () => {
         if (selectedColumn && columnType) {
             //   const type = getPostgresBasicType(selectedColumn);
             let newCondition;
@@ -352,8 +502,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                 setStringFilterValues([]);
                 setNumberStart(0);
                 setNumberEnd(0);
-                setDateStart('');
-                setDateEnd('');
+                setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
                 return;
             }
             else if (columnType === 'number') {
@@ -372,28 +521,29 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                 setStringFilterValues([]);
                 setNumberStart(0);
                 setNumberEnd(0);
-                setDateStart('');
-                setDateEnd('');
+                setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
                 return;
             }
             else if (columnType === 'date') {
+                const label = filterDateRange[2]
+                    ? dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
+                        ?.text
+                    : `${(0, date_fns_1.format)(new Date(filterDateRange[0]), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(filterDateRange[1]), 'MMM dd')}`;
                 setFilters(filters => {
                     return [
                         ...filters,
                         {
                             column: selectedColumn.name,
                             columnType,
-                            dateStart,
-                            dateEnd,
-                            tag: `${selectedColumn.name} (${(0, date_fns_1.format)(new Date(dateStart), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(dateEnd), 'MMM dd')})`,
+                            filterDateRange,
+                            tag: `${selectedColumn.name} (${label})`,
                         },
                     ];
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
                 setNumberEnd(0);
-                setDateStart('');
-                setDateEnd('');
+                setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
             }
         }
     };
@@ -409,29 +559,28 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
             setSelectedColumn(selectedTable.columns.find(elem => elem.name !== 'id'));
             setFilters([]);
             removePivot();
-            setAST(AST => {
-                return {
-                    with: null,
-                    type: 'select',
-                    options: null,
-                    distinct: { type: null },
-                    columns: '*',
-                    into: { position: null },
-                    // where: newDateWhereAST(dateColumn, defaultDateRange),
-                    where: null,
-                    groupby: null,
-                    having: null,
-                    orderby: null,
-                    limit: { seperator: '', value: [] },
-                    window: null,
-                    from: [{ db: null, table: selectedTable.displayName, as: null }],
-                };
-            });
+            const resetAST = {
+                with: null,
+                type: 'select',
+                options: null,
+                distinct: { type: null },
+                columns: '*',
+                into: { position: null },
+                // where: newDateWhereAST(dateColumn, defaultDateRange),
+                where: null,
+                groupby: null,
+                having: null,
+                orderby: null,
+                limit: { seperator: '', value: [] },
+                window: null,
+                from: [{ db: null, table: selectedTable.displayName, as: null }],
+            };
+            setAST(resetAST);
+            setASTNoDateColumn(resetAST);
             return;
         }
     }, [selectedTable]);
-    // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
-    (0, react_1.useEffect)(() => {
+    const generateNewAST = includeDateColumn => {
         if (filters.length || dateRange) {
             const newAST = {
                 with: null,
@@ -452,8 +601,11 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
             // FILTERS
             for (let i = 0; i < filters.length; i++) {
                 const filter = filters[i];
-                const { column, columnType, stringFilterValues, numberStart, numberEnd, dateStart, dateEnd, } = filter;
+                const { column, columnType, stringFilterValues, numberStart, numberEnd, filterDateRange, } = filter;
                 let newCondition;
+                if (column === dateColumn && !includeDateColumn) {
+                    continue;
+                }
                 if (columnType === 'string') {
                     newCondition = {
                         type: 'binary_expr',
@@ -491,7 +643,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                     };
                 }
                 else if (columnType === 'date') {
-                    newCondition = newDateWhereAST(column, [dateStart, dateEnd]);
+                    newCondition = newDateWhereAST(column, filterDateRange, client.databaseType);
                 }
                 if (!newAST.where) {
                     newAST.where = newCondition;
@@ -505,7 +657,14 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                     };
                 }
             }
-            setAST(newAST);
+            return newAST;
+        }
+    };
+    // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
+    (0, react_1.useEffect)(() => {
+        if (filters.length || dateRange) {
+            setAST(generateNewAST(true));
+            setASTNoDateColumn(generateNewAST(false));
         }
     }, [filters, dateRange]);
     const removeFilter = index => {
@@ -573,7 +732,9 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
         const getSqlQueryFromAST = async () => {
             try {
                 if (AST && AST.from[0].table) {
-                    const resp = await (0, dataFetcher_1.getDataFromCloud)(null, 'sqlify', { ast: AST });
+                    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'sqlify', {
+                        ast: AST,
+                    });
                     const newSqlQuery = resp.query; // assuming the response contains the SQL query
                     if (newSqlQuery && newSqlQuery !== sqlQuery) {
                         onChangeQuery(newSqlQuery);
@@ -588,6 +749,25 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
         };
         getSqlQueryFromAST();
     }, [AST]);
+    (0, react_1.useEffect)(() => {
+        const getSqlQueryFromAST = async () => {
+            try {
+                if (ASTNoDateColumn && ASTNoDateColumn.from[0].table) {
+                    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'sqlify', {
+                        ast: ASTNoDateColumn,
+                    });
+                    const newSqlQuery = resp.query; // assuming the response contains the SQL query
+                    if (newSqlQuery && newSqlQuery !== sqlQueryNoDateColumn) {
+                        setSqlQueryNoDateColumn(newSqlQuery);
+                    }
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+        };
+        getSqlQueryFromAST();
+    }, [ASTNoDateColumn]);
     if (!schema || !schema.length) {
         return null;
     }
@@ -596,7 +776,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                     // marginLeft: '25px',
                     // marginRight: '25px',
                     justifyContent: 'end',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [(0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), (0, jsx_runtime_1.jsx)(Table_1.default, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [(0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), (0, jsx_runtime_1.jsx)(Table_1.default, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
                     height: 400,
                     marginTop: 10,
                 } }), chartBuilderEnabled && columns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
@@ -607,7 +787,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                             width: '100%',
                             height: '70px',
                             gap: '8px',
-                        }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: data, columns: columns, fields: fields, query: sqlQuery, pivot: selectedPivot, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots })] }))] }));
+                        }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: data, columns: columns, fields: fields, query: sqlQuery, queryNoDateColumn: sqlQueryNoDateColumn, pivot: selectedPivot, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots, destinationDashboard: destinationDashboard, dateColumn: dateColumn })] }))] }));
 }
 function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpen, selectFilter, theme, tagStyle, selectedTagBorderColor, }) {
     const handleRemoveFilter = () => {
@@ -658,7 +838,7 @@ function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpe
                     paddingLeft: '6px',
                 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
 }
-const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, dateStart, setDateStart, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, setDateEnd, dateEnd, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
+const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setDateRange, dateRange, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     position: 'relative',
@@ -676,7 +856,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                 position: 'absolute',
                                 top: -2,
                                 right: -2,
-                            } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400 }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", style: { right: 0, minWidth: 400 }, setIsOpen: setIsOpen, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400, overflow: 'visible' }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", setIsOpen: setIsOpen, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -692,9 +872,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                         const column = selectedTable.columns.find(c => c.name === e);
                                         setSelectedColumn(column);
                                     }, options: selectedTable.columns
-                                        .filter(elem => !(elem.name === 'id' ||
-                                        elem.name.endsWith('_id') ||
-                                        (0, PivotModal_1.isDateField)(elem.fieldType)))
+                                        .filter(elem => !(elem.name === 'id' || elem.name.endsWith('_id')))
                                         .map(elem => {
                                         return { label: elem.name, value: elem.name };
                                     }) }), columnType === 'number' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
@@ -710,20 +888,26 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
-                                        alignItems: 'center',
                                         justifyContent: 'space-between',
-                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                marginTop: '20px',
-                                            }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Start date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateStart, onChange: e => setDateStart(e.target.value), placeholder: "Start date" })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                marginTop: '20px',
-                                            }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "End date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateEnd, onChange: e => setDateEnd(e.target.value), placeholder: "End date" })] })] })), columnType === 'string' &&
+                                        marginTop: 20,
+                                    }, children: (0, jsx_runtime_1.jsx)(Dashboard_1.QuillDateRangePicker, { dateRange: dateRange ? [dateRange[0], dateRange[1]] : [null, null], label: '', onChangeDateRange: dateRange => {
+                                            setDateRange([dateRange[0], dateRange[1], null]);
+                                        }, preset: dateRange && dateRange.length === 3 && dateRange[2] !== null
+                                            ? dateRange[2]
+                                            : '', onChangePreset: preset => {
+                                            if (typeof preset === 'string') {
+                                                setDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)(preset));
+                                                return;
+                                            }
+                                            setDateRange([
+                                                preset?.startDate || null,
+                                                new Date(),
+                                                preset?.value || '',
+                                            ]);
+                                        }, presetOptions: dateRangePickerUtils_1.reportBuilderOptions }) })), columnType === 'string' &&
                                     columnStats &&
                                     columnStats.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         flex: 'flex',
@@ -753,7 +937,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, date
                                                         color: theme?.primaryTextColor,
                                                         fontFamily: theme?.fontFamily,
                                                     }, children: value })] }, value) }, value))) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
-                                            if (columnType === 'date' && (!dateStart || !dateEnd)) {
+                                            if (columnType === 'date' && !dateRange) {
                                                 return;
                                             }
                                             if (indexBeingEdited > -1) {