@quillsql/admin 1.6.1 → 1.6.2

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export default function DeleteButton(props: any): JSX.Element;
 //# sourceMappingURL=DeleteButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../src/components/DeleteButton.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA2B5D"}
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../src/components/DeleteButton.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA2B5D"}

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

@@ -1,13 +1,14 @@
+import React from 'react';
 interface DropdownMenuWithLabelProps {
     items: any[];
     setSelected: (selected: any) => void;
     selected: any;
     label: string;
-    theme?: any;
     secondaryTextColor?: string;
-    disabled?: boolean;
     parentRef: any;
+    tooltipText?: string;
+    style?: React.CSSProperties;
 }
-export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled, secondaryTextColor, parentRef, }: DropdownMenuWithLabelProps): import("react/jsx-runtime").JSX.Element;
+export default function DropdownMenuWithLabel({ items, setSelected, selected, label, parentRef, tooltipText, style, }: DropdownMenuWithLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DropDownMenuWithLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAIA,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,kBAA8B,EAC9B,SAAS,GACV,EAAE,0BAA0B,2CA6E5B"}
+{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,GAAG,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,GACN,EAAE,0BAA0B,2CA+F5B"}

package/dist/esm/components/DropDownMenuWithLabel.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { ListboxTextInput, Popover } from './OrgSelect';
-export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled = false, secondaryTextColor = '#6e6e6e', parentRef, }) {
+import FormTooltip from './FormTooltip';
+export default function DropdownMenuWithLabel({ items, setSelected, selected, label, parentRef, tooltipText, style, }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
-    const [filteredItems, setFilteredItems] = React.useState(items.slice(0, 20));
-    useEffect(() => {
-        setFilteredItems(items.slice(0, 10));
-    }, [items]);
-    const handleSearchChange = (searchValue) => {
-        setSearchQuery(searchValue);
-        const curFilteredItems = searchValue === ''
+    const filteredItems = useMemo(() => {
+        return searchQuery === ''
             ? items.slice(0, 10)
             : items
                 .filter((value) => {
@@ -20,23 +16,41 @@ export default function DropdownMenuWithLabel({ items, setSelected, selected, th
                 return value
                     .toLowerCase()
                     .replace(/\s+/g, '')
-                    .includes(searchValue.toLowerCase().replace(/\s+/g, ''));
+                    .includes(searchQuery.toLowerCase().replace(/\s+/g, ''));
             })
+                .map((value) => ({
+                value,
+                matchIndex: value
+                    .toLowerCase()
+                    .replace(/\s+/g, '')
+                    .indexOf(searchQuery.toLowerCase().replace(/\s+/g, '')),
+            }))
+                .sort((a, b) => {
+                if (a.matchIndex === b.matchIndex) {
+                    return a.value.length - b.value.length; // Prefer shorter matches
+                }
+                return a.matchIndex - b.matchIndex; // Prefer matches closer to the start
+            })
+                .map((elem) => elem.value)
                 .slice(0, 10);
-        setFilteredItems(curFilteredItems);
-    };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("h1", { style: {
-                    fontSize: '14px',
-                    paddingTop: '0px',
-                    marginTop: '0px',
-                    marginBottom: '4px',
-                    fontWeight: '600',
-                    color: secondaryTextColor,
-                }, children: label }), _jsxs(Popover, { parentRef: parentRef, label: items.length === 0 ? 'N/A' : selected ? selected : 'Select', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
+    }, [searchQuery, items]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: 230, ...style }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: [_jsx("h1", { style: {
+                            fontSize: '13px',
+                            paddingTop: '0px',
+                            marginTop: '0px',
+                            marginBottom: '5px',
+                            fontWeight: '600',
+                            color: '#6e6e6e',
+                        }, children: label }), tooltipText && _jsx(FormTooltip, { color: "#6e6e6e", text: tooltipText })] }), _jsxs(Popover, { parentRef: parentRef, label: items.length === 0 ? 'N/A' : selected ? selected : 'Select', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
                     boxSizing: 'border-box',
                     fontSize: 14,
-                    //   padding: 11,
-                }, setIsOpen: setIsOpen, children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: 'Search', value: searchQuery, onChange: handleSearchChange }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsx("div", { style: { gap: 2, maxHeight: '50vh' }, children: filteredItems.map((item, index) => (_jsx(ListboxRow, { setSelected: setSelected, setIsOpen: setIsOpen, item: item }, index))) }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
+                    zIndex: 10,
+                }, setIsOpen: setIsOpen, children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: 'Search', value: searchQuery, onChange: (value) => setSearchQuery(value) }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsx("div", { style: { gap: 2, maxHeight: '50vh' }, children: filteredItems.map((item, index) => (_jsx(ListboxRow, { setSelected: setSelected, setIsOpen: setIsOpen, item: item }, index))) }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
 }
 function ListboxRow({ item, setSelected, setIsOpen, }) {
     return (_jsxs("div", { onClick: setSelected
@@ -65,7 +79,7 @@ function ListboxRow({ item, setSelected, setIsOpen, }) {
      white-space: nowrap;
      overflow: hidden;
   }
-  .quill-org-select:hover {
+  .drop-down:hover {
     background-color: rgba(56, 65, 81, 0.04);
   }` }), _jsx("div", { style: {
                     textOverflow: 'ellipsis',

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

@@ -1,11 +1,8 @@
-import { CSSProperties } from 'react';
 interface DynamicBannerProps {
     header: string;
-    message: string;
-    onExit: () => void;
-    style: CSSProperties;
+    onExit?: () => void;
     fontColor?: string;
 }
-export default function DynamicBanner({ header, message, onExit, style, fontColor, }: DynamicBannerProps): JSX.Element | null;
+export default function DynamicBanner({ header, onExit, fontColor, }: DynamicBannerProps): JSX.Element;
 export {};
 //# sourceMappingURL=DynamicBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicBanner.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAiCzC"}
+{"version":3,"file":"DynamicBanner.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicBanner.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAmClC"}

package/dist/esm/components/DynamicBanner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import XMarkIcon from '../icons/XMarkIcon';
-export default function DynamicBanner({ header, message, onExit, style, fontColor, }) {
+export default function DynamicBanner({ header, onExit, fontColor, }) {
     return (_jsxs("div", { id: "quill-edit-banner", style: {
             width: '100vw',
             height: 70,
@@ -12,5 +12,5 @@ export default function DynamicBanner({ header, message, onExit, style, fontColo
             paddingLeft: 20,
             paddingRight: 20,
             borderBottom: '1px solid #e7e7e7',
-        }, children: [_jsx("h1", { style: { fontSize: 21, fontWeight: 600, color: '#212121' }, children: header }), _jsx("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, fill: fontColor, "aria-hidden": "true" }) })] }));
+        }, children: [_jsx("h1", { style: { fontSize: 21, fontWeight: 600, color: '#212121' }, children: header }), onExit && (_jsx("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, fill: fontColor, "aria-hidden": "true" }) }))] }));
 }

package/dist/esm/components/EmptyDashboardComponent/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export default function EmptyDashboardComponent(): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/EmptyDashboardComponent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyDashboardComponent/index.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI,GAAG,CAAC,OAAO,CAoF7D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyDashboardComponent/index.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI,GAAG,CAAC,OAAO,CAqF7D"}

package/dist/esm/components/EmptyDashboardComponent/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAdmin } from '../../AdminProvider';
 import { MemoizedButton } from '../UiComponents';
 export default function EmptyDashboardComponent() {
-    const { state } = useAdmin();
+    const { dispatch } = useAdmin();
     return (_jsx("div", { style: {
             width: '100%',
             display: 'flex',
@@ -37,8 +37,9 @@ export default function EmptyDashboardComponent() {
                                 borderRadius: 4,
                                 cursor: 'pointer',
                             }, className: "quill-hover-button", children: "No charts created yet." })] }), _jsx("div", { style: { paddingBottom: 8 }, children: _jsx(MemoizedButton, { label: 'Create chart', style: { fontSize: 14 }, onClick: () => {
-                            if (state.navigateToDashboardBuilder) {
-                                state.navigateToDashboardBuilder();
-                            }
+                            dispatch({
+                                type: 'SET_ACTIVE_COMPONENT',
+                                payload: 'Report Builder',
+                            });
                         } }) })] }) }));
 }

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

@@ -0,0 +1,4 @@
+export default function EmptyVirtualTablesComponent({ onClick, }: {
+    onClick: () => void;
+}): JSX.Element;
+//# sourceMappingURL=EmptyVirtualTablesComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyVirtualTablesComponent.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyVirtualTablesComponent.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA+Ed"}

package/dist/esm/components/EmptyVirtualTablesComponent.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MemoizedButton } from './UiComponents';
+export default function EmptyVirtualTablesComponent({ onClick, }) {
+    return (_jsx("div", { style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        }, children: _jsxs("div", { style: {
+                borderRadius: 6,
+                marginTop: 100,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 20,
+                padding: 16,
+                border: '1px solid #e7e7e7',
+                boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.07)',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 260,
+                    }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
+                                fontSize: 16,
+                                fontWeight: 500,
+                                color: '#565656',
+                                // border: '1px solid #e7e7e7',
+                                paddingTop: 8,
+                                paddingBottom: 8,
+                                paddingRight: 12,
+                                paddingLeft: 12,
+                                borderRadius: 4,
+                                cursor: 'pointer',
+                            }, className: "quill-hover-button", children: "No virtual tables." })] }), _jsx("div", { style: { paddingBottom: 8 }, children: _jsx(MemoizedButton, { label: 'Create virtual table', style: { fontSize: 14 }, onClick: onClick }) })] }) }));
+}

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

@@ -0,0 +1,4 @@
+export default function ExternalLink({ href }: {
+    href: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExternalLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLink.d.ts","sourceRoot":"","sources":["../../../src/components/ExternalLink.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CAY9D"}

package/dist/esm/components/ExternalLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ExteriorLinkIcon from '../icons/ExteriorLinkIcon';
+export default function ExternalLink({ href }) {
+    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", children: _jsx(ExteriorLinkIcon, { style: {
+                pointerEvents: 'none',
+                height: 14,
+                color: '#6e6e6e',
+            } }) }));
+}

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

@@ -0,0 +1,8 @@
+declare function FormTooltip({ text, element, color, mirror, }: {
+    text?: string;
+    element?: JSX.Element;
+    color?: string;
+    mirror?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export default FormTooltip;
+//# sourceMappingURL=FormTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/FormTooltip.tsx"],"names":[],"mappings":"AAIA,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CAwHA;AAED,eAAe,WAAW,CAAC"}

package/dist/esm/components/FormTooltip.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import InformationCircleIcon from '../icons/InformationCircleIcon';
+function FormTooltip({ text, element, color, mirror, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const tooltipRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [tooltipPosition, setTooltipPosition] = useState(undefined);
+    const updatePosition = () => {
+        if (triggerRef.current && tooltipRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const tooltipRect = tooltipRef.current.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const viewportWidth = window.innerWidth;
+            // Default position below the trigger
+            let top = rect.bottom + window.scrollY + 8; // Add margin of 8px below
+            let left = rect.left + window.scrollX;
+            // Adjust if tooltip goes off the screen (mirror option reverses alignment)
+            if (mirror) {
+                left = rect.right - tooltipRect.width + window.scrollX;
+            }
+            // Ensure tooltip doesn't go beyond the right edge
+            if (left + tooltipRect.width > viewportWidth) {
+                left = viewportWidth - tooltipRect.width - 16; // Keep 16px margin
+            }
+            // Ensure tooltip doesn't go beyond the bottom edge with a 64px margin
+            const maxHeight = viewportHeight - top - 64;
+            if (maxHeight < tooltipRect.height) {
+                top = rect.top - tooltipRect.height + window.scrollY - 8;
+            }
+            setTooltipPosition({ top, left });
+        }
+    };
+    useEffect(() => {
+        if (isOpen) {
+            updatePosition();
+            window.addEventListener('resize', updatePosition, { passive: true });
+            window.addEventListener('scroll', updatePosition, { passive: true });
+            return () => {
+                window.removeEventListener('resize', updatePosition);
+                window.removeEventListener('scroll', updatePosition);
+            };
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { ref: triggerRef, style: {
+            marginLeft: 4,
+            alignItems: 'center',
+            cursor: 'pointer',
+            position: 'relative',
+            // zIndex: 20,
+        }, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs("div", { style: {
+                    height: 18,
+                    width: 18,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 18,
+                }, className: "tooltip", children: [_jsx("style", { children: `.tooltip { background-color: white; } .tooltip:hover { background-color: rgba(56, 65, 81, 0.1); }` }), _jsx(InformationCircleIcon, { style: { color: color || '#212121' }, height: 18, width: 18 })] }), isOpen &&
+                createPortal(_jsx("div", { ref: tooltipRef, style: {
+                        visibility: tooltipPosition ? 'visible' : 'hidden',
+                        top: `${tooltipPosition?.top ?? 0}px`,
+                        left: `${tooltipPosition?.left ?? 0}px`,
+                        maxWidth: '300px', // Limit width for readability
+                        position: 'absolute',
+                        backgroundColor: '#ffffff',
+                        // left: mirror ? 'auto' : 0,
+                        // right: mirror ? 0 : 'auto',
+                        padding: 8,
+                        borderRadius: 6,
+                        fontSize: 14,
+                        zIndex: 100,
+                        width: 300,
+                        fontWeight: 600,
+                        boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.09)',
+                        borderWidth: 1,
+                        paddingLeft: 12,
+                        paddingRight: 12,
+                        borderStyle: 'solid',
+                        borderColor: '#e7e7e7',
+                        color: '#212121',
+                    }, children: text ?? element }), document.body)] }));
+}
+export default FormTooltip;

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

@@ -1,3 +1,6 @@
 import { PropsWithChildren } from 'react';
-export default function InputLabel(props: PropsWithChildren): JSX.Element;
+export default function InputLabel(props: PropsWithChildren & {
+    tooltip?: string;
+    mirror?: boolean;
+}): JSX.Element;
 //# sourceMappingURL=InputLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/components/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAcxE"}
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/components/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,KAAK,EAAE,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GAChE,GAAG,CAAC,OAAO,CA0Bb"}

package/dist/esm/components/InputLabel.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormTooltip from './FormTooltip';
 export default function InputLabel(props) {
-    return (_jsx("div", { style: {
-            fontFamily: 'Inter; Helvetica',
-            color: '#6C727F',
-            fontSize: 14,
-            fontWeight: '600',
-            marginBottom: 2,
-        }, children: props.children }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { style: {
+                    fontFamily: 'Inter; Helvetica',
+                    color: '#6C727F',
+                    fontSize: 14,
+                    fontWeight: '600',
+                    marginBottom: 2,
+                    whiteSpace: 'nowrap',
+                }, children: props.children }), props.tooltip && (_jsx(FormTooltip, { color: "#6C727F", text: props.tooltip, mirror: props.mirror }))] }));
 }

package/dist/esm/components/InternalDashboard/ChartSkeleton.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export interface SkeletonComponentProps {
+    conatinerStyle?: CSSProperties;
+    className?: string;
+}
+export declare const QuillLoadingSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default function ChartSkeleton({ className, containerStyle, }: {
+    className?: string;
+    containerStyle?: CSSProperties;
+}): JSX.Element;
+//# sourceMappingURL=ChartSkeleton.d.ts.map

package/dist/esm/components/InternalDashboard/ChartSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/InternalDashboard/ChartSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,+CAA0B,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,GAAG,GAAG,CAAC,OAAO,CAsEd"}

package/dist/esm/components/InternalDashboard/ChartSkeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const QuillLoadingSkeleton = () => _jsx(ChartSkeleton, {});
+export default function ChartSkeleton({ className, containerStyle, }) {
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            height: '100%',
+            width: '100%',
+            ...containerStyle,
+        }, className: className, children: _jsx("div", { style: {
+                height: '100%',
+                width: '100%',
+                boxSizing: 'content-box',
+                borderRadius: 8,
+                overflow: 'hidden',
+            }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: '#F9F9FA' }), _jsx("defs", { fill: '#F9F9FA', children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+}

package/dist/esm/components/InternalDashboard/DashboardFilter.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { DashboardFilter as Filters } from '../../utils/filter';
+interface DashboardFilterProps {
+    filter: Filters;
+    onChangeFilter: (filter: Filters, value?: string | (string | null)[] | {
+        startDate: Date;
+        endDate: Date;
+    } | {
+        preset: string;
+    }, comparison?: {
+        value: string;
+        text: string;
+    }) => void;
+    isLoading?: boolean;
+    disabled?: boolean;
+    containerStyle?: CSSProperties;
+}
+export declare function DashboardFilter({ filter, onChangeFilter, isLoading, disabled, containerStyle, }: DashboardFilterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DashboardFilter.d.ts.map

package/dist/esm/components/InternalDashboard/DashboardFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/InternalDashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,IAAI,OAAO,EAAiB,MAAM,oBAAoB,CAAC;AAO/E,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,CACd,MAAM,EAAE,OAAO,EACf,KAAK,CAAC,EACF,MAAM,GACN,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GACjB;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,GAClC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,EACtB,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KACzC,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,SAAS,EACT,QAAQ,EACR,cAAc,GACf,EAAE,oBAAoB,kDAwKtB"}

package/dist/esm/components/InternalDashboard/DashboardFilter.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { PRIMARY_RANGE } from '../../utils/filter';
+import { QuillMultiSelectComponentWithCombo } from '../QuillMultiSelectWithCombo';
+import { QuillSelectComponentWithCombo } from '../QuillSelectWithCombo';
+import { QuillDateRangePicker } from './DateRangePicker/QuillDateRangePicker';
+import { useAdmin } from '../../AdminProvider';
+import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
+export function DashboardFilter({ filter, onChangeFilter, isLoading, disabled, containerStyle, }) {
+    const { theme } = useAdmin().state;
+    const preset = useMemo(() => {
+        if (('preset' in filter || 'primaryRange' in filter) &&
+            'startDate' in filter &&
+            'endDate' in filter) {
+            if (!filter.preset && !filter.primaryRange)
+                return '';
+            if (!filter.startDate || !filter.endDate)
+                return filter.preset?.value ?? filter.primaryRange.value;
+            const presetRange = filter.presetRanges?.find((range) => range.value === (filter.preset?.value ?? filter.primaryRange.value)) ?? PRIMARY_RANGE[filter.preset?.value ?? filter.primaryRange.value];
+            if (!presetRange)
+                return filter.preset?.value ?? filter.primaryRange.value;
+            // if (
+            //   presetRange.startDate !== filter.startDate ||
+            //   presetRange.endDate !== filter.endDate
+            // ) {
+            //   return '';
+            // }
+            return filter.preset?.value ?? filter.primaryRange.value;
+        }
+        return '';
+    }, [filter]);
+    if (filter.filterType === 'string') {
+        if (filter.stringFilterType === 'multiselect') {
+            return (_jsx("div", { style: containerStyle, children: _jsx(QuillMultiSelectComponentWithCombo, { label: filter.label, value: filter.values ?? [], onChange: (e) => {
+                        if (Array.isArray(e.target.value) &&
+                            e.target.value.length === 0) {
+                            onChangeFilter(filter, undefined);
+                            return;
+                        }
+                        onChangeFilter(filter, e.target.value);
+                    }, options: [
+                        ...(filter.options
+                            ? filter.options.map((elem) => ({
+                                label: elem[filter.labelField],
+                                value: elem[filter.field],
+                            }))
+                            : []),
+                    ], width: 200, isLoading: isLoading, disabled: disabled, mimicReactSelect: true }) }));
+        }
+        return (_jsx("div", { style: containerStyle, children: _jsx(QuillSelectComponentWithCombo, { label: filter.label, value: filter.selectedValue, onChange: (e) => {
+                    onChangeFilter(filter, e.target.value);
+                }, options: [
+                    ...(filter.options
+                        ? filter.options.map((elem) => ({
+                            label: elem[filter.labelField] ?? elem[filter.field] ?? '',
+                            value: elem[filter.field] ?? '',
+                        }))
+                        : []),
+                ], width: 200, isLoading: isLoading, disabled: disabled, mimicReactSelect: true }) }));
+    }
+    else if (filter.filterType === 'date_range') {
+        return (_jsx("div", { style: containerStyle, children: _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'flex-end',
+                    flexWrap: 'wrap',
+                    rowGap: 8,
+                }, children: [_jsx(QuillDateRangePicker, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: preset, onChangeDateRange: (value) => {
+                            onChangeFilter(filter, {
+                                startDate: value.startDate,
+                                endDate: value.endDate,
+                            });
+                        }, onChangePreset: (e) => {
+                            onChangeFilter(filter, { preset: e.target.value });
+                        }, presetOptions: filter.options?.map((option) => {
+                            return { label: option.label, value: option.value };
+                        }) ?? [], selectWidth: 200, disabled: disabled }), filter.comparison && (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: [_jsx("div", { style: {
+                                    paddingLeft: 16,
+                                    paddingRight: 12,
+                                    color: theme?.secondaryTextColor,
+                                    fontFamily: theme?.fontFamily,
+                                    fontSize: 14,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    flex: 1,
+                                    whiteSpace: 'nowrap',
+                                    minWidth: 80,
+                                    justifyContent: 'center',
+                                }, children: "compared to" }), _jsx(QuillSelectComponentWithCombo, { value: filter.comparisonRange?.value ?? 'NO_COMPARISON', onChange: (e) => {
+                                    onChangeFilter(filter, undefined, COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
+                                }, options: COMPARISON_OPTIONS.map((compareOption) => ({
+                                    value: compareOption.value,
+                                    label: compareOption.text,
+                                })), width: 200, hideEmptyOption: true, mimicReactSelect: true })] }))] }) }));
+    }
+    return null;
+}

package/dist/esm/components/InternalDashboard/DashboardLoadingComponent.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+export declare const DashboardLoadingComponent: ({ containerStyle, chartContainerStyle, LoadingComponent, }: {
+    containerStyle?: CSSProperties;
+    chartContainerStyle?: CSSProperties;
+    LoadingComponent?: () => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DashboardLoadingComponent.d.ts.map

package/dist/esm/components/InternalDashboard/DashboardLoadingComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLoadingComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/InternalDashboard/DashboardLoadingComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,eAAO,MAAM,yBAAyB,+DAInC;IACD,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC,4CA6BA,CAAC"}

package/dist/esm/components/InternalDashboard/DashboardLoadingComponent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChartSkeleton from './ChartSkeleton';
+export const DashboardLoadingComponent = ({ containerStyle, chartContainerStyle, LoadingComponent = ChartSkeleton, }) => {
+    return (_jsxs("div", { style: { ...containerStyle, overflow: 'hidden' }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    width: '100%',
+                    marginBottom: 25,
+                    height: 66,
+                }, children: _jsx(LoadingComponent, {}) }), _jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill,minmax(400px, 1fr))',
+                    gridTemplateRows: `repeat(${170}px)`,
+                    gap: 40,
+                }, children: Array.from({ length: 4 }).map((_, index) => (_jsx("div", { style: chartContainerStyle, children: _jsx(LoadingComponent, {}, index) }, index))) })] }));
+};