@quillsql/react 1.5.4 → 1.5.5

package/lib/ReportBuilder.js

@@ -45,17 +45,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -65,40 +54,43 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useContext, useCallback, useEffect, useRef, } from 'react';
+// import './nightOwlLight.css';
 import axios from 'axios';
-import { ClientContext, } from './Context';
-function ReportBuilder(_a) {
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import { XMarkIcon, CheckIcon, } from '@heroicons/react/20/solid';
+import { convertPostgresColumn } from './SQLEditor';
+import { format } from 'date-fns';
+export default function ReportBuilder(_a) {
     var _this = this;
-    var schema = _a.schema, containerStyle = _a.containerStyle;
+    var onChangeQuery = _a.onChangeQuery, onChangeData = _a.onChangeData, onChangeColumns = _a.onChangeColumns, onChangeLoading = _a.onChangeLoading, onError = _a.onError, SelectComponent = _a.SelectComponent;
     var _b = useState([]), data = _b[0], setData = _b[1];
     var client = useContext(ClientContext)[0];
-    // const [organization] = useContext(OrganizationContext);
-    // const [environment] = useContext(EnvironmentContext);
-    var _c = useState([]), columns = _c[0], setColumns = _c[1];
-    var _d = useState([]), fields = _d[0], setFields = _d[1];
+    var _c = useContext(SchemaContext), schema = _c[0], setSchema = _c[1];
+    var theme = useContext(ThemeContext)[0];
+    var _d = useState([]), columns = _d[0], setColumns = _d[1];
+    var _e = useState([]), fields = _e[0], setFields = _e[1];
     useEffect(function () {
         function getData(schema) {
             return __awaiter(this, void 0, void 0, function () {
-                var _id, queryEndpoint, queryHeaders, response;
+                var publicKey, customerId, environment, response;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             if (!(schema.length && !data.length)) return [3 /*break*/, 2];
-                            _id = client._id, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders;
-                            return [4 /*yield*/, axios.post(queryEndpoint || 'https://quill-244421.uc.appspot.com/dashquery', {
-                                    query: "select * from ".concat(schema[0].name, " limit 10;"),
+                            publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
+                            return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
+                                    query: "select * from ".concat(schema[0].displayName, " limit 10;"),
                                 }, {
-                                    params: !queryEndpoint
-                                        ? {
-                                            orgId: organization && organization.id ? organization.id : '',
-                                            publicKey: _id,
-                                        }
-                                        : undefined,
-                                    headers: __assign(__assign({}, queryHeaders), { environment: environment }),
+                                    params: {
+                                        orgId: customerId,
+                                        publicKey: publicKey,
+                                    },
+                                    headers: {
+                                        Authorization: "Bearer ",
+                                        environment: environment || undefined,
+                                    },
                                 })];
                         case 1:
                             response = _a.sent();
@@ -111,42 +103,132 @@ function ReportBuilder(_a) {
         }
         getData(schema);
     }, [schema]);
+    useEffect(function () {
+        var isSubscribed = true;
+        function getSchema() {
+            return __awaiter(this, void 0, void 0, function () {
+                var publicKey, environment, response3;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            publicKey = client.publicKey, environment = client.environment;
+                            return [4 /*yield*/, axios.get("https://quill-344421.uc.r.appspot.com/schema2/".concat(publicKey, "/"), {
+                                    headers: {
+                                        Authorization: "Bearer ",
+                                        environment: environment || undefined,
+                                    },
+                                })];
+                        case 1:
+                            response3 = _a.sent();
+                            if (isSubscribed) {
+                                setSchema(response3.data.tables);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        if (isSubscribed) {
+            getSchema();
+        }
+        return function () {
+            isSubscribed = false;
+        };
+    }, []);
     var runQuery = function (query) { return __awaiter(_this, void 0, void 0, function () {
-        var _id, response;
+        var publicKey, customerId, environment, response;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _id = client._id;
-                    return [4 /*yield*/, axios.post(queryEndpoint, {
+                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
+                    return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
                             query: query,
                         }, {
                             params: {
-                                orgId: organization && organization.id ? organization.id : '',
-                                publicKey: _id,
+                                orgId: customerId,
+                                publicKey: publicKey,
+                            },
+                            headers: {
+                                Authorization: "Bearer ",
+                                environment: environment || undefined,
                             },
-                            headers: queryHeaders,
                         })];
                 case 1:
                     response = _a.sent();
+                    if (response && response.data && response.data.errorMessage) {
+                        onError(response.data.errorMessage);
+                        setData([]);
+                        onChangeData([]);
+                        setColumns([]);
+                        onChangeColumns([]);
+                        setFields([]);
+                        return [2 /*return*/];
+                    }
                     setData(response.data.rows);
+                    onChangeData(response.data.rows);
                     setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
+                    onChangeColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
                     setFields(response.data.fields);
                     return [2 /*return*/];
             }
         });
     }); };
-    return (_jsx("div", __assign({ className: "flex flex-col pt-[0px] pl-[100px]" }, { children: _jsxs("div", __assign({ style: { width: 'calc(100vw - 30px)' }, className: "flex mt-[25px] flex-col pr-[50px] absolute z-10" }, { children: [_jsx("h1", __assign({ className: "text-3xl mb-[25px] ml-[25px] pt-[0px] mt-[15px] font-semibold text-[#384151]" }, { children: "Report builder" })), schema.length > 0 && (_jsx(ReportingTool, { data: data, schema: schema, runQuery: runQuery })), data.length > 0 && columns.length > 0 ? (_jsx(Chart, { colors: ['red', 'blue'], containerStyle: {
-                        width: 'calc(100% - 700px)',
-                        height: 693,
-                    }, config: {
-                        chartType: 'table',
-                        rows: Array.from(data),
-                        yAxisFields: Array.from(columns),
-                    } })) : null] })) })));
+    if (!schema.length) {
+        return null;
+    }
+    return (_jsx(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent }));
+}
+export function getPostgresBasicType(column) {
+    var format;
+    // first check if column.dataTypeID exists
+    if (column.dataTypeID) {
+        switch (column.dataTypeID) {
+            case 20: // int8
+            case 21: // int2
+            case 23: // int4
+            case 700: // float4
+            case 701: // float8
+            case 1700: // numeric
+                format = 'number';
+                break;
+            case 1082: // date
+            case 1083: // time
+            case 1184: // timestamptz
+            case 1114: // timestamp
+                format = 'date';
+                break;
+            case 1043: // varchar
+            default:
+                format = 'string';
+        }
+    }
+    else if (column.fieldType) {
+        // if column.dataTypeID doesn't exist, check column.fieldType
+        switch (column.fieldType) {
+            case 'int8':
+            case 'int2':
+            case 'int4':
+            case 'float4':
+            case 'float8':
+            case 'numeric':
+                format = 'number';
+                break;
+            case 'date':
+            case 'time':
+            case 'timestamptz':
+            case 'timestamp':
+                format = 'date';
+                break;
+            case 'varchar':
+            default:
+                format = 'string';
+        }
+    }
+    return format;
 }
 function ReportingTool(_a) {
     var _this = this;
-    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery;
+    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery, SelectComponent = _a.SelectComponent, onChangeQuery = _a.onChangeQuery, theme = _a.theme;
     var _b = useState(schema[0]), selectedTable = _b[0], setSelectedTable = _b[1];
     var _c = useState(schema[0].columns[0]), selectedColumn = _c[0], setSelectedColumn = _c[1];
     var _d = useState([]), filters = _d[0], setFilters = _d[1];
@@ -157,7 +239,7 @@ function ReportingTool(_a) {
         distinct: { type: null },
         columns: '*',
         into: { position: null },
-        from: [{ db: null, table: schema[0].name, as: null }],
+        from: [{ db: null, table: schema[0].displayName, as: null }],
         where: null,
         groupby: null,
         having: null,
@@ -172,24 +254,29 @@ function ReportingTool(_a) {
     var _k = useState({}), computedColumns = _k[0], setComputedColumns = _k[1];
     var _l = useState([]), stringFilterValues = _l[0], setStringFilterValues = _l[1];
     var _m = useState(getPostgresBasicType(schema[0].columns[0])), columnType = _m[0], setColumnType = _m[1];
+    var _o = useState(''), sqlQuery = _o[0], setSqlQuery = _o[1];
     // month | week | day | quarter
-    var _o = useState('month'), dateBucket = _o[0], setDateBucket = _o[1];
-    var ref = useRef();
-    var _p = useState(-1), indexBeingEdited = _p[0], setIndexBeingEdited = _p[1];
-    var _q = useState([]), groupBys = _q[0], setGroupBys = _q[1];
-    var _r = useState([]), aggregations = _r[0], setAggregations = _r[1];
-    var _s = useState(schema[0].columns[0]), selectedGroupByColumn = _s[0], setSelectedGroupByColumn = _s[1];
-    var _t = useState(getPostgresBasicType(schema[0].columns[0])), groupByColumnType = _t[0], setGroupByColumnType = _t[1];
-    var groupByRef = useRef(null);
-    var _u = useState(-1), groupByIndexBeingEdited = _u[0], setGroupByIndexBeingEdited = _u[1];
+    var _p = useState('month'), dateBucket = _p[0], setDateBucket = _p[1];
+    var _q = useState(-1), indexBeingEdited = _q[0], setIndexBeingEdited = _q[1];
+    var _r = useState([]), groupBys = _r[0], setGroupBys = _r[1];
+    var _s = useState([]), aggregations = _s[0], setAggregations = _s[1];
+    var _t = useState(schema[0].columns[0]), selectedGroupByColumn = _t[0], setSelectedGroupByColumn = _t[1];
+    var _u = useState(getPostgresBasicType(schema[0].columns[0])), groupByColumnType = _u[0], setGroupByColumnType = _u[1];
+    var _v = useState(schema[0].columns[0].name), selectedSortByColumn = _v[0], setSelectedSortByColumn = _v[1];
+    var _w = useState([]), sortBys = _w[0], setSortBys = _w[1];
+    var _x = useState('ascending'), selectedSortByDirection = _x[0], setSelectedSortByDirection = _x[1];
+    var _y = useState(-1), groupByIndexBeingEdited = _y[0], setGroupByIndexBeingEdited = _y[1];
+    var _z = useState(-1), sortByIndexBeingEdited = _z[0], setSortByIndexBeingEdited = _z[1];
+    var _0 = useState(schema[0].columns.map(function (col) { return col.name; })), sortableColumns = _0[0], setSortableColumns = _0[1];
     var addGroupBy = function () {
         if (selectedGroupByColumn && groupByColumnType) {
             if (groupByColumnType === 'string') {
                 setGroupBys(function (groupBys) {
                     return __spreadArray(__spreadArray([], groupBys, true), [
                         {
-                            column: selectedColumn.name,
-                            columnType: columnType,
+                            column: selectedGroupByColumn.name,
+                            columnType: groupByColumnType,
+                            tag: selectedGroupByColumn.name,
                         },
                     ], false);
                 });
@@ -203,28 +290,65 @@ function ReportingTool(_a) {
                 setGroupBys(function (groupBys) {
                     return __spreadArray(__spreadArray([], groupBys, true), [
                         {
-                            column: selectedColumn.name,
-                            columnType: columnType,
+                            column: selectedGroupByColumn.name,
+                            columnType: groupByColumnType,
                             bucket: dateBucket,
+                            tag: dateBucket,
                         },
                     ], false);
                 });
-                setDateBucket('month');
                 return;
             }
         }
     };
-    var removeGroupBy = function (index) { };
-    var selectGroupBy = function (index) { };
-    var updateGroupBy = function (index) { };
-    useEffect(function () {
-        setSelectedColumn(selectedTable.columns[0]);
-        setAST(function (AST) {
-            return __assign(__assign({}, AST), { from: [{ db: null, table: selectedTable.name, as: null }] });
+    var addSortBy = function () {
+        setSortBys(function (sortBys) {
+            return __spreadArray(__spreadArray([], sortBys, true), [
+                {
+                    column: selectedSortByColumn,
+                    direction: selectedSortByDirection,
+                },
+            ], false);
         });
-    }, [selectedTable]);
+    };
+    var removeSortBy = function (index) {
+        setSortBys(function (oldSortBys) {
+            var newSortBys = __spreadArray([], oldSortBys, true);
+            newSortBys.splice(index, 1);
+            return newSortBys;
+        });
+        setSortByIndexBeingEdited(-1);
+    };
+    var removeGroupBy = function (index) {
+        var columnBeingDeleted = groupBys[index].tag;
+        setSortBys(function (oldSortBys) {
+            var newSortBys = __spreadArray([], oldSortBys.filter(function (sortBy) { return sortBy.column !== columnBeingDeleted; }), true);
+            return newSortBys;
+        });
+        setGroupBys(function (oldGroupBys) {
+            var newGroupBys = __spreadArray([], oldGroupBys, true);
+            newGroupBys.splice(index, 1);
+            return newGroupBys;
+        });
+        setGroupByIndexBeingEdited(-1);
+    };
+    var updateSortBy = function (index) {
+        if (selectedSortByColumn && selectedSortByDirection) {
+            setSortBys(function (sortBys) {
+                var newSortBys = __spreadArray([], sortBys, true);
+                newSortBys[index] = {
+                    column: selectedSortByColumn,
+                    direction: selectedSortByDirection,
+                };
+                return newSortBys;
+            });
+            setSortByIndexBeingEdited(-1);
+            return;
+        }
+    };
     useEffect(function () {
         setColumnType(getPostgresBasicType(selectedColumn));
+        // console.log("WTF: ", selectedColumn);
     }, [selectedColumn]);
     useEffect(function () {
         setGroupByColumnType(getPostgresBasicType(selectedGroupByColumn));
@@ -247,12 +371,57 @@ function ReportingTool(_a) {
             setDateEnd(filter.dateEnd);
             setIndexBeingEdited(index);
         }
-        // if (ref.current) {
-        //   ref.current["data-headless-ui-state"] = "open";
-        // }
-        var button = ref.current.children[0].children[0];
-        if (button) {
-            button.click();
+    };
+    var selectSortBy = function (index) {
+        var sortBy = sortBys[index];
+        setSelectedSortByColumn(sortBy.column);
+        setSelectedSortByDirection(sortBy.direction);
+        setSortByIndexBeingEdited(index);
+    };
+    var selectGroupBy = function (index) {
+        var groupBy = groupBys[index];
+        var matchingColumn = selectedTable.columns.find(function (column) { return column.name === groupBy.column; });
+        setSelectedGroupByColumn(matchingColumn);
+        if (groupBy.bucket) {
+            setDateBucket(groupBy.bucket);
+        }
+        setGroupByIndexBeingEdited(index);
+    };
+    var updateGroupBy = function (index) {
+        if (selectedGroupByColumn && groupByColumnType) {
+            // if column changed, then auto delete the sort using that column
+            var columnBeingDeleted_1 = selectedGroupByColumn.name !== groupBys[index].column
+                ? groupBys[index].tag
+                : 'nocolumnbeingdeleted';
+            setSortBys(function (oldSortBys) {
+                var newSortBys = __spreadArray([], oldSortBys.filter(function (sortBy) { return sortBy.column !== columnBeingDeleted_1; }), true);
+                return newSortBys;
+            });
+            if (groupByColumnType === 'date') {
+                setGroupBys(function (groupBys) {
+                    var newGroupBys = __spreadArray([], groupBys, true);
+                    newGroupBys[index] = {
+                        column: selectedGroupByColumn.name,
+                        columnType: groupByColumnType,
+                        bucket: dateBucket,
+                        tag: dateBucket,
+                    };
+                    return newGroupBys;
+                });
+            }
+            else {
+                setGroupBys(function (groupBys) {
+                    var newGroupBys = __spreadArray([], groupBys, true);
+                    newGroupBys[index] = {
+                        column: selectedGroupByColumn.name,
+                        columnType: groupByColumnType,
+                        tag: selectedGroupByColumn.name,
+                    };
+                    return newGroupBys;
+                });
+            }
+            setGroupByIndexBeingEdited(-1);
+            return;
         }
     };
     var updateFilter = function (index) {
@@ -260,7 +429,6 @@ function ReportingTool(_a) {
             if (columnType === 'string') {
                 setFilters(function (filters) {
                     var newFilters = __spreadArray([], filters, true);
-                    console.log('INDEX: ', index);
                     newFilters[index] = {
                         column: selectedColumn.name,
                         columnType: columnType,
@@ -273,7 +441,6 @@ function ReportingTool(_a) {
             else if (columnType === 'number') {
                 setFilters(function (filters) {
                     var newFilters = __spreadArray([], filters, true);
-                    console.log('INDEX: ', index);
                     newFilters[index] = {
                         column: selectedColumn.name,
                         columnType: columnType,
@@ -368,22 +535,88 @@ function ReportingTool(_a) {
             }
         }
     };
+    var setAggregationColumn = function (column, index) {
+        // ex
+        setAggregations(function (aggregations) {
+            var newAggregations = __spreadArray([], aggregations, true);
+            newAggregations[index] = __assign(__assign({}, newAggregations[index]), { column: column });
+            return newAggregations;
+        });
+    };
+    var setAggregationType = function (aggregationType, index) {
+        // ex
+        setAggregations(function (aggregations) {
+            var newAggregations = __spreadArray([], aggregations, true);
+            newAggregations[index] = __assign(__assign({}, newAggregations[index]), { aggregationType: aggregationType });
+            return newAggregations;
+        });
+    };
+    var addAggregation = function () {
+        // setAggregations([
+        //   {
+        //     column: selectedTable.columns.filter(
+        //       (col) => getPostgresBasicType(col) === "number"
+        //     )[0],
+        //     aggregationType: "sum",
+        //   },
+        // ]);
+        setAggregations(function (aggregations) {
+            var newAggregations = __spreadArray(__spreadArray([], aggregations, true), [
+                {
+                    column: selectedTable.columns.filter(function (col) {
+                        return getPostgresBasicType(col) === 'number' &&
+                            !aggregations.map(function (elem) { return elem.name; }).includes(col.name);
+                    })[0],
+                    aggregationType: 'sum',
+                },
+            ], false);
+            return newAggregations;
+        });
+    };
+    useEffect(function () {
+        // if selected table changes, clear everything
+        if (selectedTable.displayName !== AST.from.table) {
+            setSelectedColumn(selectedTable.columns[0]);
+            setSortableColumns(selectedTable.columns.map(function (col) { return col.name; }));
+            setGroupBys([]);
+            setSortBys([]);
+            setFilters([]);
+            // setAST((AST) => {
+            //   return {
+            //     with: null,
+            //     type: "select",
+            //     options: null,
+            //     distinct: { type: null },
+            //     columns: "*",
+            //     into: { position: null },
+            //     where: null,
+            //     groupby: null,
+            //     having: null,
+            //     orderby: null,
+            //     limit: { seperator: "", value: [] },
+            //     window: null,
+            //     from: [{ db: null, table: selectedTable.displayName, as: null }],
+            //   };
+            // });
+            return;
+        }
+    }, [selectedTable]);
     // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
     useEffect(function () {
-        if (filters.length || (groupBys.length && aggregations.length)) {
+        if (filters.length || groupBys.length || aggregations.length) {
             var newAST = {
                 with: null,
                 type: 'select',
                 options: null,
-                distinct: { type: null },
-                columns: (aggregations.length && aggregations) || '*',
+                distinct: null,
+                columns: null,
                 into: { position: null },
-                from: [{ db: null, table: schema[0].name, as: null }],
+                from: [{ db: null, table: selectedTable.displayName, as: null }],
                 where: null,
                 groupby: null,
                 having: null,
                 orderby: null,
-                limit: { seperator: '', value: [] },
+                limit: null,
                 window: null,
             };
             // FILTERS
@@ -452,31 +685,166 @@ function ReportingTool(_a) {
                     };
                 }
                 if (!newAST.where) {
-                    newAST = __assign(__assign({}, newAST), { where: newCondition });
+                    newAST.where = newCondition;
                 }
                 else {
-                    newAST = __assign(__assign({}, newAST), { where: {
-                            type: 'binary_expr',
-                            operator: 'AND',
-                            left: newAST.where,
-                            right: newCondition,
-                        } });
+                    newAST.where = {
+                        type: 'binary_expr',
+                        operator: 'AND',
+                        left: newAST.where,
+                        right: newCondition,
+                    };
                 }
             }
+            // GROUP BYS and AGGREGATIONS
+            // if (groupBys.length > 0) {
+            //   newAST.groupby = groupBys.map((groupBy) => ({
+            //     type: "column_ref",
+            //     table: null,
+            //     column: groupBy.column,
+            //   }));
+            //   if (aggregations.length > 0) {
+            //     newAST.columns = [
+            //       ...groupBys.map((groupBy) => ({
+            //         expr: {
+            //           type: "column_ref",
+            //           table: null,
+            //           column: groupBy.column,
+            //         },
+            //         as: null,
+            //       })),
+            //       ...aggregations.map((aggregation) => ({
+            //         expr: {
+            //           type: "aggr_func",
+            //           name: aggregation.aggregationType.toUpperCase(),
+            //           args: {
+            //             expr: {
+            //               type: "column_ref",
+            //               table: null,
+            //               column: aggregation.column.name,
+            //             },
+            //           },
+            //           over: null,
+            //         },
+            //         as: null,
+            //       })),
+            //     ];
+            //   } else {
+            //     newAST.columns = groupBys.map((groupBy) => ({
+            //       expr: {
+            //         type: "column_ref",
+            //         table: null,
+            //         column: groupBy.column,
+            //       },
+            //       as: null,
+            //     }));
+            //   }
+            // } else {
+            //   newAST.columns = "*";
+            //   newAST.groupby = null;
+            // }
             // GROUP BYS
+            if (groupBys.length > 0) {
+                newAST.columns = [];
+                newAST.groupby = [];
+                for (var i = 0; i < groupBys.length; i++) {
+                    var groupBy = groupBys[i];
+                    if (groupBy.columnType === 'date') {
+                        newAST.columns.push({
+                            expr: {
+                                type: 'function',
+                                name: 'date_trunc',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [
+                                        {
+                                            type: 'single_quote_string',
+                                            value: groupBy.bucket,
+                                        },
+                                        {
+                                            type: 'column_ref',
+                                            table: null,
+                                            column: groupBy.column,
+                                        },
+                                    ],
+                                },
+                                over: null,
+                            },
+                            as: groupBy.bucket,
+                        });
+                        newAST.groupby.push({
+                            type: 'column_ref',
+                            table: null,
+                            column: groupBy.bucket,
+                        });
+                    }
+                    else {
+                        newAST.columns.push({
+                            expr: {
+                                type: 'column_ref',
+                                table: null,
+                                column: groupBy.column,
+                            },
+                            as: null,
+                        });
+                        newAST.groupby.push({
+                            type: 'column_ref',
+                            table: null,
+                            column: groupBy.column,
+                        });
+                    }
+                }
+                // AGGREGATIONS
+                if (aggregations.length > 0) {
+                    for (var i = 0; i < aggregations.length; i++) {
+                        var aggregation = aggregations[i];
+                        newAST.columns.push({
+                            expr: {
+                                type: 'aggr_func',
+                                name: aggregation.aggregationType.toUpperCase(),
+                                args: {
+                                    expr: {
+                                        type: 'column_ref',
+                                        table: null,
+                                        column: aggregation.column.name,
+                                    },
+                                },
+                                over: null,
+                            },
+                            as: null,
+                        });
+                    }
+                }
+            }
+            else {
+                newAST.columns = '*';
+                newAST.groupby = null;
+            }
+            if (sortBys.length > 0) {
+                newAST.orderby = [];
+                for (var i = 0; i < sortBys.length; i++) {
+                    var sortBy = sortBys[i];
+                    newAST.orderby.push({
+                        expr: { type: 'column_ref', table: null, column: sortBy.column },
+                        type: sortBy.direction === 'descending' ? 'DESC' : 'ASC',
+                    });
+                }
+                // "orderby":[{"expr":{"type":"column_ref","table":null,"column":"amount"},"type":"DESC"},{"expr":{"type":"column_ref","table":null,"column":"month"},"type":"ASC"}]
+            }
             setAST(newAST);
         }
-    }, [filters, groupBys, aggregations]);
+    }, [filters, groupBys, aggregations, sortBys]);
     var removeFilter = function (index) {
         setFilters(function (oldFilters) {
             var newFilters = __spreadArray([], oldFilters, true);
             newFilters.splice(index, 1);
             return newFilters;
         });
+        setIndexBeingEdited(-1);
     };
     var computeStats = useCallback(function (column) {
         var _a;
-        if (!computedColumns[column.name]) {
+        if (!computedColumns[column.name] && data) {
             var basicType = getPostgresBasicType(column);
             var result = void 0;
             if (basicType === 'number') {
@@ -524,9 +892,19 @@ function ReportingTool(_a) {
     //     }
     //   }
     // }, [AST]);
+    useEffect(function () {
+        if (!aggregations.length) {
+            setAggregations([
+                {
+                    column: selectedTable.columns.filter(function (col) { return getPostgresBasicType(col) === 'number'; })[0],
+                    aggregationType: 'sum',
+                },
+            ]);
+        }
+    }, [selectedGroupByColumn]);
     useEffect(function () {
         var getSqlQueryFromAST = function () { return __awaiter(_this, void 0, void 0, function () {
-            var response, sqlQuery, err_1;
+            var response, sqlQuery_1, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -535,9 +913,18 @@ function ReportingTool(_a) {
                         return [4 /*yield*/, axios.post('https://quill-344421.uc.r.appspot.com/sqlify', { ast: AST })];
                     case 1:
                         response = _a.sent();
-                        sqlQuery = response.data.query;
-                        if (sqlQuery) {
-                            runQuery(sqlQuery);
+                        sqlQuery_1 = response.data.query;
+                        // alert(sqlQuery);
+                        if (sqlQuery_1) {
+                            onChangeQuery(sqlQuery_1);
+                            runQuery(sqlQuery_1);
+                            setSqlQuery(sqlQuery_1);
+                            if (AST.columns === '*') {
+                                setSortableColumns(selectedTable.columns.map(function (col) { return col.name; }));
+                            }
+                            else if (AST.columns.length) {
+                                setSortableColumns(AST.columns.map(function (elem) { return elem.as || elem.expr.name; }));
+                            }
                         }
                         _a.label = 2;
                     case 2: return [3 /*break*/, 4];
@@ -551,133 +938,577 @@ function ReportingTool(_a) {
         }); };
         getSqlQueryFromAST();
     }, [AST]);
-    return (_jsxs("div", __assign({ className: "ml-[25px]" }, { children: [_jsx("div", __assign({ className: "text-sm mb-[6px] font-semibold text-[#384151]/[0.7]" }, { children: "Table" })), _jsx(Dropdown, { value: selectedTable.name, onChange: function (e) {
-                    var table = schema.find(function (t) { return t.name === e; });
+    useEffect(function () {
+        if (sortableColumns.length) {
+            setSelectedSortByColumn(sortableColumns[0]);
+        }
+    }, [sortableColumns]);
+    if (!schema || !schema.length) {
+        return null;
+    }
+    return (_jsxs("div", __assign({ style: { marginLeft: '25px' } }, { children: [_jsx("div", __assign({ style: {
+                    fontSize: '0.8rem',
+                    marginBottom: '6px',
+                    fontWeight: 'bold',
+                    color: theme.secondaryTextColor,
+                } }, { children: "Table" })), _jsx(SelectComponent, { value: selectedTable.displayName, onChange: function (e) {
+                    var table = schema.find(function (t) { return t.displayName === e; });
                     setSelectedTable(table);
-                }, options: schema.map(function (elem) {
-                    return { label: elem.name, value: elem.name };
-                }) }), _jsx("div", __assign({ className: "flex flex-col", style: { marginTop: 12 } }, { children: _jsx(AddFilterModal, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, ref: ref, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter }) }))] })));
+                }, options: (schema === null || schema === void 0 ? void 0 : schema.length)
+                    ? schema.map(function (elem) {
+                        return { label: elem.displayName, value: elem.displayName };
+                    })
+                    : [] }), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: '12px' } }, { children: [_jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, theme: theme }), _jsx(GroupByModal2, { selectedTable: selectedTable, groupBys: groupBys, selectedGroupByColumn: selectedGroupByColumn, setSelectedGroupByColumn: setSelectedGroupByColumn, addGroupBy: addGroupBy, groupByColumnType: groupByColumnType, removeGroupBy: removeGroupBy, selectGroupBy: selectGroupBy, groupByIndexBeingEdited: groupByIndexBeingEdited, updateGroupBy: updateGroupBy, aggregations: aggregations, setAggregationColumn: setAggregationColumn, setAggregationType: setAggregationType, SelectComponent: SelectComponent, addAggregation: addAggregation, dateBucket: dateBucket, setDateBucket: setDateBucket, theme: theme }), _jsx(SortByModal, { selectedTable: selectedTable, sortableColumns: sortableColumns, sortBys: sortBys, selectedSortByColumn: selectedSortByColumn, setSelectedSortByColumn: setSelectedSortByColumn, selectedSortByDirection: selectedSortByDirection, setSelectedSortByDirection: setSelectedSortByDirection, addSortBy: addSortBy, removeSortBy: removeSortBy, selectSortBy: selectSortBy, sortByIndexBeingEdited: sortByIndexBeingEdited, updateSortBy: updateSortBy, SelectComponent: SelectComponent, theme: theme })] }))] })));
 }
 function FilterTag(_a) {
-    var label = _a.label, removeFilter = _a.removeFilter, index = _a.index, selectFilter = _a.selectFilter;
+    var id = _a.id, label = _a.label, removeFilter = _a.removeFilter, index = _a.index, selectFilter = _a.selectFilter, theme = _a.theme;
     var handleRemoveFilter = function () {
         removeFilter(index);
     };
     var handleSelectFilter = function () {
         selectFilter(index);
     };
-    return (_jsxs("div", __assign({ onClick: handleSelectFilter, className: "flex ml-[12px] cursor-pointer border-[1px] border-[#EFF0FC] rounded-md bg-[#EFF0FC] pl-4 pr-2 py-1.5 text-sm font-medium text-[#384151] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" }, { children: [_jsx("div", __assign({ style: { textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: label })), _jsx("div", __assign({ 
+    return (_jsxs("div", __assign({ id: id, onClick: handleSelectFilter, style: {
+            marginLeft: '12px',
+            cursor: 'pointer',
+            border: '1px',
+            borderColor: '#EFF0FC',
+            borderRadius: 6,
+            backgroundColor: '#EFF0FC',
+            paddingLeft: '1rem',
+            paddingRight: '0.5rem',
+            // paddingTop: "0.44rem",
+            // paddingBottom: "0.44rem",
+            height: 35,
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: 14,
+            fontWeight: 'medium',
+            color: theme.primaryTextColor,
+            outline: 'none',
+            // ring: "2",
+            // ringColor: "white",
+            // ringOpacity: "75",
+        } }, { children: [_jsx("div", __assign({ id: id, style: { textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: label })), _jsx("div", __assign({ 
                 // onClick={handleRemoveFilter}
                 onClick: function (e) {
                     e.stopPropagation(); // Prevents the event from bubbling up to the parent
                     handleRemoveFilter();
-                }, className: "cursor-pointer flex items-center pl-1.5" }, { children: _jsx(XMarkIcon, { className: "h-5 w-5 text-[#384151]", "aria-hidden": "true" }) }))] })));
+                }, style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    paddingLeft: '0.375rem',
+                } }, { children: _jsx(XMarkIcon, { style: {
+                        height: '1.25rem',
+                        width: '1.25rem',
+                        color: theme.primaryTextColor,
+                    }, "aria-hidden": "true" }) }))] })));
 }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-var GroupByModal = React.forwardRef(function (props, ref) {
-    var selectedGroupByColumn = props.selectedGroupByColumn, addGroupBy = props.addGroupBy, setSelectedGroupByColumn = props.setSelectedGroupByColumn, selectedTable = props.selectedTable, groupByColumnType = props.groupByColumnType, groupByIndexBeingEdited = props.groupByIndexBeingEdited, updateGroupBy = props.updateGroupBy, groupBys = props.groupBys, removeGroupBy = props.removeGroupBy, selectGroupBy = props.selectGroupBy;
-    return (_jsxs(Menu, __assign({ as: "div", ref: ref, className: "relative inline-block text-left" }, { children: [_jsxs("div", __assign({ className: "flex flex-row items-center" }, { children: [_jsx(Menu.Button, __assign({ className: "inline-flex border-[1px] shadow-sm border-[#E7E7E7] rounded-md bg-black bg-opacity-0 px-4 py-1.5 text-sm font-medium text-[#384151] hover:bg-opacity-[0.03] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" }, { children: "Groups" })), _jsx("div", __assign({ style: { overflowX: 'scroll' }, className: "flex flex-row items-center" }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, index: index })); }) }))] })), _jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: _jsxs(Menu.Items, __assign({ className: "absolute left-0 mt-[12px] origin-top-right p-4 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" }, { children: [_jsx("div", __assign({ className: "text-sm mb-[6px] font-semibold text-[#384151]/[0.7]" }, { children: "Column" })), _jsx(Dropdown, { value: selectedGroupByColumn.name, onChange: function (e) {
-                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
-                                setSelectedGroupByColumn(column);
-                            }, options: selectedTable.columns.map(function (elem) {
-                                return { label: elem.name, value: elem.name };
-                            }) }), groupByColumnType === 'number' && (_jsx("div", { style: {
-                                width: 245,
-                                maxWidth: 245,
-                                //   height: 40,
-                                zIndex: 50,
-                                // position: "relative",
-                            } })), groupByColumnType === 'date' && (_jsx("div", { className: "flex flex-row items-center justify-between" })), groupByColumnType === 'string' && (_jsx("div", { className: "flex flex-col mt-[14px]" })), _jsx(Menu.Item, { children: function (_a) {
-                                var close = _a.close;
-                                return (_jsx("button", __assign({ className: "w-[245px] mt-[20px] py-2 px-3 bg-[#384151] hover:opacity-90 text-white font-medium rounded-md shoadow-sm", onClick: function () {
-                                        if (groupByIndexBeingEdited > -1) {
-                                            updateGroupBy(groupByIndexBeingEdited);
-                                            close();
-                                            return;
-                                        }
-                                        addGroupBy();
-                                        close();
-                                    } }, { children: groupByIndexBeingEdited > -1
-                                        ? 'Edit group by'
-                                        : 'Add group by' })));
-                            } })] })) }))] })));
-});
-var AddFilterModal = React.forwardRef(function (props, ref) {
-    var filters = props.filters, selectedColumn = props.selectedColumn, numberStart = props.numberStart, numberEnd = props.numberEnd, dateStart = props.dateStart, setDateStart = props.setDateStart, columnStats = props.columnStats, stringFilterValues = props.stringFilterValues, setStringFilterValues = props.setStringFilterValues, addFilter = props.addFilter, setSelectedColumn = props.setSelectedColumn, setNumberStart = props.setNumberStart, setNumberEnd = props.setNumberEnd, selectedTable = props.selectedTable, columnType = props.columnType, setDateEnd = props.setDateEnd, dateEnd = props.dateEnd, removeFilter = props.removeFilter, selectFilter = props.selectFilter, indexBeingEdited = props.indexBeingEdited, updateFilter = props.updateFilter;
-    return (_jsxs(Menu, __assign({ as: "div", ref: ref, className: "relative inline-block text-left" }, { children: [_jsxs("div", __assign({ className: "flex flex-row items-center" }, { children: [_jsx(Menu.Button, __assign({ className: "inline-flex border-[1px] shadow-sm border-[#E7E7E7] rounded-md bg-black bg-opacity-0 px-4 py-1.5 text-sm font-medium text-[#384151] hover:bg-opacity-[0.03] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" }, { children: "Filters" })), _jsx("div", __assign({ style: { overflowX: 'scroll' }, className: "flex flex-row items-center" }, { children: filters.map(function (elem, index) { return (_jsx(FilterTag, { label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index })); }) }))] })), _jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: _jsxs(Menu.Items, __assign({ style: { zIndex: 120 }, className: "absolute left-0 mt-[12px] origin-top-right p-4 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" }, { children: [_jsx("div", __assign({ className: "text-sm mb-[6px] font-semibold text-[#384151]/[0.7]" }, { children: "Column" })), _jsx(Dropdown, { value: selectedColumn.name, onChange: function (e) {
-                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
-                                setSelectedColumn(column);
-                            }, options: selectedTable.columns.map(function (elem) {
-                                return { label: elem.name, value: elem.name };
-                            }) }), columnType === 'number' && (_jsxs("div", __assign({ style: {
-                                width: 245,
-                                maxWidth: 245,
-                                //   height: 40,
-                                zIndex: 50,
-                                // position: "relative",
-                            } }, { children: [_jsx(MultiRangeSlider, { style: {
-                                        border: 'none',
-                                        boxShadow: 'none',
-                                        padding: 0,
-                                        marginTop: 28,
-                                    }, min: 0, max: 1000000, 
-                                    // step={5}
-                                    minValue: numberStart, maxValue: numberEnd, ruler: false, label: false, preventWheel: true, barLeftColor: "transparent", barRightColor: "transparent", barInnerColor: "#384151", onInput: function (e) {
-                                        setNumberStart(e.minValue);
-                                        setNumberEnd(e.maxValue);
-                                    } }), _jsxs("div", __assign({ className: "flex flex-row items-center justify-between" }, { children: [_jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "Minimum" })), _jsx("input", { 
-                                                    //   type="number"
-                                                    value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); }, placeholder: "Start number", 
-                                                    // style={{ textAlign: "right" }}
-                                                    className: "w-[100px] border-[1px] text-[#384151] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] })), _jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "Maximum" })), _jsx("input", { 
-                                                    //   type="number"
-                                                    value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); }, placeholder: "End number", 
-                                                    // style={{ textAlign: "right" }}
-                                                    className: "w-[100px] border-[1px] text-[#384151] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] }))] }))] }))), columnType === 'date' && (_jsxs("div", __assign({ className: "flex flex-row items-center justify-between" }, { children: [_jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date", className: "w-[115px] text-sm text-[#384151] border-[1px] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] })), _jsxs("div", __assign({ className: "flex flex-col mt-[20px]" }, { children: [_jsx("div", __assign({ className: "text-sm font-semibold text-[#384151]/[0.7]" }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date", className: "w-[115px] text-sm text-[#384151] border-[1px] mt-[4px] border-[#E7E7E7] bg-white rounded-md shadow-sm px-2 py-1.5" })] }))] }))), columnType === 'string' && columnStats && columnStats.length > 0 && (_jsx("div", __assign({ className: "flex flex-col mt-[14px]" }, { children: columnStats.map(function (value) { return (_jsxs("div", __assign({ className: "flex flex-row items-center" }, { children: [_jsx(DivCheckbox
-                                    //   type="checkbox"
-                                    //   style={{
-                                    //     border: "1px solid red",
-                                    //     borderRadius: "4px",
-                                    //   boxSizing: "border-box",
-                                    // color: "#fff",
-                                    //     height: "18px",
-                                    //     minWidth: "18px",
-                                    //     position: "relative",
-                                    //     width: "18px",
-                                    //   }}
-                                    // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
-                                    , { 
-                                        //   type="checkbox"
-                                        //   style={{
-                                        //     border: "1px solid red",
-                                        //     borderRadius: "4px",
-                                        //   boxSizing: "border-box",
-                                        // color: "#fff",
-                                        //     height: "18px",
-                                        //     minWidth: "18px",
-                                        //     position: "relative",
-                                        //     width: "18px",
-                                        //   }}
-                                        // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
-                                        checked: stringFilterValues.includes(value), onChange: function () {
-                                            setStringFilterValues(function (prev) {
-                                                return prev.includes(value)
-                                                    ? prev.filter(function (v) { return v !== value; })
-                                                    : __spreadArray(__spreadArray([], prev, true), [value], false);
-                                            });
-                                        } }), _jsx("div", __assign({ className: "ml-[6px] text-[#384151]" }, { children: value }))] }), value)); }) }))), _jsx(Menu.Item, { children: function (_a) {
-                                var close = _a.close;
-                                return (_jsx("button", __assign({ className: "w-[245px] mt-[20px] py-2 px-3 bg-[#384151] hover:opacity-90 text-white font-medium rounded-md shoadow-sm", onClick: function () {
-                                        if (indexBeingEdited > -1) {
-                                            updateFilter(indexBeingEdited);
-                                            close();
-                                            return;
-                                        }
-                                        addFilter();
-                                        close();
-                                    } }, { children: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })));
-                            } })] })) }))] })));
-});
+var SortByModal = function (_a) {
+    var selectedSortByColumn = _a.selectedSortByColumn, selectedSortByDirection = _a.selectedSortByDirection, setSelectedSortByColumn = _a.setSelectedSortByColumn, setSelectedSortByDirection = _a.setSelectedSortByDirection, selectedTable = _a.selectedTable, sortableColumns = _a.sortableColumns, removeSortBy = _a.removeSortBy, selectSortBy = _a.selectSortBy, updateSortBy = _a.updateSortBy, addSortBy = _a.addSortBy, sortBys = _a.sortBys, SelectComponent = _a.SelectComponent, sortByIndexBeingEdited = _a.sortByIndexBeingEdited, theme = _a.theme;
+    var dropdownRef = useRef(null);
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    useEffect(function () {
+        // Event listener to close the dropdown menu when clicking outside
+        var handleOutsideClick = function (event) {
+            if (event.target.id === 'sort-toggle-button' ||
+                event.target.id === 'sort-tag') {
+                setIsOpen(function (isOpen) { return !isOpen; });
+                return;
+            }
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        // Attach the event listener to the document
+        document.addEventListener('click', handleOutsideClick);
+        // Clean up the event listener on component unmount
+        return function () {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, []);
+    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: 12 } }, { children: _jsxs("div", __assign({ style: {
+                position: 'relative',
+                display: 'inline-block',
+                textAlign: 'left',
+            } }, { children: [_jsxs("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    } }, { children: [_jsx("button", __assign({ id: "sort-toggle-button", 
+                            // onClick={() => setIsOpen((isOpen) => !isOpen)}
+                            type: "button", "aria-haspopup": "menu", "aria-expanded": "true", "data-headlessui-state": "open", style: {
+                                display: 'inline-flex',
+                                boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+                                borderRadius: '0.375rem',
+                                backgroundColor: 'rgba(0, 0, 0, 0)',
+                                padding: '0.375rem 0.75rem',
+                                fontSize: '0.875rem',
+                                fontWeight: '500',
+                                color: theme.primaryTextColor,
+                                borderWidth: 1,
+                                borderStyle: 'solid',
+                                borderColor: theme.borderColor,
+                            } }, { children: "Sort" })), _jsx("div", __assign({ style: {
+                                overflowX: 'scroll',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            } }, { children: sortBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, index: index, theme: theme })); }) }))] })), isOpen && (_jsxs("div", __assign({ ref: dropdownRef, role: "menu", tabindex: "0", "data-headlessui-state": "open", style: {
+                        zIndex: 120,
+                        position: 'absolute',
+                        left: '0px',
+                        marginTop: '12px',
+                        transformOrigin: 'right top',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: '1rem',
+                        borderRadius: '0.375rem',
+                        backgroundColor: 'rgb(255, 255, 255)',
+                        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
+                    }, className: "transform opacity-100 scale-100" }, { children: [_jsx("div", __assign({ style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            } }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
+                                            fontSize: '0.875rem',
+                                            marginBottom: '6px',
+                                            fontWeight: '600',
+                                            color: '#384151',
+                                            opacity: 0.7,
+                                        } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedSortByColumn, onChange: function (e) {
+                                            setSelectedSortByColumn(e);
+                                        }, options: sortableColumns.map(function (elem) {
+                                            return { label: elem, value: elem };
+                                        }) })] })) })), _jsx("div", __assign({ style: {
+                                fontSize: '0.875rem',
+                                marginBottom: '6px',
+                                fontWeight: '600',
+                                color: '#384151',
+                                opacity: 0.7,
+                                marginTop: 20,
+                            } }, { children: "Direction" })), _jsx(SelectComponent, { value: selectedSortByDirection, onChange: function (e) {
+                                setSelectedSortByDirection(e);
+                            }, options: [
+                                { label: 'ascending', value: 'ascending' },
+                                { label: 'descending', value: 'descending' },
+                            ] }), _jsx("button", __assign({ style: {
+                                width: '15.3125rem',
+                                marginTop: '1.25rem',
+                                paddingTop: '0.5rem',
+                                paddingBottom: '0.5rem',
+                                paddingLeft: '0.75rem',
+                                paddingRight: '0.75rem',
+                                backgroundColor: '#384151',
+                                // hover: { opacity: "90" },
+                                color: 'white',
+                                fontWeight: '500',
+                                borderRadius: '0.375rem',
+                                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                            }, onClick: function () {
+                                if (sortByIndexBeingEdited > -1) {
+                                    updateSortBy(sortByIndexBeingEdited);
+                                    setIsOpen(false);
+                                    // close();
+                                    return;
+                                }
+                                addSortBy();
+                                setIsOpen(false);
+                                // close();
+                            } }, { children: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' }))] })))] })) })));
+};
+var GroupByModal2 = function (_a) {
+    var selectedGroupByColumn = _a.selectedGroupByColumn, addGroupBy = _a.addGroupBy, setSelectedGroupByColumn = _a.setSelectedGroupByColumn, selectedTable = _a.selectedTable, groupByColumnType = _a.groupByColumnType, groupByIndexBeingEdited = _a.groupByIndexBeingEdited, updateGroupBy = _a.updateGroupBy, groupBys = _a.groupBys, removeGroupBy = _a.removeGroupBy, selectGroupBy = _a.selectGroupBy, SelectComponent = _a.SelectComponent, aggregations = _a.aggregations, setAggregationColumn = _a.setAggregationColumn, setAggregationType = _a.setAggregationType, addAggregation = _a.addAggregation, dateBucket = _a.dateBucket, setDateBucket = _a.setDateBucket, theme = _a.theme;
+    var dropdownRef = useRef(null);
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    useEffect(function () {
+        // Event listener to close the dropdown menu when clicking outside
+        var handleOutsideClick = function (event) {
+            if (event.target.id === 'group-toggle-button' ||
+                event.target.id === 'group-tag') {
+                setIsOpen(function (isOpen) { return !isOpen; });
+                return;
+            }
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        // Attach the event listener to the document
+        document.addEventListener('click', handleOutsideClick);
+        // Clean up the event listener on component unmount
+        return function () {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, []);
+    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: _jsxs("div", __assign({ style: {
+                position: 'relative',
+                display: 'inline-block',
+                textAlign: 'left',
+            } }, { children: [_jsxs("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    } }, { children: [_jsx("button", __assign({ id: "group-toggle-button", 
+                            // onClick={() => setIsOpen((isOpen) => !isOpen)}
+                            type: "button", "aria-haspopup": "menu", "aria-expanded": "true", "data-headlessui-state": "open", style: {
+                                display: 'inline-flex',
+                                boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+                                borderRadius: '0.375rem',
+                                backgroundColor: 'rgba(0, 0, 0, 0)',
+                                padding: '0.375rem 0.75rem',
+                                fontSize: '0.875rem',
+                                fontWeight: '500',
+                                color: theme.primaryTextColor,
+                                borderWidth: 1,
+                                borderStyle: 'solid',
+                                borderColor: theme.borderColor,
+                            } }, { children: "Groups" })), _jsx("div", __assign({ style: {
+                                overflowX: 'scroll',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            } }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, index: index })); }) }))] })), isOpen && (_jsxs("div", __assign({ ref: dropdownRef, role: "menu", tabindex: "0", "data-headlessui-state": "open", style: {
+                        zIndex: 120,
+                        position: 'absolute',
+                        left: '0px',
+                        marginTop: '12px',
+                        transformOrigin: 'right top',
+                        padding: '1rem',
+                        borderRadius: '0.375rem',
+                        backgroundColor: 'rgb(255, 255, 255)',
+                        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
+                    } }, { children: [_jsxs("div", __assign({ style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
+                                                fontSize: '0.875rem',
+                                                marginBottom: '6px',
+                                                fontWeight: '600',
+                                                color: '#384151',
+                                                opacity: 0.7,
+                                            } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedGroupByColumn.name, onChange: function (e) {
+                                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                                setSelectedGroupByColumn(column);
+                                            }, options: selectedTable.columns.map(function (elem) {
+                                                return { label: elem.name, value: elem.name };
+                                            }) })] })), groupByColumnType === 'date' && (_jsxs("div", __assign({ style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        marginLeft: 12,
+                                    } }, { children: [_jsx("div", __assign({ style: {
+                                                fontSize: '0.875rem',
+                                                marginBottom: '6px',
+                                                fontWeight: '600',
+                                                color: '#384151',
+                                                opacity: 0.7,
+                                            } }, { children: "Bucket" })), _jsx(SelectComponent, { value: dateBucket, onChange: function (e) {
+                                                setDateBucket(e);
+                                            }, options: [
+                                                { label: 'month', value: 'month' },
+                                                { label: 'day', value: 'day' },
+                                                { label: 'week', value: 'week' },
+                                            ] })] })))] })), _jsx("div", __assign({ style: {
+                                fontSize: '0.875rem',
+                                marginBottom: '6px',
+                                fontWeight: '600',
+                                color: '#384151',
+                                opacity: 0.7,
+                                marginTop: 20,
+                            } }, { children: "Aggregations" })), aggregations.map(function (aggregation, index) {
+                            var _a;
+                            return (
+                            // setAggregationType
+                            _jsxs("div", __assign({ style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                } }, { children: [_jsx(SelectComponent, { value: (_a = aggregation.column) === null || _a === void 0 ? void 0 : _a.name, onChange: function (e) {
+                                            var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                            setAggregationColumn(column, index);
+                                        }, options: selectedTable.columns.map(function (elem) {
+                                            return { label: elem.name, value: elem.name };
+                                        }) }), _jsx("div", { style: { width: 12 } }), _jsx(SelectComponent, { value: aggregation.aggregationType, onChange: function (e) {
+                                            setAggregationType(e, index);
+                                        }, options: [
+                                            { label: 'sum', value: 'sum' },
+                                            { label: 'average', value: 'average' },
+                                            { label: 'count', value: 'count' },
+                                        ] })] })));
+                        }), _jsx("button", __assign({ style: {
+                                width: '100%',
+                                marginTop: '1.25rem',
+                                paddingTop: '0.5rem',
+                                paddingBottom: '0.5rem',
+                                paddingLeft: '0.75rem',
+                                paddingRight: '0.75rem',
+                                backgroundColor: '#384151',
+                                // hover: { opacity: "90" },
+                                color: 'white',
+                                fontWeight: '500',
+                                borderRadius: '0.375rem',
+                                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                            }, onClick: function () {
+                                if (groupByIndexBeingEdited > -1) {
+                                    updateGroupBy(groupByIndexBeingEdited);
+                                    setIsOpen(false);
+                                    // close();
+                                    return;
+                                }
+                                addGroupBy();
+                                setIsOpen(false);
+                                // close();
+                            } }, { children: groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by' }))] })))] })) })));
+};
+var AddFilterModal2 = function (_a) {
+    var filters = _a.filters, selectedColumn = _a.selectedColumn, numberStart = _a.numberStart, numberEnd = _a.numberEnd, dateStart = _a.dateStart, setDateStart = _a.setDateStart, columnStats = _a.columnStats, stringFilterValues = _a.stringFilterValues, setStringFilterValues = _a.setStringFilterValues, addFilter = _a.addFilter, setSelectedColumn = _a.setSelectedColumn, setNumberStart = _a.setNumberStart, setNumberEnd = _a.setNumberEnd, selectedTable = _a.selectedTable, columnType = _a.columnType, setDateEnd = _a.setDateEnd, dateEnd = _a.dateEnd, removeFilter = _a.removeFilter, selectFilter = _a.selectFilter, indexBeingEdited = _a.indexBeingEdited, updateFilter = _a.updateFilter, SelectComponent = _a.SelectComponent, theme = _a.theme;
+    var dropdownRef = useRef(null);
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    useEffect(function () {
+        // Event listener to close the dropdown menu when clicking outside
+        var handleOutsideClick = function (event) {
+            if (event.target.id === 'toggle-button' ||
+                event.target.id === 'filter-tag') {
+                setIsOpen(function (isOpen) { return !isOpen; });
+                return;
+            }
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        // Attach the event listener to the document
+        document.addEventListener('click', handleOutsideClick);
+        // Clean up the event listener on component unmount
+        return function () {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, []);
+    return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
+                    position: 'relative',
+                    display: 'inline-block',
+                    textAlign: 'left',
+                } }, { children: [_jsxs("div", __assign({ style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        } }, { children: [_jsx("button", __assign({ id: "toggle-button", 
+                                // onClick={() => setIsOpen((isOpen) => !isOpen)}
+                                type: "button", "aria-haspopup": "menu", "aria-expanded": "true", "data-headlessui-state": "open", style: {
+                                    display: 'inline-flex',
+                                    borderWidth: '1px',
+                                    borderStyle: 'solid',
+                                    borderColor: theme.borderColor,
+                                    boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+                                    borderRadius: '0.375rem',
+                                    backgroundColor: theme.backgroundColor,
+                                    padding: '0.375rem 0.75rem',
+                                    fontSize: '0.875rem',
+                                    fontWeight: '500',
+                                    color: theme.primaryTextColor,
+                                } }, { children: "Filters" })), _jsx("div", __assign({ style: {
+                                    overflowX: 'scroll',
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                } }, { children: filters.map(function (elem, index) { return (_jsx(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index })); }) }))] })), isOpen && (_jsxs("div", __assign({ ref: dropdownRef, role: "menu", tabindex: "0", "data-headlessui-state": "open", style: {
+                            zIndex: 120,
+                            position: 'absolute',
+                            left: '0px',
+                            marginTop: '12px',
+                            transformOrigin: 'right top',
+                            padding: '1rem',
+                            borderRadius: '0.375rem',
+                            backgroundColor: 'rgb(255, 255, 255)',
+                            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        } }, { children: [_jsx("div", __assign({ style: {
+                                    fontSize: '0.875rem',
+                                    marginBottom: '6px',
+                                    fontWeight: '600',
+                                    color: theme.secondaryFontColor,
+                                    // opacity: 0.7,
+                                } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedColumn.name, onChange: function (e) {
+                                    var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                    setSelectedColumn(column);
+                                }, options: selectedTable.columns.map(function (elem) {
+                                    return { label: elem.name, value: elem.name };
+                                }) }), columnType === 'number' && (_jsx("div", __assign({ style: {
+                                    width: '245px',
+                                    maxWidth: '245px',
+                                    zIndex: 50,
+                                } }, { children: _jsxs("div", __assign({ style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                    } }, { children: [_jsxs("div", __assign({ style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                marginTop: '20px',
+                                            } }, { children: [_jsx("div", __assign({ style: {
+                                                        fontSize: '0.875rem',
+                                                        fontWeight: '600',
+                                                        color: '#384151',
+                                                        opacity: 0.75,
+                                                    } }, { children: "Minimum" })), _jsx("input", { 
+                                                    // type="number"
+                                                    value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); }, placeholder: "", style: {
+                                                        textAlign: 'right',
+                                                        width: '100px',
+                                                        border: '1px solid #E7E7E7',
+                                                        color: '#384151',
+                                                        marginTop: '4px',
+                                                        height: 38,
+                                                        paddingRight: 8,
+                                                        backgroundColor: 'white',
+                                                        borderRadius: '0.375rem',
+                                                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                                                    } })] })), _jsxs("div", __assign({ style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                marginTop: '20px',
+                                            } }, { children: [_jsx("div", __assign({ style: {
+                                                        fontSize: '0.875rem',
+                                                        fontWeight: '600',
+                                                        color: '#384151',
+                                                        opacity: 0.75,
+                                                    } }, { children: "Maximum" })), _jsx("input", { 
+                                                    // type="number"
+                                                    value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); }, placeholder: "", style: {
+                                                        textAlign: 'right',
+                                                        width: '100px',
+                                                        border: '1px solid #E7E7E7',
+                                                        color: '#384151',
+                                                        marginTop: '4px',
+                                                        paddingRight: 8,
+                                                        height: 38,
+                                                        backgroundColor: 'white',
+                                                        borderRadius: '0.375rem',
+                                                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                                                    } })] }))] })) }))), columnType === 'date' && (_jsxs("div", __assign({ style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                } }, { children: [_jsxs("div", __assign({ style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            marginTop: '20px',
+                                        } }, { children: [_jsx("div", __assign({ style: {
+                                                    fontSize: '0.8rem',
+                                                    fontWeight: '600',
+                                                    color: 'rgba(56, 65, 81, 0.7)',
+                                                } }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date", style: {
+                                                    width: '115px',
+                                                    fontSize: '0.8rem',
+                                                    color: '#384151',
+                                                    borderWidth: '1px',
+                                                    marginTop: '4px',
+                                                    borderColor: '#E7E7E7',
+                                                    backgroundColor: 'white',
+                                                    borderRadius: '0.375rem',
+                                                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                                                    paddingLeft: '0.5rem',
+                                                    paddingRight: '0.5rem',
+                                                    paddingTop: '0.375rem',
+                                                    paddingBottom: '0.375rem',
+                                                } })] })), _jsxs("div", __assign({ style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            marginTop: '20px',
+                                        } }, { children: [_jsx("div", __assign({ style: {
+                                                    fontSize: '0.8rem',
+                                                    fontWeight: '600',
+                                                    color: 'rgba(56, 65, 81, 0.7)',
+                                                } }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date", style: {
+                                                    width: '115px',
+                                                    fontSize: '0.8rem',
+                                                    color: '#384151',
+                                                    borderWidth: '1px',
+                                                    marginTop: '4px',
+                                                    borderColor: '#E7E7E7',
+                                                    backgroundColor: 'white',
+                                                    borderRadius: '0.375rem',
+                                                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                                                    paddingLeft: '0.5rem',
+                                                    paddingRight: '0.5rem',
+                                                    paddingTop: '0.375rem',
+                                                    paddingBottom: '0.375rem',
+                                                } })] }))] }))), columnType === 'string' &&
+                                columnStats &&
+                                columnStats.length > 0 && (_jsx("div", __assign({ style: {
+                                    flex: 'flex',
+                                    flexDirection: 'column',
+                                    marginTop: '14px',
+                                } }, { children: columnStats.map(function (value) { return (_jsx("div", __assign({ style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    } }, { children: _jsxs("div", __assign({ style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                        } }, { children: [_jsx(DivCheckbox
+                                            //   type="checkbox"
+                                            //   style={{
+                                            //     border: "1px solid red",
+                                            //     borderRadius: "4px",
+                                            //   boxSizing: "border-box",
+                                            // color: "#fff",
+                                            //     height: "18px",
+                                            //     minWidth: "18px",
+                                            //     position: "relative",
+                                            //     width: "18px",
+                                            //   }}
+                                            // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
+                                            , { 
+                                                //   type="checkbox"
+                                                //   style={{
+                                                //     border: "1px solid red",
+                                                //     borderRadius: "4px",
+                                                //   boxSizing: "border-box",
+                                                // color: "#fff",
+                                                //     height: "18px",
+                                                //     minWidth: "18px",
+                                                //     position: "relative",
+                                                //     width: "18px",
+                                                //   }}
+                                                // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
+                                                checked: stringFilterValues.includes(value), onChange: function () {
+                                                    setStringFilterValues(function (prev) {
+                                                        return prev.includes(value)
+                                                            ? prev.filter(function (v) { return v !== value; })
+                                                            : __spreadArray(__spreadArray([], prev, true), [value], false);
+                                                    });
+                                                } }), _jsx("div", __assign({ style: {
+                                                    marginLeft: 6,
+                                                    display: 'block',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                    color: '#384151',
+                                                } }, { children: value }))] }), value) }), value)); }) }))), _jsx("button", __assign({ style: {
+                                    width: '245px',
+                                    marginTop: '20px',
+                                    padding: '0.5rem 0.75rem',
+                                    backgroundColor: 'rgb(56, 65, 81)',
+                                    color: 'rgb(255, 255, 255)',
+                                    fontWeight: '500',
+                                    borderRadius: '0.375rem',
+                                    boxShadow: 'rgba(0, 0, 0, 0.05) 0px 1px 2px 0px',
+                                }, onClick: function () {
+                                    if (indexBeingEdited > -1) {
+                                        updateFilter(indexBeingEdited);
+                                        setIsOpen(false);
+                                        return;
+                                    }
+                                    addFilter();
+                                    setIsOpen(false);
+                                } }, { children: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }))] })))] })), _jsx("div", { style: { height: '12px' } })] })));
+};
 var DivCheckbox = function (_a) {
     var onChange = _a.onChange, checked = _a.checked;
     var toggleCheckbox = function () {
@@ -694,17 +1525,10 @@ var DivCheckbox = function (_a) {
         borderRadius: '4px',
         position: 'relative',
         cursor: 'pointer',
+        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     };
-    return (_jsx("div", __assign({ style: style, onClick: toggleCheckbox, "aria-checked": checked, className: "shadow-sm", role: "checkbox" }, { children: checked && _jsx(CheckIcon, { className: "text-white", "aria-hidden": "true" }) })));
-};
-var Dropdown = function (_a) {
-    var _b;
-    var field = _a.field, form = _a.form, children = _a.children, props = __rest(_a, ["field", "form", "children"]);
-    var options = props.options, onChange = props.onChange, value = props.value;
-    return (_jsx(Listbox, __assign({ value: value, onChange: onChange }, { children: _jsxs("div", __assign({ className: "relative" }, { children: [_jsxs(Listbox.Button, __assign({ className: "relative w-[245px] cursor-pointer border-[1px] border-[#E7E7E7] rounded-md shadow-sm bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm" }, { children: [_jsx("span", __assign({ className: "block truncate" }, { children: (_b = options.find(function (elem) { return value === elem.value; })) === null || _b === void 0 ? void 0 : _b.label })), _jsx("span", __assign({ className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" }, { children: _jsx(ChevronDownIcon, { className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) }))] })), _jsx(Transition, __assign({ as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0" }, { children: _jsx(Listbox.Options, __assign({ style: { zIndex: 120 }, className: "absolute mt-1 max-h-60 w-[245px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" }, { children: options.map(function (person, personIdx) { return (_jsx(Listbox.Option, __assign({ className: function (_a) {
-                                var active = _a.active;
-                                return "relative cursor-pointer select-none py-2 pl-4 pr-4 ".concat(active ? 'bg-[#212121]/[0.05]' : 'text-gray-900');
-                            }, value: person.value }, { children: _jsx(_Fragment, { children: _jsx("span", __assign({ className: "block truncate ".concat(value === person.value ? 'font-medium' : 'font-normal') }, { children: person.label })) }) }), personIdx)); }) })) }))] })) })));
+    return (_jsx("div", __assign({ style: style, onClick: toggleCheckbox, "aria-checked": checked, 
+        // className="shadow-sm"
+        role: "checkbox" }, { children: checked && _jsx(CheckIcon, { className: "text-white", "aria-hidden": "true" }) })));
 };
-export default Table;
 //# sourceMappingURL=ReportBuilder.js.map