@quillsql/admin 1.6.3 → 1.7.0

package/dist/esm/api/ConnectionClient.js

@@ -1,6 +1,7 @@
+import { fieldTypeToDataTypeID } from '../utils/columnProcessing';
 import { QUILL_SERVER } from '../utils/constants';
 import { quillFetch } from '../utils/dataFetcher';
-export async function testConnectionString(queryEndpoint, connectionString, databaseType, getToken, clientId) {
+export async function testConnectionString(queryEndpoint, connectionString, databaseType, getToken, clientId, queryHeaders) {
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
     try {
@@ -25,6 +26,7 @@ export async function testConnectionString(queryEndpoint, connectionString, data
             const { data } = await quillFetch({
                 client: {
                     queryEndpoint,
+                    queryHeaders,
                     clientId: clientId,
                     withCredentials: false,
                 },
@@ -48,10 +50,13 @@ export async function testConnectionString(queryEndpoint, connectionString, data
         throw error;
     }
 }
-export async function getTablesBySchema(queryEndpoint, clientId, schema, getToken) {
+// Unused
+// If to be used, make work with self-hosted
+export async function getTablesBySchema(queryEndpoint, clientId, schema, getToken, queryHeaders) {
     const results = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -69,10 +74,11 @@ export async function getTablesBySchema(queryEndpoint, clientId, schema, getToke
         throw new Error(results.error);
     }
 }
-export async function setSchemaNames(queryEndpoint, clientId, schemaNames, getToken) {
+export async function setSchemaNames(queryEndpoint, clientId, schemaNames, getToken, queryHeaders) {
     await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -84,11 +90,13 @@ export async function setSchemaNames(queryEndpoint, clientId, schemaNames, getTo
         getToken,
     });
 }
-// Unused?
-export async function getTableInfo(queryEndpoint, clientId, schema, table, getToken) {
+// Unused
+// If to be used, make work with self-hosted
+export async function getTableInfo(queryEndpoint, clientId, schema, table, getToken, queryHeaders) {
     const results = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -107,45 +115,136 @@ export async function getTableInfo(queryEndpoint, clientId, schema, table, getTo
         throw new Error(results.error);
     }
 }
-export async function getTableColumnsBySchema(queryEndpoint, clientId, getToken, schemas) {
-    const results = await quillFetch({
+export async function getSchemaTables(schemas, databaseType, queryEndpoint, clientId, getToken, queryHeaders) {
+    const schemaMap = {};
+    const { queries } = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
-        task: 'table-info-by-schema',
+        task: 'get-tables-by-schemas',
         metadata: {
-            clientId,
+            databaseType,
             schemas,
         },
         getToken,
     });
-    if (results.status === 'error') {
-        throw new Error(results.error);
+    const queryResults = queries?.queryResults || [];
+    if (queryResults.length !== schemas.length) {
+        throw new Error('Error fetching tables by schemas');
     }
-    const formattedResults = results.data.columnsByTable.map((table) => {
-        return {
-            tableName: table.tableName,
-            displayName: table.displayName,
-            columns: table.columns.map((column) => {
-                return {
-                    columnName: column.columnName,
-                    displayName: column.displayName,
-                    fieldType: column.fieldType,
-                    dataTypeId: column.dataTypeId,
-                    field: column.columnName,
-                };
-            }),
-        };
+    const allTables = [];
+    for (let i = 0; i < queryResults.length; i++) {
+        const queryResult = queryResults[i];
+        const schema = schemas[i] || '';
+        const tables = queryResult.rows.map((row) => {
+            if (!schemaMap[schema]) {
+                schemaMap[schema] = [];
+            }
+            schemaMap[schema].push(row['table_name'] || row['TABLE_NAME']);
+            return {
+                tableName: row['table_name'] || row['TABLE_NAME'],
+                schemaName: row['table_schema'] || row['TABLE_SCHEMA'],
+                catalogName: row['table_catalog'] || row['TABLE_CATALOG'],
+            };
+        });
+        allTables.push(...tables);
+    }
+    return { tables: allTables.flat(), schema: schemaMap };
+}
+export async function getTableColumns(tables, databaseType, queryEndpoint, clientId, getToken, queryHeaders) {
+    const { queries } = await quillFetch({
+        client: {
+            queryEndpoint,
+            queryHeaders,
+            clientId,
+            withCredentials: false,
+        },
+        task: 'get-schema-table-columns',
+        metadata: {
+            databaseType,
+            tables,
+        },
+        getToken,
     });
-    return { columnsByTable: formattedResults, schema: results.data.schema };
+    const queryResults = queries?.queryResults || [];
+    if (queryResults.length !== tables.length) {
+        throw new Error('Error fetching table columns');
+    }
+    const columnsByTable = [];
+    for (let i = 0; i < queryResults.length; i++) {
+        const queryResult = queryResults[i];
+        const table = tables[i];
+        const columns = queryResult.rows.map((row) => {
+            const fieldType = row['fieldType'] || row['dataType'];
+            return {
+                columnName: row['columnName'],
+                displayName: row['columnName'],
+                fieldType: fieldType,
+                dataTypeId: fieldTypeToDataTypeID(fieldType?.toLowerCase()),
+                field: row['columnName'],
+            };
+        });
+        columnsByTable.push({
+            tableName: `${table.catalogName ? `${table.catalogName}.` : ''}${table.schemaName}.${table.tableName}`,
+            displayName: `${table.catalogName ? `${table.catalogName}.` : ''}${table.schemaName}.${table.tableName}`,
+            columns,
+        });
+    }
+    return columnsByTable;
+}
+// Different logic for self-hosted because there might not be a database connection string
+// to rely on in the backend
+export async function getTableColumnsBySchema(isSelfHosted, queryEndpoint, clientId, databaseType, getToken, schemas, queryHeaders) {
+    if (isSelfHosted) {
+        const { tables, schema } = await getSchemaTables(schemas, databaseType, queryEndpoint, clientId, getToken, queryHeaders);
+        const columnsByTable = await getTableColumns(tables, databaseType, queryEndpoint, clientId, getToken, queryHeaders);
+        return { columnsByTable, schema };
+    }
+    else {
+        const results = await quillFetch({
+            client: {
+                queryEndpoint,
+                queryHeaders,
+                clientId,
+                withCredentials: false,
+            },
+            task: 'table-info-by-schema',
+            metadata: {
+                clientId,
+                schemas,
+            },
+            getToken,
+        });
+        if (results.status === 'error') {
+            throw new Error(results.error);
+        }
+        const formattedResults = results.data.columnsByTable.map((table) => {
+            return {
+                tableName: table.tableName,
+                displayName: table.displayName || table.tableName,
+                columns: table.columns.map((column) => {
+                    return {
+                        columnName: column.columnName,
+                        displayName: column.displayName,
+                        fieldType: column.fieldType,
+                        dataTypeId: column.dataTypeId,
+                        field: column.columnName,
+                    };
+                }),
+            };
+        });
+        return { columnsByTable: formattedResults, schema: results.data.schema };
+    }
 }
 // Unused?
-export async function getVirtualTables(queryEndpoint, tableSchemas, customerNameField, clientId, getToken) {
+export async function getVirtualTables(queryEndpoint, tableSchemas, customerNameField, clientId, getToken, queryHeaders) {
     const { data: results } = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -165,12 +264,14 @@ export async function getVirtualTables(queryEndpoint, tableSchemas, customerName
     }
     return results.notSureWhatThisIs.sqlQueries;
 }
-export async function getVirtualTableData(clientId, query, databaseType, queryEndpoint, getToken) {
+// TODO: Check that works with self-hosted
+export async function getVirtualTableData(clientId, query, databaseType, queryEndpoint, getToken, eventTracking, queryHeaders) {
     let queryAst = undefined;
     try {
         const { data } = await quillFetch({
             client: {
                 queryEndpoint,
+                queryHeaders,
                 clientId,
                 withCredentials: false,
             },
@@ -191,6 +292,16 @@ export async function getVirtualTableData(clientId, query, databaseType, queryEn
         }
     }
     catch (e) {
+        eventTracking?.logError?.({
+            type: 'network',
+            severity: 'medium',
+            message: 'Error getting AST',
+            errorMessage: e.message,
+            errorStack: e.stack,
+            errorData: {
+                function: 'getVirtualTableData',
+            },
+        });
         return {
             success: false,
             error: 'Invalid SQL Query',
@@ -200,6 +311,7 @@ export async function getVirtualTableData(clientId, query, databaseType, queryEn
     const results = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -278,10 +390,11 @@ export async function getVirtualTableData(clientId, query, databaseType, queryEn
         : { ...results, ...queryAst };
 }
 // Unused?
-export async function getAST(query, clientId, queryEndpoint, getToken) {
+export async function getAST(query, clientId, queryEndpoint, getToken, queryHeaders) {
     const { data } = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -296,10 +409,11 @@ export async function getAST(query, clientId, queryEndpoint, getToken) {
     return data;
 }
 // Unused?
-export async function getQueryFromAI(aiPrompt, columnsByTable, queryEndpoint, clientId, getToken) {
+export async function getQueryFromAI(aiPrompt, columnsByTable, queryEndpoint, clientId, getToken, queryHeaders) {
     const { data: results } = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -313,13 +427,15 @@ export async function getQueryFromAI(aiPrompt, columnsByTable, queryEndpoint, cl
     });
     return results?.message || '';
 }
-export async function getQueryFromAiWithConnection(queryEndpoint, aiPrompt, clientId, getToken, schemaNames) {
+// TODO: Check that works with self-hosted
+export async function getQueryFromAiWithConnection(isSelfHosted, databaseSchema, queryEndpoint, aiPrompt, clientId, getToken, schemaNames, queryHeaders) {
     if (aiPrompt.trim().length > 500) {
         return '';
     }
     const { data: results } = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -328,6 +444,7 @@ export async function getQueryFromAiWithConnection(queryEndpoint, aiPrompt, clie
             prompt: aiPrompt,
             clientId,
             schemaNames,
+            databaseSchema: isSelfHosted ? databaseSchema : undefined,
         },
         getToken,
     });
@@ -338,6 +455,7 @@ export async function createVirtualTable(viewInfo, client, tableData, currentTab
     const { data: queryAstRaw } = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -349,6 +467,7 @@ export async function createVirtualTable(viewInfo, client, tableData, currentTab
         },
         getToken,
     });
+    // Check for missing tenant field
     const missingField = ownerTenantFields.find((field) => tableData &&
         !tableData.fields.find((col) => col.name === field?.replaceAll('"', '')));
     const failingTenant = client.allTenantTypes.find((tenant) => tenant.tenantField === missingField);
@@ -356,8 +475,28 @@ export async function createVirtualTable(viewInfo, client, tableData, currentTab
         return {
             success: false,
             failingTenant,
+            failingTenantErrorType: 'missing',
         };
     }
+    // Check for type mismatches
+    if (tableData) {
+        const typeMismatchedTenant = ownerTenantFields.find((owner) => {
+            const tenant = client.allTenantTypes?.find((t) => t.tenantField === owner);
+            const tableDataField = tableData.fields.find((col) => col.name === owner?.replaceAll('"', ''));
+            return ((tenant?.fieldType === 'string' &&
+                isNumberType(tableDataField?.fieldType ?? '')) ||
+                (tenant?.fieldType === 'number' &&
+                    isStringType(tableDataField?.fieldType ?? '')));
+        });
+        if (typeMismatchedTenant) {
+            const tenant = client.allTenantTypes?.find((t) => t.tenantField === typeMismatchedTenant);
+            return {
+                success: false,
+                failingTenant: tenant,
+                failingTenantErrorType: 'type_mismatch',
+            };
+        }
+    }
     if (!queryAstRaw || queryAstRaw.success === false) {
         return {
             success: false,
@@ -378,6 +517,7 @@ export async function createVirtualTable(viewInfo, client, tableData, currentTab
     const results = await quillFetch({
         client: {
             queryEndpoint,
+            queryHeaders,
             clientId,
             withCredentials: false,
         },
@@ -393,3 +533,28 @@ export async function createVirtualTable(viewInfo, client, tableData, currentTab
     });
     return { ...results.data, success: true };
 }
+// Helper functions for type checking
+function isNumberType(type) {
+    const numberTypes = [
+        'int',
+        'integer',
+        'bigint',
+        'smallint',
+        'decimal',
+        'numeric',
+        'float',
+        'double',
+        'real',
+    ];
+    return numberTypes.some((t) => type.toLowerCase().includes(t));
+}
+function isStringType(type) {
+    const stringTypes = [
+        'char',
+        'varchar',
+        'text',
+        'string',
+        'character varying',
+    ];
+    return stringTypes.some((t) => type.toLowerCase().includes(t));
+}

package/dist/esm/assets/ArrowDownHeadIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB;;6CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ArrowDownHeadIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/ArrowDownHeadIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB,GAAI;;CAAY,4CActC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/assets/XIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK;;6CAcV,CAAC;AACF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"XIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK,GAAI;;CAAY,4CAc1B,CAAC;AACF,eAAe,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAazE"}
+{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAgBzE"}

package/dist/esm/components/CardSection.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAdmin } from '../AdminProvider';
 export default function CardSection(props) {
+    const { state: { theme }, } = useAdmin();
     return (_jsx("div", { style: {
-            fontFamily: 'Inter; Helvetica',
-            color: '#364153',
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
             fontSize: 16,
             fontWeight: '600',
         }, children: props.children }));

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

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/ClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,QAAA,MAAM,eAAe,qCAIlB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAsHA,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ClipboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/ClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,QAAA,MAAM,eAAe,GAAI,kCAItB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAsHA,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CA8J7B"}
+{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CAsM7B"}

package/dist/esm/components/DashboardSelectPopover.js

@@ -1,15 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { ListboxRow, ListboxTextInput, Popover } from './OrgSelect';
+import { ListboxRow, Popover } from './OrgSelect';
 import MiniButtonPrimitive from '../primitives/MiniButtonPrimitive';
 import { LoadingSpinner } from './UiComponents';
+import { ListboxTextInput } from './QuillMultiSelectWithCombo';
+import { useAdmin } from '../AdminProvider';
 export default function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, setSelectedEditDashboard, onClickNewDashboard, parentRef, isLoading, }) {
     const [isOpen, setIsOpen] = useState(false);
+    const { eventTracking } = useAdmin();
     const [searchQuery, setSearchQuery] = useState('');
     const filteredDashboards = useMemo(() => {
         return dashboards.filter((dashboard) => dashboard?.toLowerCase().includes(searchQuery.toLowerCase()));
     }, [dashboards, searchQuery]);
     const handleItemClick = (selectedDashboard) => {
+        eventTracking?.addBreadcrumb?.({
+            message: 'Set dashboard in DashboardSelectPopover',
+            data: {
+                dashboard: selectedDashboard,
+            },
+            category: 'navigation',
+            level: 'info',
+            timestamp: Date.now(),
+        });
         setDashboard(selectedDashboard);
         setIsOpen(false);
     };
@@ -19,23 +31,47 @@ export default function DashboardSelectPopover({ dashboards, setDashboard, dashb
                     marginTop: '0px',
                     marginBottom: '4px',
                     fontWeight: '600',
+                    fontFamily: theme.fontFamily,
                     color: theme.secondaryTextColor,
                 }, children: "Dashboard" }), _jsx(Popover, { parentRef: parentRef, label: dashboard ?? 'Select dashboard', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
                     boxSizing: 'border-box',
                     fontSize: 14,
                     maxHeight: '50vh',
-                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsxs("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => (_jsx(ListboxRow, { setSelected: dashboard && dashboard !== item
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, width: 180, onChange: setSearchQuery }), _jsx("div", { style: {
+                                height: 9,
+                                width: 230,
+                                borderTop: `1px solid ${theme?.borderColor ?? '#e7e7e7'}`,
+                            } }), _jsxs("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => (_jsx(ListboxRow, { setSelected: dashboard && dashboard !== item
                                         ? () => handleItemClick(item)
                                         : undefined, item: item, isSelected: dashboard === item, hoverActions: (item) => (_jsx(MiniButtonPrimitive, { label: "Manage", onClick: () => {
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Opened manage dashboard in DashboardSelectPopover',
+                                                data: {
+                                                    dashboard: item,
+                                                },
+                                                category: 'interaction',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
                                             setSelectedEditDashboard(item);
                                             setIsOpen(false);
                                         }, style: {
                                             marginRight: -8,
                                             marginTop: 'auto',
                                             marginBottom: 'auto',
-                                        } })) }, item))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("div", { onClick: onClickNewDashboard, style: {
+                                            fontFamily: theme.fontFamily,
+                                            color: theme.secondaryTextColor,
+                                            backgroundColor: theme.backgroundColor,
+                                        } })) }, item))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("div", { onClick: () => {
+                                            onClickNewDashboard();
+                                            eventTracking?.addBreadcrumb?.({
+                                                message: 'Opened create new dashboard in DashboardSelectPopover',
+                                                category: 'navigation',
+                                                level: 'info',
+                                                timestamp: Date.now(),
+                                            });
+                                        }, style: {
                                             height: 42,
-                                            color: '#384151',
                                             width: 216,
                                             borderRadius: 6,
                                             textAlign: 'left',
@@ -49,15 +85,18 @@ export default function DashboardSelectPopover({ dashboards, setDashboard, dashb
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
+                                            fontFamily: theme.fontFamily,
                                         }, children: [_jsx("style", { children: `
                     .quill-list-select > div {
-                      background-color: white;
+                      background-color: ${theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-list-selected > div {
-                      background-color: rgba(56, 65, 81, 0.04);
-                    }
+                      background-color: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     .quill-list-select:hover > div {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }` }), _jsxs("div", { style: {
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',

package/dist/esm/components/DatabaseSelector.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { QuillTheme } from '../Admin';
 interface DatabaseSelectorProps {
     label: string;
     imageUrl: string;
@@ -6,7 +7,8 @@ interface DatabaseSelectorProps {
     onDatabaseSelect: (database: string) => void;
     containerStyle?: CSSProperties;
     databaseType: string;
+    theme: QuillTheme;
 }
-export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, theme, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DatabaseSelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,GAClB,EAAE,qBAAqB,2CA6CvB"}
+{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,EACjB,KAAK,GACN,EAAE,qBAAqB,2CA8CvB"}

package/dist/esm/components/DatabaseSelector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', }) {
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', theme, }) {
     return (_jsxs("div", { style: {
             ...containerStyle,
             height: 128,
@@ -24,7 +24,8 @@ export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSel
                 } }), _jsx("h1", { style: {
                     fontSize: 14,
                     fontWeight: '500',
-                    color: '#212121',
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
                     marginTop: 10,
                 }, children: label })] }));
 }

package/dist/esm/components/DateRangePicker/SingleDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAiB,GAClB,EAAE,mBAAmB,2CA+VrB"}
+{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAiB,GAClB,EAAE,mBAAmB,2CAqXrB"}

package/dist/esm/components/DateRangePicker/SingleDatePicker.js

@@ -115,10 +115,6 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                     alignItems: 'center',
                     borderColor: theme?.borderColor,
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
-                    backgroundColor: disabled
-                        ? theme?.hoverBackgroundColor
-                        : theme?.backgroundColor,
                     padding: '8px 12px',
                     fontSize: 14,
                     margin: 0,
@@ -132,7 +128,9 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                     minHeight: 40,
                     maxHeight: 40,
                     gap: 10,
-                }, disabled: disabled, onClick: () => setShowModal((prevShowModal) => !prevShowModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), ignoreYear
+                    opacity: disabled ? 0.5 : 1,
+                }, disabled: disabled, onClick: () => setShowModal((prevShowModal) => !prevShowModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
+        .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }` }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), ignoreYear
                         ? selectedDate
                             ? `Start on ${format(selectedDate, 'MMM dd')}`
                             : 'Select Date'
@@ -175,7 +173,20 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                                         visibility: ignoreYear && currentMonth.getMonth() === 0
                                             ? 'hidden'
                                             : 'visible',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `
+                  .quill-calendar-button { 
+                    background-color: ${theme.backgroundColor}; 
+                  } 
+                  .quill-calendar-button:hover { 
+                    background-color: ${theme.hoverBackgroundColor}; 
+                  }
+                  .quill-calendar-button svg { 
+                    fill: ${theme.chartLabelColor}; 
+                  }
+                  .quill-calendar-button:hover svg { 
+                    fill: ${theme.hoverTextColor}; 
+                  }
+                ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         fontSize: 14,
                                         color: theme.primaryTextColor,
@@ -198,7 +209,20 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                                         visibility: ignoreYear && currentMonth.getMonth() === 11
                                             ? 'hidden'
                                             : 'visible',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) })] })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `
+                  .quill-calendar-button { 
+                    background-color: ${theme.backgroundColor}; 
+                  } 
+                  .quill-calendar-button:hover { 
+                    background-color: ${theme.hoverBackgroundColor}; 
+                  }
+                  .quill-calendar-button svg { 
+                    fill: ${theme.chartLabelColor}; 
+                  }
+                  .quill-calendar-button:hover svg { 
+                    fill: ${theme.hoverTextColor}; 
+                  }
+                ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _jsx("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) })] })] }), _jsx("div", { style: {
                                 display: 'grid',
                                 gridTemplateColumns: 'repeat(7, 1fr)',
                                 marginTop: 8,