@quillsql/react 2.12.52 → 2.13.0

package/dist/esm/components/Dashboard/DataLoader.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { QuillReport } from '../../models/Report';
 import { QuillTheme } from '../../QuillProvider';
+import { AdditionalProcessing } from '../../utils/tableProcessing';
 export type DataLoaderChildProps = {
     isLoading: boolean;
     error?: string;
@@ -10,10 +11,13 @@ export type DataLoaderChildProps = {
         direction: string;
     }) => void;
     data: QuillReport;
+    rowCount?: number;
+    rowCountIsLoading?: boolean;
 };
-export default function DataLoader({ item, children, filters, }: {
-    item: any;
+export default function DataLoader({ item, children, filters, additionalProcessing: defaultAdditionalProcessing, }: {
+    item: QuillReport;
     filters: any[] | null;
+    additionalProcessing: AdditionalProcessing;
     children: ({ isLoading, error, onPageChange, onSortChange, data, }: DataLoaderChildProps) => JSX.Element;
 }): JSX.Element;
 type ColorMapType = {
@@ -31,14 +35,16 @@ export type ChartDataLoaderChildProps = {
     error?: string;
     data: QuillReport;
     dateBucket?: string;
+    rowCount?: number;
+    rowCountIsLoading?: boolean;
 };
 export declare const ChartDataLoader: ({ item, children, dateBucket, additionalProcessing, filters, }: {
-    item: any;
+    item: QuillReport;
     dateBucket?: string | undefined;
     mapColorsToFields?: ((_report: QuillReport, _theme: QuillTheme) => ColorMapType) | undefined;
-    additionalProcessing?: any;
+    additionalProcessing: AdditionalProcessing;
     filters: any[] | null;
-    children: ({ isLoading, error, data, dateBucket, }: ChartDataLoaderChildProps) => JSX.Element;
+    children: ({ isLoading, error, data, dateBucket, rowCount, rowCountIsLoading, }: ChartDataLoaderChildProps) => JSX.Element;
 }) => JSX.Element;
 export {};
 //# sourceMappingURL=DataLoader.d.ts.map

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAmCjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,GAAG,CAAC;IACV,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAiJd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,GAAG;;mCAGE,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;aACjB,GAAG,EAAE,GAAG,IAAI;wDAMlB,yBAAyB,KAAK,WAAW;MAC1C,WA4EH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AAuBrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAkCF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,oBAAoB,EAAE,2BAA2B,GAClD,EAAE;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAyLd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,WAAW;;mCAGN,WAAW,UACZ,UAAU,KACf,YAAY;0BACK,oBAAoB;aACjC,GAAG,EAAE,GAAG,IAAI;qFAQlB,yBAAyB,KAAK,WAAW;MAC1C,WAmFH,CAAC"}

package/dist/esm/components/Dashboard/DataLoader.js

@@ -1,10 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { didFiltersChange } from '../../Chart';
 import { ClientContext, DashboardContext, SchemaDataContext, } from '../../Context';
-import { convertInternalReportToReport, EMPTY_INTERNAL_REPORT, fetchReport, } from '../../utils/report';
+import { convertInternalReportToReport, EMPTY_INTERNAL_REPORT, fetchReport, fetchReportRowCount, } from '../../utils/report';
 import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from '../../utils/paginationProcessing';
-import { fetchTableByReport } from '../../utils/tableProcessing';
+import { fetchResultsByReport, } from '../../utils/tableProcessing';
 const constructReportFromItem = (item) => {
     return {
         ...EMPTY_INTERNAL_REPORT,
@@ -25,21 +25,67 @@ const constructReportFromItem = (item) => {
         filtersApplied: item.filtersApplied,
     };
 };
-export default function DataLoader({ item, children, filters, }) {
+function filterValuesEquivalent(filters1, filters2) {
+    if (filters1.length !== filters2.length) {
+        return false;
+    }
+    // The two filters arrays aren't necessarily in the same order
+    // we can build two dictionaries of [label, filter] and compare them
+    const mappedFilters1 = filters1.reduce((acc, filter) => {
+        acc[filter.label] = filter;
+        return acc;
+    }, {});
+    const mappedFilters2 = filters2.reduce((acc, filter) => {
+        acc[filter.label] = filter;
+        return acc;
+    }, {});
+    for (const key in mappedFilters1) {
+        if (mappedFilters1[key].selectedValue !==
+            mappedFilters2[key]?.selectedValue ||
+            mappedFilters1[key].values !== mappedFilters2[key]?.values ||
+            mappedFilters1[key].field !== mappedFilters2[key]?.field ||
+            mappedFilters1[key].label !== mappedFilters2[key]?.label ||
+            mappedFilters1[key].table !== mappedFilters2[key]?.table ||
+            mappedFilters1[key].filterType !== mappedFilters2[key]?.filterType ||
+            mappedFilters1[key].startDate !== mappedFilters2[key]?.startDate ||
+            mappedFilters1[key].endDate !== mappedFilters2[key]?.endDate) {
+            return false;
+        }
+    }
+    return true;
+}
+export default function DataLoader({ item, children, filters, additionalProcessing: defaultAdditionalProcessing, }) {
     const [client] = useContext(ClientContext);
     const [dashboard, dispatch] = useContext(DashboardContext);
     const [schemaData] = useContext(SchemaDataContext);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(undefined);
     const [previousPage, setPreviousPage] = useState(0);
-    const [report, setReport] = useState(dashboard[item._id] ?? constructReportFromItem(item));
-    const [additionalProcessing, setAdditionProcessing] = useState({
-        page: DEFAULT_PAGINATION,
-    });
+    const [report, setReport] = useState(dashboard[item.id] ?? constructReportFromItem(item));
+    const [additionalProcessing, setAdditionProcessing] = useState(defaultAdditionalProcessing);
+    const previousFilters = useRef(null);
+    const [rowCount, setRowCount] = useState(dashboard[item.id]?.rowCount ?? 0);
+    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
+    const fetchRowCount = async (processing) => {
+        if (!client || !filters) {
+            return;
+        }
+        setRowCountIsLoading(true);
+        const rowCount = await fetchReportRowCount(item.id, client, true, filters, processing, schemaData.customFields);
+        if (rowCount) {
+            dispatch({
+                type: 'UPDATE_DASHBOARD_ITEM',
+                id: item.id,
+                data: { rowCount },
+            });
+            setRowCount(rowCount);
+        }
+        setRowCountIsLoading(false);
+    };
     const onPageChange = (page) => {
         if (additionalProcessing &&
             additionalProcessing.page &&
-            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            shouldFetchMore(additionalProcessing.page, page, previousPage)) {
             const newPagination = { ...additionalProcessing.page, page };
             const updatedProcessing = {
                 ...additionalProcessing,
@@ -69,7 +115,7 @@ export default function DataLoader({ item, children, filters, }) {
             setLoading(true);
             try {
                 const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await fetchTableByReport(report.id, client, updatedProcessing, filters, schemaData.customFields);
+                const paginatedRows = await fetchResultsByReport(report.id, client, updatedProcessing, filters, schemaData.customFields, true);
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
@@ -79,9 +125,7 @@ export default function DataLoader({ item, children, filters, }) {
                 }
                 setReport({ ...report, rows: tempRows });
                 setAdditionProcessing(updatedProcessing);
-                setTimeout(() => {
-                    setLoading(false);
-                }, 200);
+                setLoading(false);
             }
             catch (e) {
                 console.log(e);
@@ -93,26 +137,27 @@ export default function DataLoader({ item, children, filters, }) {
         if (!client || !filters) {
             return;
         }
-        if (dashboard[item._id] &&
-            !didFiltersChange(dashboard[item._id], filters) &&
+        if (dashboard[item.id] &&
+            !didFiltersChange(dashboard[item.id], filters) &&
             !loading &&
             // @ts-ignore
-            !dashboard[item._id].triggerReload) {
+            !dashboard[item.id].triggerReload) {
             setLoading(false);
             const convertedReport = convertInternalReportToReport(
             // @ts-ignore
-            dashboard[item._id]);
+            dashboard[item.id]);
             setReport(convertedReport);
             return;
         }
         setLoading(true);
-        const { report, error } = await fetchReport(item._id, client, true, filters, processing, undefined, schemaData.customFields);
+        const { report: fetchedReport, error } = await fetchReport(item.id, client, true, filters, processing, undefined, schemaData.customFields, true);
         dispatch({
             type: 'ADD_DASHBOARD_ITEM',
-            id: item._id,
-            data: { ...report, triggerReload: false },
+            id: item.id,
+            data: { ...fetchedReport, triggerReload: false, rowCount: 0 }, // rowCount 0 indicates it's still loading if row length is nonzero
         });
-        const convertedReport = convertInternalReportToReport(report);
+        fetchRowCount(processing);
+        const convertedReport = convertInternalReportToReport(fetchedReport);
         setReport(convertedReport);
         setAdditionProcessing(processing);
         setError(error);
@@ -122,20 +167,28 @@ export default function DataLoader({ item, children, filters, }) {
         if (!filters) {
             return;
         }
+        if (previousFilters.current &&
+            filterValuesEquivalent(previousFilters.current, filters)) {
+            return;
+        }
+        previousFilters.current = filters;
+        setPreviousPage(0);
         fetchReportHelper(additionalProcessing);
-    }, [filters, item._id]);
+    }, [filters, item.id]);
     useEffect(() => {
         // @ts-ignore
-        if (dashboard[item._id] && dashboard[item._id].triggerReload) {
+        if (dashboard[item.id] && dashboard[item.id].triggerReload) {
             fetchReportHelper(additionalProcessing);
         }
-    }, [dashboard[item._id]]);
+    }, [dashboard[item.id]]);
     return (_jsx(_Fragment, { children: children({
             isLoading: loading,
             error,
             onPageChange,
             onSortChange,
             data: report,
+            rowCount: report.pivot ? report.rowCount : rowCount,
+            rowCountIsLoading,
         }) }));
 }
 // The same data-loader pattern as above, but with special logic for charts
@@ -146,36 +199,37 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(undefined);
     const [localDateBucket, setLocalDateBucket] = useState(undefined);
-    const [localAdditionalProcessing, setLocalAdditionalProcessing] = useState();
-    const [report, setReport] = useState(dashboard[item._id] ?? constructReportFromItem(item));
+    const [report, setReport] = useState(dashboard[item.id] ?? constructReportFromItem(item));
     const [client] = useContext(ClientContext);
     const [schemaData] = useContext(SchemaDataContext);
+    const previousFilters = useRef(null);
     const fetchReportHelper = async (useReportTask = true) => {
         if (!client || !filters) {
             return;
         }
-        const tempReport = dashboard[item._id];
+        const tempReport = dashboard[item.id];
         if (tempReport &&
             !didFiltersChange(tempReport, filters) &&
             !tempReport.triggerReload &&
-            dateBucket === localDateBucket &&
-            additionalProcessing?.last === localAdditionalProcessing?.last) {
+            dateBucket === localDateBucket) {
             setLoading(false);
             const convertedReport = convertInternalReportToReport(tempReport);
             setReport(convertedReport);
             return;
         }
         setLoading(true);
-        const { report, error } = await fetchReport(item._id, client, useReportTask, filters, additionalProcessing, dateBucket, schemaData.customFields);
+        const { report, error } = await fetchReport(item.id, client, useReportTask, filters, {
+            ...additionalProcessing,
+            ...(item.pivot ? {} : { page: DEFAULT_PAGINATION }),
+        }, dateBucket, schemaData.customFields);
         dispatch({
             type: 'ADD_DASHBOARD_ITEM',
-            id: item._id,
+            id: item.id,
             data: { ...report, triggerReload: false },
         });
         const convertedReport = convertInternalReportToReport(report);
         setReport(convertedReport);
         setLocalDateBucket(dateBucket);
-        setLocalAdditionalProcessing(additionalProcessing);
         setError(error);
         setLoading(false);
     };
@@ -183,15 +237,20 @@ export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessi
         if (!filters) {
             return;
         }
+        if (previousFilters.current &&
+            filterValuesEquivalent(previousFilters.current, filters)) {
+            return;
+        }
+        previousFilters.current = filters;
         setInitialLoad(false);
         fetchReportHelper();
-    }, [filters, item._id, dateBucket, additionalProcessing]);
+    }, [filters, item.id, dateBucket]);
     useEffect(() => {
-        const tempReport = dashboard[item._id];
+        const tempReport = dashboard[item.id];
         if (tempReport && tempReport.triggerReload) {
             fetchReportHelper();
         }
-    }, [dashboard[item._id]]);
+    }, [dashboard[item.id]]);
     return children({
         isLoading: loading || initialLoad,
         data: report,

package/dist/esm/components/Dashboard/TableComponent.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { QuillReport } from '../../models/Report';
-export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }: {
+export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }: {
     report: QuillReport;
     onClick?: (report: QuillReport) => void;
     isLoading?: boolean;
     error?: string;
     rowCount?: number;
+    rowCountIsLoading?: boolean;
     onPageChange?: (page: number) => void;
     onSortChange?: (sort: {
         field: string;

package/dist/esm/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAyFd"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAkGd"}

package/dist/esm/components/Dashboard/TableComponent.js

@@ -6,15 +6,21 @@ import ChartError from '../Chart/ChartError';
 import { useExport } from '../../hooks/useExport';
 import { DEFAULT_PAGINATION } from '../../utils/paginationProcessing';
 import { ThemeContext } from '../../Context';
-export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }) {
+export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }) {
     const [theme] = useContext(ThemeContext);
     const [initialLoad, setInitialLoad] = useState(true);
     const { downloadCSV } = useExport(report?.id);
+    const [page, setPage] = useState(0);
     useEffect(() => {
         if (!isLoading) {
             setInitialLoad(false);
         }
     }, [isLoading]);
+    useEffect(() => {
+        if (rowCountIsLoading) {
+            setPage(0);
+        }
+    }, [rowCountIsLoading]);
     return (_jsxs("div", { style: { cursor: error || !onClick ? 'default' : 'pointer' }, onClick: () => onClick && onClick(report), children: [_jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
@@ -40,14 +46,15 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                 } })) : error ? (_jsx("div", { style: {
                     width: '100%',
                     height: '400px',
-                }, children: _jsx(ChartError, { errorMessage: error }) })) : (_jsx(QuillTable, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
+                }, children: _jsx(ChartError, { errorMessage: error }) })) : (_jsx(QuillTable, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, columns: report.columns, rowsPerPage: report.pagination?.rowsPerPage ?? DEFAULT_PAGINATION.rowsPerPage, containerStyle: {
                     width: '100%',
                     height: '400px',
                 }, downloadCSV: () => {
                     downloadCSV();
                 }, onPageChange: (page) => {
                     onPageChange && onPageChange(page);
+                    setPage(page);
                 }, onSortChange: (sort) => {
                     onSortChange && onSortChange(sort);
-                }, currentPage: report?.pagination?.page, sort: report?.sort }))] }, report?.name));
+                }, currentPage: report?.pagination?.page ?? page, sort: report?.sort }))] }, report?.name));
 }

