@quillsql/react 1.6.1 → 1.6.4

package/src/ReportBuilder.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useContext,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import React, { useState, useContext, useCallback, useEffect } from 'react';
 // import './nightOwlLight.css';
 import axios from 'axios';
 import { TailSpin } from 'react-loader-spinner';
@@ -19,6 +13,7 @@ import {
 } from '@heroicons/react/20/solid';
 import { convertPostgresColumn } from './SQLEditor';
 import { format } from 'date-fns';
+import { QuillTheme } from './QuillProvider';
 
 interface Option {
   value: string;
@@ -31,6 +26,29 @@ interface SelectComponentProps {
   options: Option[];
 }
 
+interface ButtonComponentProps {
+  onClick: () => void;
+  label: string;
+}
+
+interface ModalTriggerComponentProps {
+  onClick: () => void;
+  label: string;
+}
+
+interface ModalComponentProps {
+  children: any;
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+}
+
+interface TextInputComponentProps {
+  onChange: (e: any) => void;
+  value: string;
+  id: string;
+}
+
 interface ReportBuilderProps {
   onChangeQuery: (query: string) => void;
   onChangeData: (data: object[]) => void;
@@ -38,6 +56,11 @@ interface ReportBuilderProps {
   onChangeLoading: (loading: boolean) => void;
   onError: (error: string) => void;
   SelectComponent: (props: SelectComponentProps) => JSX.Element;
+  ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
+  ModalComponent: (props: ModalComponentProps) => JSX.Element;
+  ModalTriggerComponent: (props: ModalTriggerComponentProps) => JSX.Element;
+  TextInputComponent: (props: TextInputComponentProps) => JSX.Element;
+  tagStyle: React.CSSProperties;
 }
 
 export default function ReportBuilder({
@@ -47,11 +70,17 @@ export default function ReportBuilder({
   onChangeLoading,
   onError,
   SelectComponent,
+  ButtonComponent,
+  ModalComponent,
+  ModalTriggerComponent,
+  TextInputComponent,
+  tagStyle,
 }: ReportBuilderProps) {
   const [data, setData] = useState([]);
   const [client] = useContext(ClientContext);
   const [schema, setSchema] = useContext(SchemaContext);
-  const [theme] = useContext(ThemeContext);
+  const [theme] =
+    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
   const [columns, setColumns] = useState([]);
   const [fields, setFields] = useState([]);
 
@@ -107,23 +136,34 @@ export default function ReportBuilder({
   }, []);
 
   const runQuery = async query => {
-    const { publicKey, customerId, environment } = client;
-    const response = await axios.post(
-      `https://quill-344421.uc.r.appspot.com/dashquery`,
-      {
-        query,
-      },
-      {
-        params: {
-          orgId: customerId,
-          publicKey,
-        },
-        headers: {
-          Authorization: `Bearer `,
-          environment: environment || undefined,
+    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
+      client;
+
+    let response;
+    if (queryEndpoint) {
+      response = await axios.post(
+        queryEndpoint,
+        { metadata: { query, task: 'query' } },
+        { headers: queryHeaders }
+      );
+    } else {
+      response = await axios.post(
+        `https://quill-344421.uc.r.appspot.com/dashquery`,
+        {
+          query,
         },
-      }
-    );
+        {
+          params: {
+            orgId: customerId,
+            publicKey,
+          },
+          headers: {
+            Authorization: `Bearer `,
+            environment: environment || undefined,
+          },
+        }
+      );
+    }
     if (response && response.data && response.data.errorMessage) {
       onError(response.data.errorMessage);
       setData([]);
@@ -154,6 +194,11 @@ export default function ReportBuilder({
       onChangeQuery={onChangeQuery}
       runQuery={runQuery}
       SelectComponent={SelectComponent}
+      ButtonComponent={ButtonComponent}
+      ModalComponent={ModalComponent}
+      ModalTriggerComponent={ModalTriggerComponent}
+      TextInputComponent={TextInputComponent}
+      tagStyle={tagStyle}
     />
   );
 }
@@ -213,8 +258,13 @@ function ReportingTool({
   data,
   runQuery,
   SelectComponent,
+  ButtonComponent,
   onChangeQuery,
   theme,
+  ModalComponent,
+  ModalTriggerComponent,
+  TextInputComponent,
+  tagStyle,
 }) {
   const [selectedTable, setSelectedTable] = useState(schema[0]);
   const [selectedColumn, setSelectedColumn] = useState(schema[0].columns[0]);
@@ -1008,66 +1058,34 @@ function ReportingTool({
 
   return (
     <div style={{ marginLeft: '25px' }}>
-      <div
-        style={{
-          fontSize: '0.8rem',
-          marginBottom: '6px',
-          fontWeight: 'bold',
-          color: theme.secondaryTextColor,
-          fontFamily: theme?.fontFamily,
-        }}
-      >
-        Table
-      </div>
-      {/* <br />
-        <div>what ast should be</div>
-        <div>{JSON.stringify(lmao)}</div>
-        <br /> */}
-      {/* <div>actual ast</div>
-        <div>{JSON.stringify(AST)}</div>
-        <br /> */}
-      {/* <div>actual sql query</div>
-        <div>{sqlQuery}</div>
-        <br /> */}
-      {/* <div>group bys</div>
-        <div>{JSON.stringify(groupBys)}</div>
-        <div>aggregations</div>
-        <div>{JSON.stringify(aggregations)}</div> */}
-
-      {/* <Dropdown
-          value={selectedTable.name}
-          onChange={(e) => {
-            const table = schema.find((t) => t.name === e);
-            setSelectedTable(table);
+      <div style={{ maxWidth: 245 }}>
+        <div
+          style={{
+            fontSize: 14,
+            marginBottom: '6px',
+            fontWeight: '600',
+            color: theme.secondaryTextColor,
+            fontFamily: theme?.fontFamily,
           }}
-          options={schema.map((elem) => {
-            return { label: elem.name, value: elem.name };
-          })}
-        /> */}
-      <SelectComponent
-        value={selectedTable.displayName}
-        onChange={e => {
-          const table = schema.find(t => t.displayName === e);
-          setSelectedTable(table);
-        }}
-        options={
-          schema?.length
-            ? schema.map(elem => {
-                return { label: elem.displayName, value: elem.displayName };
-              })
-            : []
-        }
-      />
-      {/* <SelectComponent
-          value={selectedTable.name}
-          onChange={(e) => {
-            const table = schema.find((t) => t.name === e);
+        >
+          Table
+        </div>
+        <SelectComponent
+          label="Table"
+          value={selectedTable.displayName}
+          onChange={e => {
+            const table = schema.find(t => t.displayName === e);
             setSelectedTable(table);
           }}
-          options={schema.map((elem) => {
-            return { label: elem.name, value: elem.name };
-          })}
-        /> */}
+          options={
+            schema?.length
+              ? schema.map(elem => {
+                  return { label: elem.displayName, value: elem.displayName };
+                })
+              : []
+          }
+        />
+      </div>
       <div
         style={{ display: 'flex', flexDirection: 'column', marginTop: '12px' }}
       >
@@ -1120,6 +1138,11 @@ function ReportingTool({
           indexBeingEdited={indexBeingEdited}
           updateFilter={updateFilter}
           SelectComponent={SelectComponent}
+          ButtonComponent={ButtonComponent}
+          ModalComponent={ModalComponent}
+          ModalTriggerComponent={ModalTriggerComponent}
+          TextInputComponent={TextInputComponent}
+          tagStyle={tagStyle}
           theme={theme}
         />
 
@@ -1140,6 +1163,11 @@ function ReportingTool({
           setAggregationColumn={setAggregationColumn}
           setAggregationType={setAggregationType}
           SelectComponent={SelectComponent}
+          ButtonComponent={ButtonComponent}
+          ModalComponent={ModalComponent}
+          ModalTriggerComponent={ModalTriggerComponent}
+          TextInputComponent={TextInputComponent}
+          tagStyle={tagStyle}
           addAggregation={addAggregation}
           dateBucket={dateBucket}
           setDateBucket={setDateBucket}
@@ -1160,6 +1188,10 @@ function ReportingTool({
           sortByIndexBeingEdited={sortByIndexBeingEdited}
           updateSortBy={updateSortBy}
           SelectComponent={SelectComponent}
+          ButtonComponent={ButtonComponent}
+          ModalComponent={ModalComponent}
+          ModalTriggerComponent={ModalTriggerComponent}
+          tagStyle={tagStyle}
           theme={theme}
         />
       </div>
@@ -1167,46 +1199,53 @@ function ReportingTool({
   );
 }
 
-function FilterTag({ id, label, removeFilter, index, selectFilter, theme }) {
+function FilterTag({
+  id,
+  label,
+  removeFilter,
+  index,
+  setIsOpen,
+  selectFilter,
+  theme,
+  tagStyle,
+}) {
   const handleRemoveFilter = () => {
     removeFilter(index);
   };
   const handleSelectFilter = () => {
     selectFilter(index);
+    setIsOpen(true);
   };
   return (
     <div
       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: 30,
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 13,
-        fontWeight: 'medium',
-        color: theme?.primaryTextColor,
-        outline: 'none',
-        // ring: "2",
-        // ringColor: "white",
-        // ringOpacity: "75",
-      }}
+      style={
+        tagStyle || {
+          marginLeft: '12px',
+          cursor: 'pointer',
+          borderRadius: 8,
+          backgroundColor: '#EFF0FC',
+          paddingLeft: '12px',
+          paddingRight: '8px',
+          height: 30,
+          display: 'flex',
+          alignItems: 'center',
+          fontSize: 13,
+          fontWeight: 'medium',
+          color: theme?.primaryTextColor,
+          fontFamily: theme?.fontFamily,
+          outline: 'none',
+        }
+      }
     >
       <div
         id={id}
         style={{
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
-          fontFamily: theme?.fontFamily,
+          overflow: 'hidden',
+          maxWidth: '80px',
         }}
       >
         {label}
@@ -1222,14 +1261,14 @@ function FilterTag({ id, label, removeFilter, index, selectFilter, theme }) {
           flexDirection: 'row',
           alignItems: 'center',
           cursor: 'pointer',
-          paddingLeft: '0.375rem',
+          paddingLeft: '6px',
         }}
       >
         <XMarkIcon
           style={{
-            height: '1.25rem',
-            width: '1.25rem',
-            color: theme?.primaryTextColor,
+            height: '20px',
+            width: '20px',
+            color: tagStyle?.color || theme?.primaryTextColor,
           }}
           aria-hidden="true"
         />
@@ -1251,43 +1290,24 @@ const SortByModal = ({
   addSortBy,
   sortBys,
   SelectComponent,
+  ButtonComponent,
+  ModalComponent,
+  tagStyle,
+  ModalTriggerComponent,
   sortByIndexBeingEdited,
   theme,
 }) => {
-  const dropdownRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    // Event listener to close the dropdown menu when clicking outside
-    const handleOutsideClick = event => {
-      if (
-        event.target.id === 'sort-toggle-button' ||
-        event.target.id === 'sort-tag'
-      ) {
-        setIsOpen(isOpen => !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 () => {
-      document.removeEventListener('click', handleOutsideClick);
-    };
-  }, []);
   return (
     <div style={{ display: 'flex', flexDirection: 'column', marginTop: 12 }}>
       <div
-        style={{
-          position: 'relative',
-          display: 'inline-block',
-          textAlign: 'left',
-        }}
+        style={
+          {
+            // position: 'relative',
+            // display: 'inline-block',
+            // textAlign: 'left',
+          }
+        }
       >
         <div
           style={{
@@ -1296,31 +1316,10 @@ const SortByModal = ({
             alignItems: 'center',
           }}
         >
-          <button
-            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,
-              fontFamily: theme?.fontFamily,
-              borderWidth: 1,
-              borderStyle: 'solid',
-              borderColor: theme.borderColor,
-              cursor: 'pointer',
-            }}
-          >
-            Sort
-          </button>
+          <ModalTriggerComponent
+            onClick={() => setIsOpen(isOpen => !isOpen)}
+            label="Add sort +"
+          />
           <div
             style={{
               overflowX: 'scroll',
@@ -1335,70 +1334,65 @@ const SortByModal = ({
                 label={elem.column}
                 removeFilter={removeSortBy}
                 selectFilter={selectSortBy}
+                setIsOpen={setIsOpen}
                 index={index}
                 theme={theme}
+                tagStyle={tagStyle}
+                key={'sort' + index}
               />
             ))}
           </div>
         </div>
-        {isOpen && (
+
+        <ModalComponent
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Add sort"
+        >
           <div
-            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"
+            // className="transform opacity-100 scale-100"
           >
-            <div
+            {/* <div
               style={{
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
               }}
-            >
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <div
-                  style={{
-                    fontSize: '0.875rem',
-                    marginBottom: '6px',
-                    fontWeight: '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme?.fontFamily,
-                  }}
-                >
-                  Column
-                </div>
-                {/* select column */}
-                <SelectComponent
-                  value={selectedSortByColumn}
-                  onChange={e => {
-                    setSelectedSortByColumn(e);
-                  }}
-                  options={sortableColumns.map(elem => {
-                    return { label: elem, value: elem };
-                  })}
-                />
+            > */}
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div
+                style={{
+                  fontSize: '14px',
+                  marginBottom: '6px',
+                  fontWeight: '600',
+                  color: theme.secondaryTextColor,
+                  fontFamily: theme?.fontFamily,
+                }}
+              >
+                Column
               </div>
+              {/* select column */}
+              <SelectComponent
+                value={selectedSortByColumn}
+                onChange={e => {
+                  setSelectedSortByColumn(e);
+                }}
+                options={sortableColumns.map(elem => {
+                  return { label: elem, value: elem };
+                })}
+              />
             </div>
+            {/* </div> */}
             {/* Select bucket (if date) */}
 
             {/* Select aggregations */}
             <div
               style={{
-                fontSize: '0.875rem',
+                fontSize: '14px',
                 marginBottom: '6px',
                 fontWeight: '600',
                 color: theme.secondaryTextColor,
@@ -1419,25 +1413,9 @@ const SortByModal = ({
                 { label: 'descending', value: 'descending' },
               ]}
             />
-            <button
-              style={{
-                width: '15.3125rem',
-                marginTop: '1.25rem',
-                paddingTop: '0.5rem',
-                paddingBottom: '0.5rem',
-                paddingLeft: '0.75rem',
-                paddingRight: '0.75rem',
-                backgroundColor: theme.primaryButtonColor,
-                fontFamily: theme?.fontFamily,
-                // hover: { opacity: "90" },
-                color: 'white',
-                fontWeight: '500',
-                borderRadius: '0.375rem',
-                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                outline: 'none',
-                border: 'none',
-                cursor: 'pointer',
-              }}
+            <div style={{ height: 20 }} />
+            <ButtonComponent
+              id="custom-button"
               onClick={() => {
                 if (sortByIndexBeingEdited > -1) {
                   updateSortBy(sortByIndexBeingEdited);
@@ -1449,11 +1427,10 @@ const SortByModal = ({
                 setIsOpen(false);
                 // close();
               }}
-            >
-              {sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort'}
-            </button>
+              label={sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort'}
+            />
           </div>
-        )}
+        </ModalComponent>
       </div>
     </div>
   );
@@ -1471,6 +1448,7 @@ const GroupByModal2 = ({
   removeGroupBy,
   selectGroupBy,
   SelectComponent,
+  ButtonComponent,
   aggregations,
   setAggregationColumn,
   setAggregationType,
@@ -1478,266 +1456,184 @@ const GroupByModal2 = ({
   dateBucket,
   setDateBucket,
   theme,
+  ModalComponent,
+  theme,
+  ModalTriggerComponent,
+  TextInputComponent,
+  tagStyle,
 }) => {
-  const dropdownRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    // Event listener to close the dropdown menu when clicking outside
-    const handleOutsideClick = event => {
-      if (
-        event.target.id === 'group-toggle-button' ||
-        event.target.id === 'group-tag'
-      ) {
-        setIsOpen(isOpen => !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 () => {
-      document.removeEventListener('click', handleOutsideClick);
-    };
-  }, []);
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <div
         style={{
-          position: 'relative',
-          display: 'inline-block',
-          textAlign: 'left',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
         }}
       >
+        <ModalTriggerComponent
+          onClick={() => setIsOpen(isOpen => !isOpen)}
+          label="Add group by +"
+        />
         <div
           style={{
+            overflowX: 'scroll',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
           }}
         >
-          <button
-            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.primaryButtonColor,
-              borderWidth: 1,
-              borderStyle: 'solid',
-              borderColor: theme.borderColor,
-              fontFamily: theme?.fontFamily,
-              cursor: 'pointer',
-            }}
-          >
-            Groups
-          </button>
-          <div
-            style={{
-              overflowX: 'scroll',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            {groupBys.map((elem, index) => (
-              <FilterTag
-                id="group-tag"
-                label={elem.tag}
-                removeFilter={removeGroupBy}
-                selectFilter={selectGroupBy}
-                index={index}
-                theme={theme}
-              />
-            ))}
-          </div>
+          {groupBys.map((elem, index) => (
+            <FilterTag
+              id="group-tag"
+              label={elem.tag}
+              removeFilter={removeGroupBy}
+              selectFilter={selectGroupBy}
+              setIsOpen={setIsOpen}
+              index={index}
+              theme={theme}
+              tagStyle={tagStyle}
+              key={'groupby' + index}
+            />
+          ))}
         </div>
-        {isOpen && (
-          <div
-            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',
-            }}
-            // className="transform opacity-100 scale-100"
-          >
+      </div>
+      <ModalComponent
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Add group by"
+      >
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {/* select column */}
             <div
               style={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
+                fontSize: '14px',
+                marginBottom: '6px',
+                fontWeight: '600',
+                fontFamily: theme?.fontFamily,
+                color: theme.secondaryTextColor,
               }}
             >
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <div
-                  style={{
-                    fontSize: '0.875rem',
-                    marginBottom: '6px',
-                    fontWeight: '600',
-                    fontFamily: theme?.fontFamily,
-                    color: theme.secondaryTextColor,
-                  }}
-                >
-                  Column
-                </div>
-                {/* select column */}
-                <SelectComponent
-                  value={selectedGroupByColumn.name}
-                  onChange={e => {
-                    const column = selectedTable.columns.find(
-                      c => c.name === e
-                    );
-                    setSelectedGroupByColumn(column);
-                  }}
-                  options={selectedTable.columns.map(elem => {
-                    return { label: elem.name, value: elem.name };
-                  })}
-                />
-              </div>
-              {groupByColumnType === 'date' && (
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    marginLeft: 12,
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: '0.875rem',
-                      marginBottom: '6px',
-                      fontWeight: '600',
-                      color: theme.secondaryTextColor,
-                      fontFamily: theme?.fontFamily,
-                    }}
-                  >
-                    Bucket
-                  </div>
-                  <SelectComponent
-                    value={dateBucket}
-                    onChange={e => {
-                      setDateBucket(e);
-                    }}
-                    options={[
-                      { label: 'month', value: 'month' },
-                      { label: 'day', value: 'day' },
-                      { label: 'week', value: 'week' },
-                    ]}
-                  />
-                </div>
-              )}
+              Column
             </div>
-            {/* Select bucket (if date) */}
-
-            {/* Select aggregations */}
+            <SelectComponent
+              label="Column"
+              value={selectedGroupByColumn.name}
+              onChange={e => {
+                const column = selectedTable.columns.find(c => c.name === e);
+                setSelectedGroupByColumn(column);
+              }}
+              options={selectedTable.columns.map(elem => {
+                return { label: elem.name, value: elem.name };
+              })}
+            />
+          </div>
+          {groupByColumnType === 'date' && (
             <div
               style={{
-                fontSize: '0.875rem',
-                marginBottom: '6px',
-                fontWeight: '600',
-                marginTop: 20,
-                color: theme.secondaryTextColor,
-                fontFamily: theme?.fontFamily,
+                display: 'flex',
+                flexDirection: 'column',
+                // marginLeft: 12,
               }}
             >
-              Aggregations
-            </div>
-            {/* select column */}
-            {aggregations.map((aggregation, index) => (
-              // setAggregationType
               <div
                 style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
+                  fontSize: '14px',
+                  marginBottom: '6px',
+                  fontWeight: '600',
+                  color: theme.secondaryTextColor,
+                  fontFamily: theme?.fontFamily,
+                  marginTop: 20,
                 }}
               >
-                <SelectComponent
-                  value={aggregation.column?.name}
-                  onChange={e => {
-                    const column = selectedTable.columns.find(
-                      c => c.name === e
-                    );
-                    setAggregationColumn(column, index);
-                  }}
-                  options={selectedTable.columns.map(elem => {
-                    return { label: elem.name, value: elem.name };
-                  })}
-                />
-                <div style={{ width: 12 }} />
-                <SelectComponent
-                  value={aggregation.aggregationType}
-                  onChange={e => {
-                    setAggregationType(e, index);
-                  }}
-                  options={[
-                    { label: 'sum', value: 'sum' },
-                    { label: 'average', value: 'average' },
-                    { label: 'count', value: 'count' },
-                  ]}
-                />
+                Bucket
               </div>
-            ))}
-            <button
+              <SelectComponent
+                label="Bucket"
+                value={dateBucket}
+                onChange={e => {
+                  setDateBucket(e);
+                }}
+                options={[
+                  { label: 'month', value: 'month' },
+                  { label: 'day', value: 'day' },
+                  { label: 'week', value: 'week' },
+                ]}
+              />
+            </div>
+          )}
+          {/* Select bucket (if date) */}
+
+          {/* Select aggregations */}
+          <div
+            style={{
+              fontSize: 14,
+              marginBottom: '6px',
+              fontWeight: '600',
+              marginTop: 20,
+              color: theme.secondaryTextColor,
+              fontFamily: theme?.fontFamily,
+            }}
+          >
+            Aggregations
+          </div>
+          {/* select column */}
+          {aggregations.map((aggregation, index) => (
+            // setAggregationType
+            <div
+              key={'agg' + index}
               style={{
-                width: '100%',
-                marginTop: '1.25rem',
-                paddingTop: '0.5rem',
-                paddingBottom: '0.5rem',
-                paddingLeft: '0.75rem',
-                paddingRight: '0.75rem',
-                backgroundColor: theme.primaryButtonColor,
-                // hover: { opacity: "90" },
-                color: 'white',
-                fontWeight: '500',
-                borderRadius: '0.375rem',
-                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                fontFamily: theme?.fontFamily,
-                border: 'none',
-                outline: 'none',
-                cursor: 'pointer',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
               }}
-              onClick={() => {
-                if (groupByIndexBeingEdited > -1) {
-                  updateGroupBy(groupByIndexBeingEdited);
-                  setIsOpen(false);
-                  // close();
-                  return;
-                }
-                addGroupBy();
+            >
+              <SelectComponent
+                value={aggregation.column?.name}
+                onChange={e => {
+                  const column = selectedTable.columns.find(c => c.name === e);
+                  setAggregationColumn(column, index);
+                }}
+                options={selectedTable.columns.map(elem => {
+                  return { label: elem.name, value: elem.name };
+                })}
+              />
+              <div style={{ width: 16 }} />
+              <SelectComponent
+                value={aggregation.aggregationType}
+                onChange={e => {
+                  setAggregationType(e, index);
+                }}
+                options={[
+                  { label: 'sum', value: 'sum' },
+                  { label: 'average', value: 'average' },
+                  { label: 'count', value: 'count' },
+                ]}
+              />
+            </div>
+          ))}
+          <div style={{ height: 20 }} />
+          <ButtonComponent
+            id="custom-button"
+            onClick={() => {
+              if (groupByIndexBeingEdited > -1) {
+                updateGroupBy(groupByIndexBeingEdited);
                 setIsOpen(false);
                 // close();
-              }}
-            >
-              {groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by'}
-            </button>
-          </div>
-        )}
-      </div>
+                return;
+              }
+              addGroupBy();
+              setIsOpen(false);
+              // close();
+            }}
+            label={
+              groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by'
+            }
+          />
+        </div>
+      </ModalComponent>
     </div>
   );
 };
@@ -1765,35 +1661,15 @@ const AddFilterModal2 = ({
   indexBeingEdited,
   updateFilter,
   SelectComponent,
+  ButtonComponent,
+  ModalComponent,
   theme,
+  ModalTriggerComponent,
+  TextInputComponent,
+  tagStyle,
 }) => {
-  const dropdownRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
 
-  useEffect(() => {
-    // Event listener to close the dropdown menu when clicking outside
-    const handleOutsideClick = event => {
-      if (
-        event.target.id === 'toggle-button' ||
-        event.target.id === 'filter-tag'
-      ) {
-        setIsOpen(isOpen => !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 () => {
-      document.removeEventListener('click', handleOutsideClick);
-    };
-  }, []);
-
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <div
@@ -1810,31 +1686,10 @@ const AddFilterModal2 = ({
             alignItems: 'center',
           }}
         >
-          <button
-            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,
-              fontFamily: theme?.fontFamily,
-              cursor: 'pointer',
-            }}
-          >
-            Filters
-          </button>
+          <ModalTriggerComponent
+            onClick={() => setIsOpen(isOpen => !isOpen)}
+            label="Add filter +"
+          />
           <div
             style={{
               overflowX: 'scroll',
@@ -1851,44 +1706,38 @@ const AddFilterModal2 = ({
                 selectFilter={selectFilter}
                 index={index}
                 theme={theme}
+                setIsOpen={setIsOpen}
+                key={'filter' + index}
+                tagStyle={tagStyle}
               />
             ))}
           </div>
         </div>
-        {isOpen && (
+        <ModalComponent
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Add filter"
+        >
           <div
-            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',
             }}
-            // className="transform opacity-100 scale-100"
           >
             <div
               style={{
-                fontSize: '0.875rem',
+                fontSize: 14,
                 marginBottom: '6px',
                 fontWeight: '600',
                 color: theme.secondaryTextColor,
                 fontFamily: theme?.fontFamily,
-                // opacity: 0.7,
               }}
             >
               Column
             </div>
             <SelectComponent
+              id="custom-select"
               value={selectedColumn.name}
               onChange={e => {
                 const column = selectedTable.columns.find(c => c.name === e);
@@ -1900,36 +1749,7 @@ const AddFilterModal2 = ({
             />
 
             {columnType === 'number' && (
-              <div
-                style={{
-                  width: '245px',
-                  maxWidth: '245px',
-                  zIndex: 50,
-                }}
-              >
-                {/* <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
-                    barLeftColor="transparent"
-                    barRightColor="transparent"
-                    barInnerColor="#384151"
-                    onInput={(e) => {
-                      setNumberStart(e.minValue);
-                      setNumberEnd(e.maxValue);
-                    }}
-                  /> */}
+              <div>
                 <div
                   style={{
                     display: 'flex',
@@ -1947,34 +1767,22 @@ const AddFilterModal2 = ({
                   >
                     <div
                       style={{
-                        fontSize: '0.875rem',
+                        fontSize: '14px',
                         fontWeight: '600',
                         color: theme.secondaryTextColor,
                         fontFamily: theme?.fontFamily,
+                        marginBottom: 6,
                       }}
                     >
                       Minimum
                     </div>
-                    <input
-                      // type="number"
+                    <TextInputComponent
+                      id="min-input"
                       value={numberStart}
                       onChange={e => setNumberStart(e.target.value)}
-                      placeholder=""
-                      style={{
-                        textAlign: 'right',
-                        width: '100px',
-                        border: '1px solid #E7E7E7',
-                        color: theme?.primaryTextColor,
-                        marginTop: '4px',
-                        height: 38,
-                        paddingRight: 8,
-                        backgroundColor: 'white',
-                        borderRadius: '0.375rem',
-                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
-                        fontFamily: theme?.fontFamily,
-                      }}
                     />
                   </div>
+                  <div style={{ width: 16 }} />
                   <div
                     style={{
                       display: 'flex',
@@ -1984,32 +1792,19 @@ const AddFilterModal2 = ({
                   >
                     <div
                       style={{
-                        fontSize: '0.875rem',
+                        fontSize: '14px',
                         fontWeight: '600',
                         color: theme.secondaryTextColor,
                         fontFamily: theme?.fontFamily,
+                        marginBottom: 6,
                       }}
                     >
                       Maximum
                     </div>
-                    <input
-                      // type="number"
+                    <TextInputComponent
+                      id="max-input"
                       value={numberEnd}
                       onChange={e => setNumberEnd(e.target.value)}
-                      placeholder=""
-                      style={{
-                        textAlign: 'right',
-                        width: '100px',
-                        border: '1px solid #E7E7E7',
-                        color: theme?.primaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                        marginTop: '4px',
-                        paddingRight: 8,
-                        height: 38,
-                        backgroundColor: 'white',
-                        borderRadius: '0.375rem',
-                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
-                      }}
                     />
                   </div>
                 </div>
@@ -2034,7 +1829,7 @@ const AddFilterModal2 = ({
                 >
                   <div
                     style={{
-                      fontSize: '0.8rem',
+                      fontSize: 14,
                       fontWeight: '600',
                       color: 'rgba(56, 65, 81, 0.7)',
                       fontFamily: theme?.fontFamily,
@@ -2047,22 +1842,22 @@ const AddFilterModal2 = ({
                     value={dateStart}
                     onChange={e => setDateStart(e.target.value)}
                     placeholder="Start date"
-                    style={{
-                      width: '115px',
-                      fontSize: '0.8rem',
-                      color: theme?.primaryTextColor,
-                      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',
-                      fontFamily: theme?.fontFamily,
-                    }}
+                    // style={{
+                    //   width: '115px',
+                    //   fontSize: '0.8rem',
+                    //   color: theme?.primaryTextColor,
+                    //   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',
+                    //   fontFamily: theme?.fontFamily,
+                    // }}
                   />
                 </div>
                 <div
@@ -2074,7 +1869,7 @@ const AddFilterModal2 = ({
                 >
                   <div
                     style={{
-                      fontSize: '0.8rem',
+                      fontSize: 14,
                       fontWeight: '600',
                       color: 'rgba(56, 65, 81, 0.7)',
                       fontFamily: theme?.fontFamily,
@@ -2087,22 +1882,22 @@ const AddFilterModal2 = ({
                     value={dateEnd}
                     onChange={e => setDateEnd(e.target.value)}
                     placeholder="End date"
-                    style={{
-                      width: '115px',
-                      fontSize: '0.8rem',
-                      color: theme?.primaryTextColor,
-                      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',
-                      fontFamily: theme?.fontFamily,
-                    }}
+                    // style={{
+                    //   width: '115px',
+                    //   fontSize: '0.8rem',
+                    //   color: theme?.primaryTextColor,
+                    //   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',
+                    //   fontFamily: theme?.fontFamily,
+                    // }}
                   />
                 </div>
               </div>
@@ -2116,6 +1911,7 @@ const AddFilterModal2 = ({
                     flex: 'flex',
                     flexDirection: 'column',
                     marginTop: '14px',
+                    overflow: 'hidden',
                   }}
                 >
                   {columnStats.map(value => (
@@ -2127,7 +1923,6 @@ const AddFilterModal2 = ({
                       }}
                       key={value}
                     >
-                      {/* Rest of the code */}
                       <div
                         style={{
                           display: 'flex',
@@ -2139,18 +1934,6 @@ const AddFilterModal2 = ({
                         key={value}
                       >
                         <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"
                           theme={theme}
                           checked={stringFilterValues.includes(value)}
                           onChange={() => {
@@ -2179,21 +1962,9 @@ const AddFilterModal2 = ({
                   ))}
                 </div>
               )}
-            <button
-              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',
-                fontFamily: theme?.fontFamily,
-                border: 'none',
-                outline: 'none',
-                cursor: 'pointer',
-              }}
+            <div style={{ height: 20 }} />
+            <ButtonComponent
+              id="custom-button"
               onClick={() => {
                 if (indexBeingEdited > -1) {
                   updateFilter(indexBeingEdited);
@@ -2203,11 +1974,11 @@ const AddFilterModal2 = ({
                 addFilter();
                 setIsOpen(false);
               }}
-            >
-              {indexBeingEdited > -1 ? 'Edit filter' : 'Add filter'}
-            </button>
+              label={indexBeingEdited > -1 ? 'Edit filter' : 'Add filter'}
+            />
           </div>
-        )}
+        </ModalComponent>
+        {/* )} */}
       </div>
       <div style={{ height: '12px' }}></div>
     </div>