package/dist/esm/components/Dashboard/util.d.ts

@@ -1,7 +1,7 @@
-import { Client } from '../../models/Client';
+import { QuillProviderClient } from '../../models/Client';
 export declare function validateTemplatesAgainstFilters(filters: any[], templates: any[]): {
     valid: boolean;
     error: string;
 };
-export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: Client, dashboardData: any): Promise<any>;
+export declare function addTemplatesToDashboard(name: any, newTemplates: any[], client: QuillProviderClient, dashboardData: any): Promise<any>;
 //# sourceMappingURL=util.d.ts.map

package/dist/esm/components/Dashboard/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG1D,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,GAAG,EAAE,EACd,SAAS,EAAE,GAAG,EAAE,GACf;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAiCnC;AAED,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,GAAG,EAAE,EACnB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,EAAE,GAAG,GACjB,OAAO,CAAC,GAAG,CAAC,CAiDd"}

package/dist/esm/components/Dashboard/util.js

@@ -36,13 +36,13 @@ export function validateTemplatesAgainstFilters(filters, templates) {
 }
 export async function addTemplatesToDashboard(name, newTemplates, client, dashboardData) {
     try {
-        const { publicKey, customerId } = client;
+        const { publicKey, organizationId } = client;
         const hostedBody = {
             metadata: {
                 dashboardName: name,
                 task: 'add-from-template',
                 clientId: publicKey,
-                orgId: customerId || '*',
+                orgId: organizationId || '*',
                 templateReportIds: newTemplates.map((template) => template._id),
             },
         };

package/dist/esm/components/QuillMultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAgC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4Q3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAsO3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAyDpB,CAAC"}

package/dist/esm/components/QuillMultiSelect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
 import { LoadingSpinner } from './UiComponents';
-import { useContext, useEffect, useRef, useState, } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ThemeContext } from '../Context';
 /**
  * Helper function for displaying option labels
@@ -15,7 +15,7 @@ function displaySelectedOptionLabels({ options, value, }) {
         return 'Select';
     }
     return matchingOptions
-        .map((elem) => elem.label)
+        .map((elem) => elem.label ?? '-')
         .join(', ');
 }
 /**
@@ -27,8 +27,6 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
     const debounceTimeoutId = useRef(null);
-    // const [searchQuery, setSearchQuery] = useState('');
-    // const [filteredOptions, setFilteredOptions] = useState(options);
     useOnClickOutside(modalRef, () => setShowModal(false));
     useEffect(() => {
         if (!value) {
@@ -38,6 +36,21 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
             setSelectedOptions(value);
         }
     }, [value]);
+    const sortedItems = useMemo(() => {
+        // Sort null to top
+        return options.sort((a, b) => {
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            return 0;
+        });
+    }, [options]);
+    const nullLabel = useMemo(() => {
+        return sortedItems.some((item) => item.value === '-') ? 'None' : '-';
+    }, [sortedItems]);
     const debounce = (updatedChangeEvent) => {
         if (debounceTimeoutId.current) {
             clearTimeout(debounceTimeoutId.current);
@@ -46,14 +59,6 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
             onChange(updatedChangeEvent);
         }, 500);
     };
-    // const filterOptions = (query: string) => {
-    //   setSearchQuery(query);
-    //   setFilteredOptions(
-    //     options.filter((option) =>
-    //       option.label.toLowerCase().includes(query.toLowerCase()),
-    //     ),
-    //   );
-    // };
     return (_jsxs("div", { style: {
             position: 'relative',
             borderRadius: '6px',
@@ -113,7 +118,7 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
                     fontFamily: theme?.fontFamily,
                     maxHeight: '50vh',
                     overflow: 'scroll',
-                }, children: !isLoading ? (options.map((option) => (_jsxs("button", { style: {
+                }, children: !isLoading ? (sortedItems.map((option) => (_jsxs("button", { style: {
                         display: 'flex',
                         alignItems: 'center',
                         padding: 8,
@@ -164,7 +169,7 @@ export function QuillMultiSelectComponent({ options, width, onChange, label, val
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                            }, children: option.label })] }, option.value)))) : (_jsx(LoadingSpinner, {})) }))] }));
+                            }, children: option.label ?? nullLabel })] }, option.value)))) : (_jsx(LoadingSpinner, {})) }))] }));
 }
 export const ListboxTextInput = ({ value, onChange, placeholder, }) => {
     return (_jsxs("div", { style: {

package/dist/esm/components/QuillMultiSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAgC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAuV3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CA4U3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}