@quillsql/admin 1.7.0 → 1.7.2

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

@@ -1,2033 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, } from '@dnd-kit/sortable';
-import { getEventCoordinates } from '@dnd-kit/utilities';
-import { CSS } from '@dnd-kit/utilities';
-import { DndContext, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors, TouchSensor, MeasuringStrategy, pointerWithin, rectIntersection, DragOverlay, useDroppable, closestCenter, } from '@dnd-kit/core';
-import { useCallback, useEffect, useMemo, useRef, useState, memo, } from 'react';
-import { Chart, useDashboardInternal, useAllReports, } from '@quillsql/react';
-import equal from 'fast-deep-equal';
-import { useAdmin } from '../../AdminProvider';
-import { convertCustomFilter, InternalDashboardFilterType as DashboardFilterType, } from '../../utils/filter';
-import EmptyDashboardComponent from '../EmptyDashboardComponent';
-import { DashboardLoadingComponent } from './DashboardLoadingComponent';
-import { QuillErrorMessageComponent } from '../UiComponents';
-import { DashboardFilter } from './DashboardFilter';
-import { COMPARISON_RANGE, defaultOptionsV2, getRangeFromPresetOptions, } from './DateRangePicker/dateRangePickerUtils';
-import { SecondaryButtonPrimitive } from '../../primitives';
-import { convertPresetOptionsToSelectableList } from '../DateRangePicker/dateRangePickerUtils';
-const sortByOrdering = (a, b) => {
-    if (a.order === undefined && b.order === undefined)
-        return 0;
-    if (a.order === undefined)
-        return 1;
-    if (b.order === undefined)
-        return -1;
-    return a.order - b.order;
-};
-const snapRightToCursor = ({ activatorEvent, draggingNodeRect, transform, }) => {
-    if (draggingNodeRect && activatorEvent) {
-        const activatorCoordinates = getEventCoordinates(activatorEvent);
-        if (!activatorCoordinates) {
-            return transform;
-        }
-        const offsetX = activatorCoordinates.x - draggingNodeRect.right;
-        return {
-            ...transform,
-            x: transform.x + offsetX,
-        };
-    }
-    return transform;
-};
-const MemoizedChart = memo(({ reportId, chartType }) => {
-    const hasRendered = useRef(false);
-    useEffect(() => {
-        hasRendered.current = true;
-    }, []);
-    return (_jsx(Chart, { reportId: reportId, containerStyle: {
-            padding: 10,
-            height: chartType === 'metric' ? 80 : chartType === 'table' ? 420 : 250,
-        }, hideFilters: true, hideDateRangeFilter: true, propagateChanges: !!hasRendered.current }));
-}, (prevProps, nextProps) => prevProps.reportId === nextProps.reportId &&
-    prevProps.chartType === nextProps.chartType);
-export const InternalDashboard = ({ name, hidden = false, onClickReport, 
-// hoverActions,
-onChangeLoading, filters, 
-// onUserFiltersUpdated,
-// onClickChartElement,
-// dateBucket,
-containerStyle, parentLoading, onManageDashboard, }) => {
-    const { state, clientLoading: isClientLoading, eventTracking } = useAdmin();
-    const tenants = state.currentTenantIdentity;
-    // const client = state.client;
-    // const [userFilters, setUserFilters] = useState<{
-    //   [label: string]: InternalFilter;
-    // }>({});
-    // const dataLoaderUserFilters = useMemo(() => {
-    //   return (filters?.map((f) => convertCustomFilter(f)) ?? []).concat(
-    //     Object.values(userFilters),
-    //   );
-    // }, [filters, userFilters]);
-    // useEffect(() => {
-    //   onUserFiltersUpdated?.(Object.values(userFilters));
-    // }, [userFilters]);
-    const { isLoading, data, isDashboardFilterLoading, dashboardFilters: populatedDashboardFilters, reload, setSectionOrder, } = useDashboardInternal(name, filters?.map((f) => convertCustomFilter(f)) ?? []);
-    const { allReportsById } = useAllReports();
-    const [previewSectionOrder, setPreviewSectionOrder] = useState({});
-    const [isEditingNewSection, setIsEditingNewSection] = useState(false);
-    const metrics = useMemo(() => {
-        const map = {};
-        Object.keys(data?.sections ?? {}).forEach((section) => {
-            if (!data?.sections?.[section])
-                return;
-            const sectionMetrics = data.sections[section].filter(({ id, chartType }) => id && ['metric'].includes(chartType ?? ''));
-            const sectionOrder = data?.sectionOrder?.find((s) => s.section === section);
-            const reportOrder = previewSectionOrder[section] ?? sectionOrder?.reportOrder ?? [];
-            if (reportOrder.length > 0) {
-                map[section] = [...sectionMetrics].sort((a, b) => {
-                    const aIndex = reportOrder.indexOf(a.id);
-                    const bIndex = reportOrder.indexOf(b.id);
-                    if (aIndex !== -1 && bIndex !== -1) {
-                        return aIndex - bIndex;
-                    }
-                    if (aIndex !== -1)
-                        return -1;
-                    if (bIndex !== -1)
-                        return 1;
-                    return sortByOrdering(a, b);
-                });
-            }
-            else {
-                // Fallback to order property if no reportOrder
-                map[section] = sectionMetrics.sort(sortByOrdering);
-            }
-        });
-        return map;
-    }, [data?.sections, data?.sectionOrder]);
-    const charts = useMemo(() => {
-        const map = {};
-        Object.keys(data?.sections ?? {}).forEach((section) => {
-            if (!data?.sections?.[section])
-                return;
-            const sectionCharts = data.sections[section].filter(({ id, chartType }) => id && !['metric', 'table'].includes(chartType ?? ''));
-            const sectionOrder = data?.sectionOrder?.find((s) => s.section === section);
-            const reportOrder = previewSectionOrder[section] ?? sectionOrder?.reportOrder ?? [];
-            if (reportOrder.length > 0) {
-                map[section] = [...sectionCharts].sort((a, b) => {
-                    const aIndex = reportOrder.indexOf(a.id);
-                    const bIndex = reportOrder.indexOf(b.id);
-                    if (aIndex !== -1 && bIndex !== -1)
-                        return aIndex - bIndex;
-                    if (aIndex !== -1)
-                        return -1;
-                    if (bIndex !== -1)
-                        return 1;
-                    return sortByOrdering(a, b);
-                });
-            }
-            else {
-                map[section] = sectionCharts.sort(sortByOrdering);
-            }
-        });
-        return map;
-    }, [data?.sections, data?.sectionOrder]);
-    const tables = useMemo(() => {
-        const map = {};
-        Object.keys(data?.sections ?? {}).forEach((section) => {
-            if (!data?.sections?.[section])
-                return;
-            const sectionTables = data.sections[section].filter(({ id, chartType }) => id && chartType === 'table');
-            const sectionOrder = data?.sectionOrder?.find((s) => s.section === section);
-            const reportOrder = previewSectionOrder[section] ?? sectionOrder?.reportOrder ?? [];
-            if (reportOrder.length > 0) {
-                map[section] = [...sectionTables].sort((a, b) => {
-                    const aIndex = reportOrder.indexOf(a.id);
-                    const bIndex = reportOrder.indexOf(b.id);
-                    if (aIndex !== -1 && bIndex !== -1)
-                        return aIndex - bIndex;
-                    if (aIndex !== -1)
-                        return -1;
-                    if (bIndex !== -1)
-                        return 1;
-                    return sortByOrdering(a, b);
-                });
-            }
-            else {
-                map[section] = sectionTables.sort(sortByOrdering);
-            }
-        });
-        return map;
-    }, [data?.sections, data?.sectionOrder]);
-    const mounted = useRef(false);
-    useEffect(() => {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        if (isClientLoading || tenants === undefined) {
-            return;
-        }
-        reload(name, false, undefined, {
-            filters: populatedDashboardFilters ?? [],
-        });
-    }, [filters]);
-    const handleReorder = useCallback(async (items) => {
-        // find the section order
-        const sectionOrder = data?.sectionOrder;
-        if (!sectionOrder)
-            return;
-        const newSectionOrder = Object.entries(items)
-            .map(([section, reports]) => {
-            const sectionId = sectionOrder.find((s) => s.section === section)?._id;
-            if (!sectionId)
-                return;
-            return {
-                _id: sectionId,
-                section,
-                reportOrder: reports.map((r) => r.id),
-            };
-        })
-            .filter((s) => s);
-        await setSectionOrder(newSectionOrder);
-    }, [data?.sectionOrder]);
-    // New function to handle section reordering
-    const handleSectionReorder = useCallback(async (newSectionOrder) => {
-        if (!data?.sectionOrder)
-            return;
-        const reorderedSections = newSectionOrder
-            .map((sectionName) => {
-            const sectionData = data.sectionOrder?.find((s) => s.section === sectionName);
-            return sectionData;
-        })
-            .filter(Boolean);
-        await setSectionOrder(reorderedSections);
-    }, [data?.sectionOrder, setSectionOrder]);
-    const handleSectionNameUpdate = useCallback(async (oldSectionName, newSectionName) => {
-        if (!data?.sectionOrder)
-            return;
-        const updatedSections = data.sectionOrder.map((section) => {
-            if (section.section === oldSectionName) {
-                return {
-                    ...section,
-                    section: newSectionName,
-                };
-            }
-            return section;
-        });
-        await setSectionOrder(updatedSections);
-    }, [data?.sectionOrder, setSectionOrder]);
-    const handleSectionDelete = useCallback(async (sectionName) => {
-        if (!data?.sectionOrder || !data?.sections)
-            return;
-        const sectionToDelete = data.sectionOrder.find((s) => s.section === sectionName);
-        const reportsToMove = data.sections[sectionName] || [];
-        if (!sectionToDelete)
-            return;
-        const updatedSectionOrder = data.sectionOrder.filter((section) => section.section !== sectionName);
-        const defaultSection = updatedSectionOrder.find((s) => s.section === '');
-        if (defaultSection) {
-            defaultSection.reportOrder = [
-                ...defaultSection.reportOrder,
-                ...reportsToMove.map((r) => r.id),
-            ];
-        }
-        await setSectionOrder(updatedSectionOrder);
-    }, [data?.sectionOrder, data?.sections, setSectionOrder, reload, name]);
-    const handleClickReport = useCallback((report) => {
-        if (allReportsById[report.id]?.rows !== undefined) {
-            onClickReport?.(allReportsById[report.id] ?? report);
-        }
-    }, [allReportsById, onClickReport]);
-    // const [client, isClientLoading] = useContext(ClientContext);
-    // const { tenants, flags } = useTenants();
-    // const [theme] = useContext<any>(ThemeContext);
-    // const [schemaData] = useContext(SchemaDataContext);
-    // const { dispatch: dashboardFiltersDispatch } = useContext(
-    //   DashboardFiltersContext,
-    // );
-    // const [fieldValuesMap, setFieldValuesMap] = useState<{
-    //   [key: string]: { [key: string]: string[] };
-    // }>({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
-    // const [fieldValuesIsLoaded, setFieldValuesIsLoaded] = useState(false);
-    // const [addFilterPopoverIsOpen, setAddFilterPopoverIsOpen] = useState(false);
-    // const [filterListIsOpen, setFilterListIsOpen] = useState(false);
-    // const [
-    //   filterListAddFilterPopoverIsOpen,
-    //   setFilterListAddFilterPopoverIsOpen,
-    // ] = useState(false);
-    const presetOptions = useMemo(() => {
-        return populatedDashboardFilters?.[0]?.filterType === 'date_range'
-            ? convertPresetOptionsToSelectableList(populatedDashboardFilters[0].presetOptions ?? [], populatedDashboardFilters[0].defaultPresetRanges ?? [])
-            : defaultOptionsV2;
-    }, [populatedDashboardFilters]);
-    // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
-    const [filterValues, setFilterValues] = useState({});
-    const prevNameRef = useRef(name);
-    // const prevTenantsRef = useRef<
-    //   | { tenantIds: (string | number)[]; tenantField: string }[]
-    //   | (string | number)[]
-    //   | undefined
-    // >(tenants);
-    // const prevFlagsRef = useRef<string[] | undefined>(flags);
-    // const prevClientRef = useRef<string>(client?.publicKey ?? '');
-    // const addFilterPopoverButtonRef = useRef<HTMLDivElement>(null);
-    // const viewFiltersPopoverButtonRef = useRef<HTMLDivElement>(null);
-    const previousFilters = useRef(filters);
-    if (!equal(previousFilters.current, filters)) {
-        previousFilters.current = filters;
-    }
-    // const pendingReloadRef = useRef(false);
-    const isInitialLoadOfDashboardRef = useRef(false);
-    const [initialLoad, setInitialLoad] = useState(true);
-    // const referencedTables = useMemo(() => {
-    //   const sections = data?.sections || {};
-    //   // find intersection of all referenced tables
-    //   const tables: string[] = Object.values(sections)
-    //     .flatMap((section: any) =>
-    //       section.map((chart: QuillReportInternal) => chart.referencedTables),
-    //     )
-    //     .flat();
-    //   return Array.from(new Set(tables));
-    // }, [data?.sections]);
-    useEffect(() => {
-        if (prevNameRef.current === name &&
-            Object.values(data?.sections ?? {}).flat().length) {
-            setInitialLoad(false);
-            return;
-        }
-        else {
-            setInitialLoad(true);
-        }
-        prevNameRef.current = name;
-        if (isClientLoading || parentLoading || tenants === undefined) {
-            // Reload the dashboard when the client is loaded
-            // pendingReloadRef.current = true;
-            return;
-        }
-        if (isInitialLoadOfDashboardRef.current)
-            return;
-        isInitialLoadOfDashboardRef.current = true;
-        reload(name, true).then(() => {
-            isInitialLoadOfDashboardRef.current = false;
-            setInitialLoad(false);
-            // prevTenantsRef.current = tenants;
-            // prevFlagsRef.current = flags;
-        });
-    }, [name, isClientLoading, parentLoading]);
-    // const tenantMounted = useRef(false);
-    // useEffect(() => {
-    //   if (!tenantMounted.current) {
-    //     tenantMounted.current = true;
-    //     return;
-    //   }
-    //   const tenantsChanged = !equal(prevTenantsRef.current, tenants);
-    //   // || equal(prevFlagsRef.current, flags);
-    //   if (isClientLoading || tenants === undefined || !tenantsChanged) {
-    //     // Reload the dashboard when the client is loaded
-    //     // pendingReloadRef.current = true;
-    //     return;
-    //   }
-    //   if (isInitialLoadOfDashboardRef.current) return;
-    //   isInitialLoadOfDashboardRef.current = true;
-    //   reload(name, tenantsChanged).then(() => {
-    //     prevTenantsRef.current = tenants;
-    //     // prevFlagsRef.current = flags;
-    //     isInitialLoadOfDashboardRef.current = false;
-    //   });
-    // }, [tenants]);
-    // TODO: this block does not appear necessary, uncomment if otherwise
-    // useEffect(() => {
-    //   if (prevClientRef.current === client?.publicKey) {
-    //     return;
-    //   }
-    //   prevClientRef.current = client?.publicKey ?? '';
-    //   if (isClientLoading || tenants === undefined) {
-    //     // Reload the dashboard when the client is loaded
-    //     // pendingReloadRef.current = true;
-    //     return;
-    //   }
-    //   if (isInitialLoadOfDashboardRef.current) return;
-    //   isInitialLoadOfDashboardRef.current = true;
-    //   reload(name, true).then(() => {
-    //     prevTenantsRef.current = tenants;
-    //     // prevFlagsRef.current = flags;
-    //     isInitialLoadOfDashboardRef.current = false;
-    //   });
-    // }, [client?.publicKey]);
-    useEffect(() => {
-        setFilterValues(Object.values(populatedDashboardFilters ?? {}).reduce((acc, f) => {
-            acc[f.label] =
-                f.filterType === 'string'
-                    ? f.stringFilterType === 'multiselect'
-                        ? { values: f.values, operator: 'IN' }
-                        : { selectedValue: f.selectedValue }
-                    : {
-                        startDate: f.startDate,
-                        endDate: f.endDate,
-                        preset: f.preset,
-                        comparisonRange: f.comparisonRange,
-                    };
-            return acc;
-        }, {}));
-    }, [populatedDashboardFilters]);
-    // FIXME: enable user filters in internal dashboard
-    // useEffect(() => {
-    //   const dashboardDateFilter = populatedDashboardFilters?.find(
-    //     (f) => f.filterType === 'date_range',
-    //   );
-    //   if (dashboardDateFilter) {
-    //     // Filter for custom date filter that applies to the report's dateField
-    //     const customDateFilter = previousFilters.current?.find(
-    //       (f) => f.filterType === FilterType.Date,
-    //       // FIXME: this is the correct way to do it but the demo has a hardcoded filter field
-    //       // && f.field === report?.dateField?.field && f.table === report?.dateField?.table,
-    //     );
-    //     if (!customDateFilter) {
-    //       return;
-    //     }
-    //     const newFilter = applyCustomFilterToDashDateFilter(
-    //       customDateFilter,
-    //       dashboardDateFilter,
-    //     );
-    //     setFilterValues((filterValues) => ({
-    //       ...filterValues,
-    //       [dashboardDateFilter.label]: {
-    //         startDate: newFilter.startDate,
-    //         endDate: newFilter.endDate,
-    //         preset: newFilter.preset,
-    //         comparisonRange: newFilter.comparisonRange,
-    //       },
-    //     }));
-    //     dashboardFiltersDispatch({
-    //       type: 'UPDATE_DASHBOARD_FILTER',
-    //       dashboardName: name,
-    //       filterName: dashboardDateFilter.label,
-    //       data: {
-    //         filter: newFilter,
-    //         loading: false,
-    //       },
-    //     });
-    //   }
-    // }, [previousFilters.current]);
-    // Go through all columns in the referenced tables and get the unique values to use in fieldValuesMap
-    // useEffect(() => {
-    //   const fetchData = async () => {
-    //     setFieldValuesIsLoaded(false);
-    //     const newFieldValues: { [key: string]: { [key: string]: string[] } } = {};
-    //     await Promise.all(
-    //       referencedTables.map(async (table: string) => {
-    //         const tableInfo = schema.find(
-    //           (tableInfo: Table) => tableInfo.name === table,
-    //         );
-    //         if (tableInfo) {
-    //           const uniqueValues = await getUniqueStringValuesByColumn({
-    //             columns: tableInfo.columns,
-    //             tableName: table,
-    //             client,
-    //             tenants,
-    //             dashboardName: name,
-    //           });
-    //           if (uniqueValues) {
-    //             newFieldValues[table] = {};
-    //             Object.keys(uniqueValues).forEach((field) => {
-    //               newFieldValues[table]![field] = uniqueValues[field] || [];
-    //             });
-    //           }
-    //         }
-    //       }),
-    //     );
-    //     setFieldValuesMap(newFieldValues);
-    //     setFieldValuesIsLoaded(true);
-    //   };
-    //   if (data?.customFiltersEnabled) {
-    //     fetchData();
-    //   }
-    // }, [referencedTables]);
-    const updateFilter = (filter, value, comparison) => {
-        if (!populatedDashboardFilters)
-            return;
-        eventTracking?.addBreadcrumb?.({
-            message: 'Updated filter in InternalDashboard',
-            data: {
-                filter: filter.label,
-                value: JSON.stringify(value),
-                dashboardName: name,
-            },
-            category: 'log',
-            level: 'info',
-            timestamp: Date.now(),
-        });
-        let filterValue = {};
-        if (filter.filterType === 'string') {
-            if (filter.stringFilterType === 'multiselect') {
-                if ((value?.length ?? 0) === 0) {
-                    filterValue = { values: undefined, operator: undefined };
-                }
-                else {
-                    filterValue = { values: value, operator: 'IN' };
-                }
-            }
-            else {
-                filterValue = { selectedValue: value };
-            }
-        }
-        else if (filter.filterType === DashboardFilterType.Date) {
-            if (comparison ||
-                (filter.comparison &&
-                    (filter.comparisonRange?.value ?? 'NO_COMPARISON') !==
-                        'NO_COMPARISON')) {
-                let preset = '';
-                if (comparison) {
-                    preset = filter.preset.value;
-                }
-                const key = comparison?.value ||
-                    (filter.comparisonRange?.value ?? 'NO_COMPARISON');
-                let primaryRange = {
-                    startDate: value ? value.startDate : filter.startDate,
-                    endDate: value ? value.endDate : filter.endDate,
-                };
-                if (value && value.preset) {
-                    preset = value.preset;
-                    primaryRange = getRangeFromPresetOptions(value.preset, presetOptions);
-                }
-                filterValue = {
-                    startDate: primaryRange.startDate,
-                    endDate: primaryRange.endDate,
-                    preset: {
-                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
-                        value: preset,
-                    },
-                    comparisonRange: {
-                        startDate: COMPARISON_RANGE[key](primaryRange)
-                            ?.startDate,
-                        endDate: COMPARISON_RANGE[key](primaryRange)
-                            ?.endDate,
-                        value: key,
-                    },
-                };
-            }
-            else {
-                const primaryRange = value && value.preset
-                    ? getRangeFromPresetOptions(value.preset, presetOptions)
-                    : {
-                        startDate: value?.startDate || filter.startDate,
-                        endDate: value?.endDate || filter.endDate,
-                    };
-                const preset = value?.preset ? value.preset : '';
-                filterValue = {
-                    startDate: primaryRange.startDate,
-                    endDate: primaryRange.endDate,
-                    preset: {
-                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
-                        value: preset,
-                    },
-                };
-            }
-        }
-        setFilterValues((filterValues) => ({
-            ...filterValues,
-            [filter.label]: filterValue,
-        }));
-        reload(name, false, undefined, {
-            filters: populatedDashboardFilters.map((f) => filter.label === f.label ? { ...f, ...filterValue } : f),
-            editedFilterLabel: filter.label,
-        });
-    };
-    // generate the correct filter structure
-    // const getUserFilter = (
-    //   filter: InternalFilter,
-    //   id: number,
-    //   existingFilter?: any,
-    // ): any => {
-    //   let userFilter = {};
-    //   if (existingFilter) {
-    //     userFilter = { ...existingFilter };
-    //   } else {
-    //     userFilter = { _id: `userFilter_${id}` };
-    //   }
-    //   userFilter = {
-    //     ...userFilter,
-    //     table: filter.table ?? '',
-    //     field: filter.field,
-    //     filterType: filter.filterType,
-    //     fieldType: filter.fieldType,
-    //     value: filter.value,
-    //     operator: filter.operator,
-    //     dashboardName: name,
-    //     isUserFilter: true,
-    //   };
-    //   return userFilter;
-    // };
-    // // new update filter function for user added filters
-    // const updateUserFilter = (filter: InternalFilter) => {
-    //   setUserFilters((userFilters) => ({
-    //     ...userFilters,
-    //     [filter.field]: filter,
-    //   }));
-    // };
-    useEffect(() => {
-        if (onChangeLoading && isLoading) {
-            onChangeLoading(isLoading);
-        }
-    }, [isLoading, onChangeLoading]);
-    const sortedSections = useMemo(() => {
-        const sectionMap = (data?.sectionOrder || []).reduce((acc, section) => {
-            acc[section.section] = section._id;
-            return acc;
-        }, {});
-        return Object.keys(data?.sections ?? {})
-            .sort((a, b) => {
-            if (a === '')
-                return -1;
-            if (b === '')
-                return 1;
-            const sectionOrder = data?.sectionOrder;
-            if (!sectionOrder)
-                return 0;
-            const aIndex = sectionOrder.map((s) => s.section).indexOf(a);
-            const bIndex = sectionOrder.map((s) => s.section).indexOf(b);
-            if (aIndex === -1 && bIndex === -1)
-                return 0;
-            if (aIndex === -1)
-                return 1;
-            if (bIndex === -1)
-                return -1;
-            return aIndex - bIndex;
-        })
-            .map((sectionName) => ({
-            name: sectionName,
-            id: sectionMap[sectionName] || sectionName, // Fall back to name if ID is not found
-        }));
-    }, [data?.sections, data?.sectionOrder]);
-    const sortedSectionNames = useMemo(() => sortedSections.map((section) => section.name), [sortedSections]);
-    const dragSensors = useSensors(useSensor(PointerSensor, {
-        activationConstraint: {
-            distance: 5,
-        },
-    }), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }), useSensor(TouchSensor, {
-        activationConstraint: {
-            delay: 100,
-            tolerance: 8,
-        },
-    }));
-    const [activeId, setActiveId] = useState(null);
-    const [overId, setOverId] = useState(null);
-    const [activeItem, setActiveItem] = useState(null);
-    const [isDraggingSection, setIsDraggingSection] = useState(false);
-    const handleDragStart = useCallback((event) => {
-        const { active } = event;
-        setActiveId(active.id);
-        const activeDraggingSection = !String(active.id).includes('::');
-        setIsDraggingSection(activeDraggingSection);
-        if (activeDraggingSection) {
-            const sectionName = String(active.id);
-            setActiveItem({
-                type: 'section',
-                name: sectionName === '' ? 'Default Section' : sectionName,
-                id: sectionName,
-            });
-        }
-        else {
-            const [section, itemId] = String(active.id).split('::');
-            if (section === undefined || !itemId)
-                return;
-            let report;
-            report = data?.sections?.[section]?.find((r) => r._id === itemId || r.id === itemId);
-            if (!report && section === '') {
-                if (metrics?.[section]) {
-                    report = metrics[section].find((r) => r._id === itemId || r.id === itemId);
-                }
-                if (!report && charts?.[section]) {
-                    report = charts[section].find((r) => r._id === itemId || r.id === itemId);
-                }
-                if (!report && tables?.[section]) {
-                    report = tables[section].find((r) => r._id === itemId || r.id === itemId);
-                }
-            }
-            if (report) {
-                const newActiveItem = {
-                    type: 'report',
-                    id: report.id,
-                    section: section,
-                    name: report.name || 'Untitled Report',
-                    chartType: report.chartType || 'chart',
-                };
-                setActiveItem(newActiveItem);
-            }
-            else {
-                console.warn('Could not find report data for:', section, itemId);
-            }
-        }
-    }, [data?.sections, metrics, charts, tables]);
-    const handleDragEnd = useCallback((event) => {
-        const { active, over } = event;
-        setActiveId(null);
-        setOverId(null);
-        setActiveItem(null);
-        setIsDraggingSection(false);
-        setPreviewSectionOrder({});
-        if (!active || !over)
-            return;
-        const activeId = active.id.toString();
-        const overId = over.id.toString();
-        if (!activeId.includes('::')) {
-            let targetSection = overId;
-            if (overId.startsWith('section-')) {
-                targetSection = overId.replace('section-', '');
-            }
-            else if (overId.includes('::')) {
-                const [sectionName] = overId.split('::');
-                targetSection = sectionName;
-            }
-            if (targetSection &&
-                sortedSectionNames.includes(activeId) &&
-                sortedSectionNames.includes(targetSection)) {
-                const oldIndex = sortedSectionNames.indexOf(activeId);
-                const newIndex = sortedSectionNames.indexOf(targetSection);
-                if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
-                    const newSectionOrder = arrayMove(sortedSectionNames, oldIndex, newIndex);
-                    eventTracking?.addBreadcrumb?.({
-                        message: `Reordered Dashboard Section`,
-                        category: 'interaction',
-                        level: 'info',
-                        timestamp: Date.now(),
-                        data: {
-                            movedSection: activeId,
-                            oldIndex,
-                            newIndex,
-                            targetSection,
-                        },
-                    });
-                    handleSectionReorder(newSectionOrder);
-                }
-            }
-            return;
-        }
-        const [sourceSection, reportId] = activeId.split('::');
-        let targetSection = '';
-        let targetReportId = '';
-        if (overId.startsWith('section-')) {
-            targetSection = overId.replace('section-', '');
-        }
-        else if (overId.includes('::')) {
-            [targetSection, targetReportId] = overId.split('::');
-        }
-        else {
-            targetSection = overId;
-        }
-        if (sourceSection === undefined ||
-            reportId === undefined ||
-            targetSection === undefined)
-            return;
-        const newItems = { ...data?.sections };
-        const report = newItems[sourceSection]?.find((item) => item._id === reportId || item.id === reportId);
-        if (!report || !newItems[sourceSection])
-            return;
-        if (sourceSection === '' && targetSection === '') {
-            const activeChartType = report.chartType || 'chart';
-            if (!targetReportId)
-                return;
-            const overItem = newItems[targetSection]?.find((item) => item._id === targetReportId || item.id === targetReportId);
-            if (!overItem)
-                return;
-            const overChartType = overItem.chartType || 'chart';
-            const isMetric = (type) => type === 'metric';
-            const isTable = (type) => type === 'table';
-            const isChart = (type) => !isMetric(type) && !isTable(type);
-            const isSameCategory = (isMetric(activeChartType) && isMetric(overChartType)) ||
-                (isTable(activeChartType) && isTable(overChartType)) ||
-                (isChart(activeChartType) && isChart(overChartType));
-            if (!isSameCategory) {
-                return;
-            }
-            const activeIndex = newItems[sourceSection].findIndex((item) => item._id === reportId || item.id === reportId);
-            const overIndex = newItems[sourceSection].findIndex((item) => item._id === targetReportId || item.id === targetReportId);
-            if (activeIndex !== -1 && overIndex !== -1) {
-                const sameTypeItems = newItems[sourceSection]
-                    .map((item, index) => ({ item, index }))
-                    .filter(({ item }) => {
-                    const itemType = item.chartType || 'chart';
-                    if (isMetric(activeChartType))
-                        return isMetric(itemType);
-                    if (isTable(activeChartType))
-                        return isTable(itemType);
-                    return isChart(itemType);
-                });
-                const typeActiveIndex = sameTypeItems.findIndex(({ item }) => item.id === reportId);
-                const typeOverIndex = sameTypeItems.findIndex(({ item }) => item.id === targetReportId);
-                if (typeActiveIndex !== -1 && typeOverIndex !== -1) {
-                    const reordered = arrayMove(sameTypeItems.map(({ item }) => item), typeActiveIndex, typeOverIndex);
-                    const result = [...newItems[sourceSection]];
-                    let reorderedIndex = 0;
-                    for (let i = 0; i < result.length; i++) {
-                        const itemType = result[i]?.chartType || 'chart';
-                        const isRightCategory = (isMetric(activeChartType) && isMetric(itemType)) ||
-                            (isTable(activeChartType) && isTable(itemType)) ||
-                            (isChart(activeChartType) && isChart(itemType));
-                        if (isRightCategory && reorderedIndex < reordered.length) {
-                            result[i] = reordered[reorderedIndex++];
-                        }
-                    }
-                    newItems[sourceSection] = result;
-                    eventTracking?.addBreadcrumb?.({
-                        message: `Reordered Dashboard Report In Default Section`,
-                        category: 'interaction',
-                        level: 'info',
-                        timestamp: Date.now(),
-                        data: {
-                            movedReport: reportId,
-                            oldIndex: typeActiveIndex,
-                            newIndex: typeOverIndex,
-                            targetSection,
-                        },
-                    });
-                    handleReorder(newItems);
-                }
-            }
-        }
-        else if (sourceSection === targetSection) {
-            const overItem = newItems[sourceSection]?.find((item) => item._id === targetReportId);
-            if (!overItem)
-                return;
-            const activeIndex = newItems[sourceSection].indexOf(report);
-            const overIndex = newItems[sourceSection].indexOf(overItem);
-            if (activeIndex !== -1 && overIndex !== -1) {
-                newItems[sourceSection] = arrayMove(newItems[sourceSection], activeIndex, overIndex);
-                eventTracking?.addBreadcrumb?.({
-                    message: `Reordered Dashboard Report In Same Section`,
-                    category: 'interaction',
-                    level: 'info',
-                    timestamp: Date.now(),
-                    data: {
-                        movedReport: reportId,
-                        oldIndex: activeIndex,
-                        newIndex: overIndex,
-                        targetSection,
-                    },
-                });
-                handleReorder(newItems);
-            }
-        }
-        else if (newItems[targetSection]) {
-            newItems[sourceSection] = newItems[sourceSection].filter((item) => item._id !== reportId && item.id !== reportId);
-            if (!newItems[targetSection]) {
-                newItems[targetSection] = [];
-            }
-            // Check if we're dropping on section header (starts with section-)
-            // or if the overId is exactly the section name (no specific report)
-            if (overId.startsWith('section-') ||
-                overId === targetSection ||
-                !targetReportId) {
-                // PREPEND to the section when dropped on section header IF the source section comes before the target section
-                // otherwise APPEND to the section
-                const targetIndex = sortedSectionNames.indexOf(targetSection);
-                const sourceIndex = sortedSectionNames.indexOf(sourceSection);
-                if (sourceIndex < targetIndex) {
-                    newItems[targetSection]?.unshift(report);
-                }
-                else {
-                    newItems[targetSection]?.push(report);
-                }
-            }
-            else {
-                // Regular drop on a specific report
-                const targetReport = newItems[targetSection]?.find((item) => item._id === targetReportId || item.id === targetReportId);
-                if (targetReport) {
-                    const targetSectionIndex = sortedSectionNames.indexOf(targetSection);
-                    const sourceSectionIndex = sortedSectionNames.indexOf(sourceSection);
-                    const targetIndex = newItems[targetSection]?.indexOf(targetReport);
-                    newItems[targetSection]?.splice((targetIndex ?? 0) +
-                        (sourceSectionIndex > targetSectionIndex ? 1 : 0), 0, report);
-                }
-                else {
-                    // No target found, append to end
-                    newItems[targetSection]?.push(report);
-                }
-            }
-            eventTracking?.addBreadcrumb?.({
-                message: `Reordered Dashboard Report In Different Section`,
-                category: 'interaction',
-                level: 'info',
-                timestamp: Date.now(),
-                data: {
-                    movedReport: reportId,
-                    newIndex: newItems[targetSection]?.indexOf(report),
-                    targetSection,
-                    sourceSection,
-                },
-            });
-            handleReorder(newItems);
-        }
-    }, [data?.sections, sortedSectionNames, handleReorder, handleSectionReorder]);
-    const handleDragOver = useCallback((event) => {
-        const { active, over } = event;
-        if (!active || !over) {
-            setOverId(null);
-            return;
-        }
-        const activeId = active.id.toString();
-        const overId = over.id.toString();
-        // Check if we're dragging a section
-        const isDraggingSection = !activeId.includes('::');
-        if (isDraggingSection) {
-            let targetId = overId;
-            if (activeId === overId ||
-                (overId.startsWith('section-') && `section-${activeId}` === overId) ||
-                activeId === overId.replace('section-', '')) {
-                setOverId(null);
-                return;
-            }
-            if (overId.startsWith('section-')) {
-                targetId = overId.replace('section-', '');
-                // Don't allow unassigned section to be a target
-                if (targetId === '') {
-                    setOverId(null);
-                    return;
-                }
-            }
-            else if (overId.includes('::')) {
-                // If hovering over a report, extract its section
-                const [targetSection] = overId.split('::');
-                // Skip invalid section targets
-                if (!targetSection ||
-                    targetSection === activeId ||
-                    targetSection === '') {
-                    setOverId(null);
-                    return;
-                }
-                targetId = targetSection;
-            }
-            else if (overId === '') {
-                setOverId(null);
-                return;
-            }
-            setOverId(targetId);
-            return;
-        }
-        const [sourceSection] = activeId.split('::');
-        // Case 1: Hovering over a section container
-        if (overId.startsWith('section-')) {
-            const targetSection = overId.replace('section-', '');
-            if (sourceSection !== targetSection) {
-                setOverId(`section::${targetSection}`);
-            }
-            else {
-                setOverId(null);
-            }
-            return;
-        }
-        // Case 2: Hovering over a report
-        if (overId.includes('::')) {
-            const [targetSection] = overId.split('::');
-            if (sourceSection !== targetSection && targetSection) {
-                setOverId(`section::${targetSection}`);
-            }
-            else if (sourceSection === targetSection &&
-                overId !== activeId &&
-                sourceSection) {
-                const activeItemId = activeId.split('::')[1];
-                const overItemId = overId.split('::')[1];
-                // Always use the latest state with the functional form of setPreviewSectionOrder
-                setPreviewSectionOrder((prevOrder) => {
-                    // Check if we already have a preview order for this section
-                    const existingOrder = prevOrder[sourceSection];
-                    if (!existingOrder) {
-                        // No preview order yet, create one from the original data
-                        const sectionItems = data?.sections?.[sourceSection]?.map((r) => r.id) ?? [];
-                        const oldIndex = sectionItems.indexOf(activeItemId);
-                        const newIndex = sectionItems.indexOf(overItemId);
-                        if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
-                            // Create new preview order but keep other sections
-                            return {
-                                ...prevOrder,
-                                [sourceSection]: arrayMove(sectionItems, oldIndex, newIndex),
-                            };
-                        }
-                    }
-                    else {
-                        // We already have a preview order, update it
-                        const oldIndex = existingOrder.indexOf(activeItemId);
-                        const newIndex = existingOrder.indexOf(overItemId);
-                        if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
-                            // Update existing preview order but keep other sections
-                            return {
-                                ...prevOrder,
-                                [sourceSection]: arrayMove([...existingOrder], oldIndex, newIndex),
-                            };
-                        }
-                    }
-                    // Return unchanged state if conditions aren't met
-                    return prevOrder;
-                });
-                setOverId(overId);
-            }
-            return;
-        }
-        setOverId(overId);
-    }, [data?.sections, setPreviewSectionOrder]);
-    const draggedIndex = useMemo(() => {
-        if (!activeId || !sortedSectionNames.includes(activeId))
-            return -1;
-        return sortedSectionNames.indexOf(activeId || '');
-    }, [activeId, sortedSectionNames]);
-    const collisionDetectionStrategy = useCallback((args) => {
-        if (!String(args.active.id).includes('::')) {
-            const collisions = pointerWithin(args).filter((collision) => {
-                return collision.id.toString().startsWith('section-');
-            });
-            if (collisions.length > 0)
-                return collisions;
-            // Fall back to closest corners
-            return closestCenter(args).filter((c) => c.id.toString().startsWith('section-'));
-        }
-        const [sourceSection] = String(args.active.id).split('::');
-        const sectionIntersections = args.droppableContainers
-            .filter((container) => {
-            const containerId = String(container.id);
-            return containerId.startsWith('section-');
-        })
-            .filter((container) => {
-            const sectionId = String(container.id).replace('section-', '');
-            return sectionId !== sourceSection;
-        })
-            .map((container) => {
-            const rect = container.rect.current;
-            const activeRect = args.active.rect.current;
-            if (!rect || !activeRect)
-                return null;
-            const isIntersecting = activeRect.left < rect.right &&
-                activeRect.right > rect.left &&
-                activeRect.top < rect.bottom &&
-                activeRect.bottom > rect.top;
-            if (isIntersecting) {
-                return {
-                    id: container.id,
-                    data: {
-                        droppableContainer: true,
-                        value: container.id,
-                    },
-                };
-            }
-            return null;
-        })
-            .filter(Boolean);
-        if (sectionIntersections.length > 0) {
-            return sectionIntersections;
-        }
-        const pointerIntersections = pointerWithin(args);
-        if (pointerIntersections.length > 0)
-            return pointerIntersections;
-        const rectIntersections = rectIntersection(args);
-        if (rectIntersections.length > 0)
-            return rectIntersections;
-        return closestCorners(args);
-    }, []);
-    const handleAddSection = useCallback((sectionName) => {
-        if (!data?.sectionOrder)
-            return;
-        const updatedSectionOrder = [
-            ...data.sectionOrder,
-            {
-                section: sectionName,
-                reportOrder: [],
-            },
-        ];
-        setSectionOrder(updatedSectionOrder);
-    }, [data?.sectionOrder, data?.sections, setSectionOrder]);
-    const existingSectionNames = useMemo(() => Object.keys(data?.sections || {}), [data?.sections]);
-    if (!isLoading &&
-        data?.sections &&
-        (Object.keys(data.sections).length === 0 ||
-            Object.values(data.sections).flat().length === 0)) {
-        return _jsx(EmptyDashboardComponent, {});
-    }
-    if (hidden ||
-        isLoading ||
-        isClientLoading ||
-        parentLoading ||
-        initialLoad ||
-        !data?.sections) {
-        // No sections means yet to fetch
-        return _jsx(DashboardLoadingComponent, { containerStyle: containerStyle });
-    }
-    // TODO: Never reached
-    if (!data?.sections) {
-        return (_jsx(QuillErrorMessageComponent, { containerStyle: { height: 100 }, errorMessage: "Error loading dashboard" }));
-    }
-    return (_jsxs("div", { style: containerStyle, children: [_jsx("style", { children: `
-        .section-header {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 10px;
-        }
-        .section-drag-handle {
-          transform: translateY(2px);
-        }
-        .section-name-input {
-          font-size: 22px;
-          font-weight: bold;
-          border: none;
-          background: transparent;
-          // border-bottom: 2px solid #3b82f6;
-          outline: none;
-          width: auto;
-          padding: 0;
-          margin: 0;
-          text-align: left;
-          box-sizing: content-box;
-        }
-        .section-name-display {
-          cursor: pointer;
-        }
-        .section-name-display:hover {
-          text-decoration: underline;
-          text-decoration-style: dotted;
-          text-decoration-color: #9CA0A7;
-        }
-        .section-delete-button {
-          cursor: pointer;
-          color: #9CA0A7;
-          transform: translateY(2px);
-        }
-        .section-delete-button:hover {
-          color: #EF4444;
-        }
-        .dragging-item {
-          opacity: 0.8;
-          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2) !important;
-          transform-origin: 0 0;
-          transition: box-shadow 200ms ease, opacity 200ms ease !important;
-        }
-        
-        .section-drop-target {
-          transition: all 150ms ease;
-        }
-        
-        .dragging-item {
-          opacity: 0.7 !important;
-          z-index: 9999 !important;
-          cursor: grabbing !important;
-          transform-origin: 0 0;
-          box-shadow: 0px 10px 20px rgba(0,0,0,0.2) !important;
-          transition: none !important;
-          pointer-events: none;
-        }
-        
-        .section-drop-target {
-          position: relative;
-          border-radius: 8px;
-          transition: all 0.2s ease;
-          min-height: 100px;
-        }
-        
-        .section-grid-container {
-          min-height: 100px;
-          width: 100%;
-          transition: background-color 0.2s ease;
-        }
-        
-        .section-container {
-          position: relative;
-          transition: all 150ms ease;
-        }
-        
-        .section-grid-container {
-          min-height: 120px;
-          width: 100%;
-          border-radius: 8px;
-          transition: all 0.15s ease-in-out;
-        }
-        
-        .dragging-section {
-          z-index: 9999 !important;
-          opacity: 0.8;
-          background-color: white;
-          box-shadow: 0px 10px 25px rgba(0,0,0,0.15) !important;
-          outline: 1px solid #e5e7eb;
-          transition: none !important;
-          transform-origin: 0 0;
-        }
-        
-        .section-container {
-          position: relative;
-          transition: all 150ms ease;
-          height: auto !important;
-          min-height: fit-content;
-        }
-        
-        .section-grid-container.empty {
-          border: 1px dashed #e5e7eb;
-          min-height: 120px;
-          padding: 16px !important;
-        }
-        
-        .sortable-section-wrapper {
-          height: auto !important;
-          min-height: fit-content !important;
-          position: relative;
-          margin-bottom: 20px;
-        }
-
-        .dashboard-container.dragging-section .section-container {
-          outline: none !important;
-          box-shadow: none !important;
-          background-color: transparent !important;
-        }
-
-        
-        .section-container {
-          position: relative;
-          transition: all 150ms ease;
-          height: auto !important;
-          min-height: fit-content;
-          padding: 0px;
-          margin: 0px;
-        }
-        
-        .dashboard-container:not(.dragging-section) .section-highlighted {
-          background-color: rgba(59, 130, 246, 0.05) !important;
-          border-radius: 8px !important;
-          outline: 2px solid #3b82f6 !important;
-          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
-          padding: 12px !important;
-          margin: -12px !important;
-        }
-        
-        .dashboard-container.dragging-section .section-container {
-          outline: none !important;
-          box-shadow: none !important;
-          background-color: transparent !important;
-          /* Reset padding/margin when dragging sections */
-          padding: 0px !important;
-          margin: 0px !important;
-        }
-
-        .section-drag-preview {
-          background: white;
-          border-radius: 8px;
-          box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
-          padding: 16px;
-          border: 1px solid #e5e7eb;
-          transform-origin: 0 0;
-          cursor: grabbing;
-          min-height: 300px;
-        }
-
-        .section-drag-preview .section-header {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          width: 100%;
-        }
-
-        .section-drag-preview h2 {
-          font-size: 22px;
-          font-weight: bold;
-          margin: 0;
-          padding: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        
-        .dashboard-container.dragging-section {
-          box-shadow: none !important;
-          outline: none !important;
-        }
-        
-        .dashboard-container.dragging-section > div {
-          box-shadow: none;
-        }
-        
-        .quill-report-edit {
-          box-shadow: 0px 2px 8px rgba(56, 65, 81, 0.08);
-        }
-        
-        .quill-report-edit.dragging-item {
-          box-shadow: 0px 10px 20px rgba(0,0,0,0.2) !important;
-        }
-
-        .section-grid-container.empty {
-          background-color: rgba(249, 250, 251, 0.5);
-          transition: all 0.2s ease;
-          position: relative;
-        }
-        
-        .section-grid-container.empty::after {
-          content: 'Drop reports here';
-          font-family: ${state.theme?.fontFamily};
-          color: #9CA3AF;
-          font-size: 16px;
-          opacity: 0.8;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          white-space: nowrap;
-        }
-
-        .new-section-button.editing {
-          opacity: 1;
-          border-color: #3b82f6;
-          background-color: white;
-          cursor: default;
-          min-height: 100px;
-          height: auto;
-        }
-
-        .new-section-button {
-          border: 2px dashed #e5e7eb;
-          border-radius: 8px;
-          margin-top: 20px;
-          padding: 16px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          height: 100px;
-          opacity: 0;
-          pointer-events: auto; /* Enable pointer events by default */
-        }
-        
-        /* Only show hover effect when NOT dragging */
-        .dashboard-container:not(.dragging-section):not(.dragging-report) .new-section-button:hover {
-          opacity: 1;
-          border-color: #3b82f6;
-        }
-
-        .new-section-button.editing {
-          opacity: 1;
-          border-color: #3b82f6;
-          background-color: white;
-          cursor: default;
-          min-height: 100px;
-          height: auto;
-        }
-
-        /* Disable button during drag operations */
-        .dashboard-container.dragging-section .new-section-button,
-        .dashboard-container.dragging-report .new-section-button {
-          pointer-events: none;
-        }
-
-        /* Disable pointer events on charts when dragging */
-        .dashboard-container.dragging-section .quill-report-edit .MemoizedChart,
-        .dashboard-container.dragging-report .quill-report-edit .MemoizedChart,
-        .dashboard-container.dragging-section .quill-report-edit [data-testid="chart-container"],
-        .dashboard-container.dragging-report .quill-report-edit [data-testid="chart-container"] {
-          pointer-events: none !important;
-        }
-        
-        /* Also disable pointer events on all chart inner elements */
-        .dashboard-container.dragging-section .quill-report-edit svg,
-        .dashboard-container.dragging-report .quill-report-edit svg,
-        .dashboard-container.dragging-section .quill-report-edit canvas,
-        .dashboard-container.dragging-report .quill-report-edit canvas,
-        .dashboard-container.dragging-section .quill-report-edit .recharts-wrapper,
-        .dashboard-container.dragging-report .quill-report-edit .recharts-wrapper,
-        .dashboard-container.dragging-section .quill-report-edit .recharts-surface,
-        .dashboard-container.dragging-report .quill-report-edit .recharts-surface {
-          pointer-events: none !important;
-        }
-
-        .dragging-item * {
-          pointer-events: none !important;
-        }
-
-        /* Add transition for spacing changes */
-        .sortable-section-wrapper {
-          height: auto !important;
-          min-height: fit-content !important;
-          position: relative;
-          margin-bottom: 20px;
-          transition: margin 0.2s ease;
-        }
-        
-        /* Section drop indicator */
-        .section-drop-indicator {
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: 4px;
-          background-color: #3b82f6;
-          border-radius: 2px;
-          opacity: 0;
-          transition: opacity 0.15s ease;
-          z-index: 999;
-        }
-        
-        .section-drop-indicator.top {
-          top: -12px;
-        }
-        
-        .section-drop-indicator.bottom {
-          bottom: -12px;
-        }
-        
-        .section-drop-indicator.active {
-          opacity: 1;
-        }
-
-        /* Add pointer events none to drop indicators so they don't interfere with dragging */
-        .section-drop-indicator {
-          pointer-events: none;
-        }
-
-        /* Adjust spacing for the dragged item preview */
-        .section-drag-preview {
-          background: white;
-          border-radius: 8px;
-          box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
-          padding: 16px;
-          min-width: 300px;
-          width: 70%;
-          border: 1px solid #e5e7eb;
-          transform-origin: 0 0;
-          cursor: grabbing;
-        }
-        
-        /* Add additional styling to new section button to maintain spacing */
-        .new-section-button {
-          transition: opacity 0.2s ease, border-color 0.2s ease, margin 0.2s ease;
-          margin-top: 20px;
-        }
-        
-        .dashboard-container.dragging-section .new-section-button {
-          margin-top: 50px;
-        }
-      ` }), _jsxs("div", { className: `dashboard-container ${isDraggingSection ? 'dragging-section' : ''} ${activeId && !isDraggingSection ? 'dragging-report' : ''}`, children: [_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            gap: 12,
-                            marginBottom: 6,
-                            marginTop: -12,
-                        }, children: [_jsx(SecondaryButtonPrimitive, { onClick: onManageDashboard, label: "Manage Dashboard" }), _jsx(SecondaryButtonPrimitive, { onClick: () => {
-                                    eventTracking?.addBreadcrumb?.({
-                                        message: 'Clicked add section button in InternalDashboard',
-                                        category: 'interaction',
-                                        level: 'info',
-                                        timestamp: Date.now(),
-                                    });
-                                    // Same as if the user clicked the Add section button at the bottom
-                                    setIsEditingNewSection(true);
-                                    // Scroll to the bottom of the page
-                                    window.scrollTo({
-                                        top: document.body.scrollHeight,
-                                        behavior: 'smooth',
-                                    });
-                                }, label: "Add Section +" })] }), _jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: _jsx("div", { style: {
-                                width: '100%',
-                                marginBottom: 25,
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'flex-end',
-                                flexWrap: 'wrap',
-                                gap: 12,
-                            }, children: (populatedDashboardFilters ?? []).map((filter) => (_jsx(DashboardFilter, { filter: {
-                                    ...filter,
-                                    ...(filter.filterType === 'date_range' && {
-                                        options: presetOptions,
-                                    }),
-                                    ...filterValues[filter.label],
-                                }, onChangeFilter: updateFilter, isLoading: isDashboardFilterLoading(filter.label) }, filter.label + name))) }) }), _jsxs(DndContext, { sensors: dragSensors, collisionDetection: collisionDetectionStrategy, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, measuring: {
-                            droppable: {
-                                strategy: MeasuringStrategy.Always,
-                            },
-                        }, autoScroll: {
-                            threshold: {
-                                x: 0.1,
-                                y: 0.2,
-                            },
-                            acceleration: 10,
-                            interval: 5,
-                        }, children: [_jsx(SortableContext, { items: sortedSectionNames, strategy: rectSortingStrategy, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [sortedSections
-                                            .filter((s) => s.name ||
-                                            metrics[s.name]?.length ||
-                                            charts[s.name]?.length ||
-                                            tables[s.name]?.length)
-                                            .map((section) => {
-                                            return (_jsx(SortableSection, { id: section.name, sectionId: section.id, sectionName: section.name, sectionIndex: sortedSectionNames.indexOf(section.name), metrics: metrics, charts: charts, tables: tables, data: data, previewSectionOrder: previewSectionOrder, handleReorder: handleReorder, onClickReport: handleClickReport, onSectionNameUpdate: handleSectionNameUpdate, onSectionDelete: handleSectionDelete, isActive: activeId?.startsWith(`${section.name}::`) || false, activeId: activeId, overId: overId, draggedIndex: draggedIndex === -1 ? undefined : draggedIndex, isHighlighted: overId === section.name, isDraggingAnySection: isDraggingSection }, section.id));
-                                        }), !isLoading && (_jsx(NewSectionButton, { onAddSection: handleAddSection, existingSections: existingSectionNames, isEditing: isEditingNewSection, setIsEditing: setIsEditingNewSection }))] }) }), _jsx(DragOverlay, { modifiers: activeItem?.type === 'section' ? undefined : [snapRightToCursor], children: activeItem &&
-                                    (activeItem.type === 'section' ? (_jsxs("div", { className: "section-drag-preview", style: { width: '100%', maxWidth: '100%', minWidth: 'unset' }, children: [_jsxs("div", { className: "section-header", style: { marginBottom: '12px' }, children: [_jsx("h2", { style: {
-                                                            margin: 0,
-                                                            padding: 0,
-                                                            fontSize: '22px',
-                                                            fontWeight: 'bold',
-                                                        }, children: activeItem.name }), _jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [activeItem.id !== '' && (_jsx("div", { style: {
-                                                                    color: '#9CA0A7',
-                                                                    marginLeft: -4,
-                                                                    transform: 'translateY(2px)',
-                                                                }, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L13 13M1 13L13 1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })), activeItem.id !== '' && (_jsx("div", { className: "section-drag-handle", children: _jsxs("div", { style: {
-                                                                        display: 'flex',
-                                                                        gap: 2,
-                                                                        flexDirection: 'row',
-                                                                    }, children: [_jsxs("div", { style: {
-                                                                                display: 'flex',
-                                                                                gap: 2,
-                                                                                flexDirection: 'column',
-                                                                            }, children: [_jsx("div", { style: {
-                                                                                        width: 3,
-                                                                                        height: 3,
-                                                                                        borderRadius: 3,
-                                                                                        background: '#9CA0A7',
-                                                                                    } }), _jsx("div", { style: {
-                                                                                        width: 3,
-                                                                                        height: 3,
-                                                                                        borderRadius: 3,
-                                                                                        background: '#9CA0A7',
-                                                                                    } }), _jsx("div", { style: {
-                                                                                        width: 3,
-                                                                                        height: 3,
-                                                                                        borderRadius: 3,
-                                                                                        background: '#9CA0A7',
-                                                                                    } })] }), _jsxs("div", { style: {
-                                                                                display: 'flex',
-                                                                                gap: 2,
-                                                                                flexDirection: 'column',
-                                                                            }, children: [_jsx("div", { style: {
-                                                                                        width: 3,
-                                                                                        height: 3,
-                                                                                        borderRadius: 3,
-                                                                                        background: '#9CA0A7',
-                                                                                    } }), _jsx("div", { style: {
-                                                                                        width: 3,
-                                                                                        height: 3,
-                                                                                        borderRadius: 3,
-                                                                                        background: '#9CA0A7',
-                                                                                    } }), _jsx("div", { style: {
-                                                                                        width: 3,
-                                                                                        height: 3,
-                                                                                        borderRadius: 3,
-                                                                                        background: '#9CA0A7',
-                                                                                    } })] })] }) }))] })] }), _jsx("div", { style: {
-                                                    backgroundColor: 'rgba(249, 250, 251, 0.5)',
-                                                    minHeight: '300px',
-                                                    borderRadius: '8px',
-                                                    border: '1px dashed #e5e7eb',
-                                                    width: '100%',
-                                                } })] })) : (_jsx("div", { style: {
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'top',
-                                            borderRadius: '10px',
-                                            border: '1px solid #E7E7E7',
-                                            background: state.theme.backgroundColor,
-                                            height: activeItem.chartType === 'metric'
-                                                ? '150px'
-                                                : activeItem.chartType === 'table'
-                                                    ? '500px'
-                                                    : '320px',
-                                            opacity: 0.85,
-                                            boxShadow: '0px 10px 25px rgba(0,0,0,0.2)',
-                                            transform: 'rotate(1deg)',
-                                            zIndex: 9999,
-                                            pointerEvents: 'none',
-                                            padding: '15px',
-                                            transition: 'none',
-                                        }, "data-chart-type": activeItem.chartType, children: _jsx("div", { style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: '8px',
-                                                width: '100%',
-                                                marginBottom: 'auto',
-                                            }, children: _jsx("h1", { style: {
-                                                    fontSize: 18,
-                                                    fontFamily: state.theme?.fontFamily,
-                                                    color: state.theme?.primaryTextColor,
-                                                    fontWeight: '500',
-                                                    margin: 0,
-                                                    textOverflow: 'ellipsis',
-                                                    overflow: 'hidden',
-                                                    whiteSpace: 'nowrap',
-                                                    maxWidth: '100%',
-                                                }, children: activeItem.name || 'Report' }) }) }))) })] })] })] }));
-};
-const DeleteButton = ({ onClick }) => {
-    return (_jsx("div", { className: "section-delete-button", onClick: onClick, title: "Delete section", style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 12,
-            height: 12,
-        }, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1L13 13M1 13L13 1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }));
-};
-const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, tables, data, previewSectionOrder, onClickReport, onSectionNameUpdate, onSectionDelete, activeId, overId, draggedIndex, isHighlighted, isDraggingAnySection, }) => {
-    const { attributes, listeners, setNodeRef: setSortableNodeRef, isDragging, } = useSortable({ id, animateLayoutChanges: () => false });
-    const { state: { theme }, } = useAdmin();
-    const [isEditing, setIsEditing] = useState(false);
-    const [editedName, setEditedName] = useState(sectionName);
-    const [inputWidth, setInputWidth] = useState('auto');
-    const inputRef = useRef(null);
-    const measurementRef = useRef(null);
-    const h1Ref = useRef(null);
-    const { setNodeRef: setDroppableNodeRef, isOver } = useDroppable({
-        id: `section-${sectionName}`,
-        data: {
-            section: sectionName,
-            type: 'section',
-        },
-        disabled: sectionName === '', // Disable dropping on unassigned section
-    });
-    const setNodeRef = useCallback((node) => {
-        setSortableNodeRef(node);
-        setDroppableNodeRef(node);
-    }, [setSortableNodeRef, setDroppableNodeRef]);
-    const calculateTextWidth = (text) => {
-        if (!measurementRef.current)
-            return 0;
-        measurementRef.current.textContent = text;
-        const width = measurementRef.current.getBoundingClientRect().width;
-        return width;
-    };
-    useEffect(() => {
-        if (isEditing && inputRef.current) {
-            inputRef.current.focus();
-            inputRef.current.selectionStart = inputRef.current.value.length;
-            const width = calculateTextWidth(editedName);
-            setInputWidth(`${width}px`);
-        }
-    }, [isEditing]);
-    const handleTextChange = (e) => {
-        const newText = e.target.value;
-        setEditedName(newText);
-        const width = calculateTextWidth(newText);
-        setInputWidth(`${width}px`);
-    };
-    const handleStartEditing = () => {
-        // Don't allow editing for empty section name (default section)
-        if (sectionName === '')
-            return;
-        if (h1Ref.current) {
-            setIsEditing(true);
-        }
-        else {
-            setIsEditing(true);
-        }
-    };
-    const handleSave = () => {
-        if (isEditing && editedName.trim() !== '' && editedName !== sectionName) {
-            // Make sure name doesn't already exist
-            const sectionNames = Object.keys(data?.sections ?? {});
-            if (sectionNames.includes(editedName)) {
-                alert('Section name already exists');
-                setEditedName(sectionName);
-            }
-            else {
-                onSectionNameUpdate(sectionName, editedName);
-            }
-        }
-        setIsEditing(false);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            handleSave();
-        }
-        else if (e.key === 'Escape') {
-            setEditedName(sectionName);
-            setIsEditing(false);
-        }
-    };
-    // Handle clicking outside to save
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (isEditing &&
-                inputRef.current &&
-                !inputRef.current.contains(event.target)) {
-                handleSave();
-            }
-        };
-        if (isEditing) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isEditing, handleSave]);
-    const handleDeleteSection = () => {
-        if (sectionName === '')
-            return;
-        if (window.confirm(`Are you sure you want to delete "${sectionName}"? All reports will be moved to the unassigned section.`)) {
-            onSectionDelete(sectionName);
-        }
-    };
-    const isDraggedOver = (overId?.split('::')[1] === sectionName ||
-        overId === sectionName ||
-        (overId?.startsWith('::') && sectionName == '')) &&
-        activeId?.split('::')[0] !== sectionName;
-    const isDraggingThisSection = activeId === sectionName;
-    const shouldHighlight = (isDraggedOver || isOver) &&
-        !isDraggingThisSection &&
-        !activeId?.startsWith(sectionName + '::');
-    const style = {
-        zIndex: isDragging ? 100 : undefined,
-        position: 'relative',
-        boxShadow: shouldHighlight
-            ? '0 0 0 2px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.2)'
-            : undefined,
-        backgroundColor: shouldHighlight ? 'rgba(59, 130, 246, 0.05)' : undefined,
-        borderRadius: shouldHighlight ? '8px' : undefined,
-        padding: shouldHighlight ? '12px' : '0px',
-        margin: shouldHighlight ? '-12px' : '0px',
-    };
-    const sectionClassName = `section-container ${shouldHighlight ? 'section-highlighted' : ''}`;
-    const dataAttributes = {
-        'data-is-over': shouldHighlight ? 'true' : 'false',
-        'data-section': sectionName,
-        'data-unassigned': sectionName === '' ? 'true' : 'false',
-    };
-    const hasMultipleSections = useMemo(() => {
-        return Object.keys(data?.sections || {}).length > 1;
-    }, [data?.sections]);
-    const isDefaultSection = sectionName === '';
-    const reports = useMemo(() => {
-        return previewSectionOrder[sectionName]
-            ? // sort the reports based on the preview order
-                data?.sections?.[sectionName]?.sort((a, b) => {
-                    const aIndex = previewSectionOrder[sectionName]?.indexOf(a.id) ?? 0;
-                    const bIndex = previewSectionOrder[sectionName]?.indexOf(b.id) ?? 0;
-                    return aIndex - bIndex;
-                })
-            : data?.sections?.[sectionName] || [];
-    }, [data?.sections[sectionName], previewSectionOrder[sectionName]]);
-    const isEmpty = reports.length === 0;
-    const containerClass = `section-grid-container ${isEmpty ? 'empty' : ''} ${isHighlighted ? 'active-drop-target' : ''}`;
-    const showTopDropIndicator = isDraggingAnySection &&
-        draggedIndex !== undefined &&
-        draggedIndex > sectionIndex &&
-        isHighlighted;
-    const showBottomDropIndicator = isDraggingAnySection &&
-        draggedIndex !== undefined &&
-        draggedIndex < sectionIndex &&
-        isHighlighted;
-    return (_jsxs("div", { className: "sortable-section-wrapper", style: {
-            position: 'relative',
-            marginBottom: 20,
-            marginTop: 0,
-            transition: 'margin 0.2s ease',
-        }, children: [_jsx("div", { className: `section-drop-indicator top ${showTopDropIndicator ? 'active' : ''}`, style: {
-                    position: 'absolute',
-                    top: -30,
-                    left: 0,
-                    right: 0,
-                    height: 4,
-                    backgroundColor: '#3b82f6',
-                    borderRadius: 2,
-                    opacity: showTopDropIndicator ? 1 : 0,
-                    transition: 'opacity 0.15s ease',
-                    zIndex: 999,
-                } }), _jsxs("div", { ref: setNodeRef, style: style, className: sectionClassName, ...dataAttributes, children: [_jsx("span", { ref: measurementRef, style: {
-                            position: 'absolute',
-                            visibility: 'hidden',
-                            whiteSpace: 'pre',
-                            fontSize: '22px',
-                            fontWeight: 'bold',
-                            fontFamily: 'inherit',
-                        } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [_jsxs("div", { className: "section-header", style: { marginTop: sectionIndex > 0 ? 20 : 0 }, children: [sectionName ? (isEditing ? (_jsx("input", { ref: inputRef, className: "section-name-input", value: editedName, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleSave, style: {
-                                            fontSize: 22,
-                                            fontWeight: 'bold',
-                                            color: theme.primaryTextColor,
-                                            fontFamily: theme.fontFamily,
-                                            width: inputWidth,
-                                            minWidth: '20px',
-                                            textAlign: 'left',
-                                            display: 'block',
-                                            lineHeight: 'normal',
-                                            margin: 0,
-                                            padding: 0,
-                                        } })) : (_jsx("h1", { className: isDefaultSection ? '' : 'section-name-display', onClick: isDefaultSection ? undefined : handleStartEditing, ref: h1Ref, style: {
-                                            color: theme?.primaryTextColor,
-                                            fontFamily: theme?.fontFamily,
-                                            fontSize: 22,
-                                            fontWeight: 'bold',
-                                            textAlign: 'left',
-                                            margin: 0,
-                                            padding: 0,
-                                            lineHeight: 'normal',
-                                            display: 'block',
-                                            cursor: isDefaultSection ? 'default' : 'pointer',
-                                        }, children: isDefaultSection && hasMultipleSections
-                                            ? 'Unassigned Items'
-                                            : sectionName }))) : (
-                                    // For the default empty section, show a non-editable header
-                                    // (isDefaultSection && hasMultipleSections) && <h1
-                                    //   style={{
-                                    //     fontSize: 22,
-                                    //     fontWeight: 'bold',
-                                    //     textAlign: 'left',
-                                    //     margin: 0,
-                                    //     padding: 0,
-                                    //     lineHeight: 'normal',
-                                    //     display: 'block'
-                                    //   }}
-                                    // >
-                                    //   Unassigned Items
-                                    // </h1>
-                                    _jsx(_Fragment, {})), _jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [!isDefaultSection && (_jsx(DeleteButton, { onClick: handleDeleteSection })), !isDefaultSection && (_jsx("div", { className: `section-drag-handle`, children: _jsx(HandleButton, { ...listeners, ...attributes }) }))] })] }), _jsx("div", { className: containerClass, style: {
-                                    boxSizing: 'border-box',
-                                    width: '100%',
-                                    minHeight: isEmpty ? '120px' : 'auto',
-                                    padding: isEmpty ? '10px' : '0px',
-                                    display: isEmpty && sectionName === '' ? 'none' : 'block',
-                                }, children: isDefaultSection && !isEmpty ? (_jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 20,
-                                        width: '100%',
-                                    }, children: [(metrics?.[sectionName]?.length ?? 0) > 0 && (_jsx("div", { style: {
-                                                display: 'grid',
-                                                gap: 20,
-                                                gridTemplateColumns: `repeat(auto-fill, minmax(400px, 1fr))`,
-                                                width: '100%',
-                                            }, "data-type": "metric", className: "unassigned-category-grid", children: _jsx(SortableContext, { items: metrics?.[sectionName]?.map((item) => `${sectionName}::${item._id || item.id}`) || [], strategy: rectSortingStrategy, children: metrics?.[sectionName]?.map((item) => (_jsx(SortableItem, { id: item.id, section: sectionName, chartType: item.chartType || 'metric', value: item.name || item._id || item.id, onClickReport: onClickReport }, item.id))) }) })), (charts?.[sectionName]?.length ?? 0) > 0 && (_jsx("div", { style: {
-                                                display: 'grid',
-                                                gap: 20,
-                                                gridTemplateColumns: `repeat(auto-fill, minmax(400px, 1fr))`,
-                                                width: '100%',
-                                            }, "data-type": "chart", className: "unassigned-category-grid", children: _jsx(SortableContext, { items: charts?.[sectionName]?.map((item) => `${sectionName}::${item._id || item.id}`) || [], strategy: rectSortingStrategy, children: charts?.[sectionName]?.map((item) => (_jsx(SortableItem, { id: item.id, section: sectionName, chartType: item.chartType || 'chart', value: item.name || item._id || item.id, onClickReport: onClickReport }, item.id))) }) })), (tables?.[sectionName]?.length ?? 0) > 0 && (_jsx("div", { style: {
-                                                display: 'grid',
-                                                gap: 20,
-                                                gridTemplateColumns: `repeat(auto-fill, minmax(400px, 1fr))`,
-                                                width: '100%',
-                                            }, "data-type": "table", className: "unassigned-category-grid", children: _jsx(SortableContext, { items: tables?.[sectionName]?.map((item) => `${sectionName}::${item._id || item.id}`) || [], strategy: rectSortingStrategy, children: tables?.[sectionName]?.map((item) => (_jsx(SortableItem, { id: item.id, section: sectionName, chartType: "table", value: item.name || item._id || item.id, onClickReport: onClickReport }, item.id))) }) }))] })) : (_jsx("div", { style: {
-                                        display: 'grid',
-                                        gap: 20,
-                                        gridTemplateColumns: `repeat(auto-fill, minmax(400px, 1fr))`,
-                                        width: '100%',
-                                        minHeight: isEmpty ? '80px' : 'auto',
-                                    }, children: _jsx(SortableContext, { items: reports.map((item) => `${sectionName}::${item._id || item.id}`) || [], strategy: () => null, children: reports.map((item) => (_jsx(SortableItem, { id: item.id, section: sectionName, chartType: item?.chartType ?? 'chart', value: item?.name ?? item.id, onClickReport: onClickReport }, item.id))) }) })) })] })] }), _jsx("div", { className: `section-drop-indicator bottom ${showBottomDropIndicator ? 'active' : ''}`, style: {
-                    position: 'absolute',
-                    bottom: -30,
-                    left: 0,
-                    right: 0,
-                    height: 4,
-                    backgroundColor: '#3b82f6',
-                    borderRadius: 2,
-                    opacity: showBottomDropIndicator ? 1 : 0,
-                    transition: 'opacity 0.15s ease',
-                    zIndex: 999,
-                } })] }));
-};
-const SortableItem = ({ id, section, chartType, value, onClickReport, }) => {
-    const { state: { theme }, } = useAdmin();
-    const compoundId = `${section}::${id}`;
-    const { attributes, listeners, setNodeRef, transform, isDragging } = useSortable({
-        id: compoundId,
-        data: {
-            chartType,
-            section,
-            id,
-        },
-        animateLayoutChanges: () => false,
-    });
-    const className = `quill-report-edit ${isDragging ? 'dragging-item' : ''}`;
-    const style = {
-        transform: CSS.Translate.toString(transform),
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderRadius: '10px',
-        border: '1px solid #E7E7E7',
-        cursor: isDragging ? 'grabbing' : 'grab',
-        userSelect: 'none',
-        background: 'white',
-        gridColumn: chartType === 'table' ? '1 / -1' : 'auto',
-        height: 'fit-content',
-        zIndex: isDragging ? 999 : undefined,
-        boxShadow: isDragging
-            ? '0px 10px 20px rgba(0,0,0,0.2)'
-            : '0px 2px 8px rgba(56, 65, 81, 0.08)',
-        opacity: isDragging ? 0.8 : 1,
-        position: 'relative',
-    };
-    const handleReportClick = useCallback(() => {
-        onClickReport?.({ id });
-    }, [id, onClickReport]);
-    return (_jsx("div", { ref: setNodeRef, style: {
-            padding: '10px',
-            margin: '-10px',
-            gridColumn: chartType === 'table' ? '1 / -1' : 'auto',
-        }, ...attributes, children: _jsx("div", { className: className, style: style, children: _jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    width: '100%',
-                    padding: 20,
-                    cursor: 'pointer',
-                }, onClick: handleReportClick, children: [_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            width: '100%',
-                        }, children: [_jsx("h1", { style: {
-                                    fontSize: 18,
-                                    fontWeight: '500',
-                                    flexGrow: 1,
-                                    color: theme?.primaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                }, children: value }), _jsx("div", { className: "quill-report-edit-buttons", style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                }, children: _jsx(HandleButton, { ...listeners }) })] }), isDragging ? (_jsx("div", { style: {
-                            padding: 10,
-                            height: chartType === 'metric'
-                                ? 80
-                                : chartType === 'table'
-                                    ? 420
-                                    : 250,
-                            background: '#f9fafb',
-                            borderRadius: '6px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        } })) : (_jsx(MemoizedChart, { reportId: id, chartType: chartType }))] }) }) }));
-};
-function HandleButton(props) {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            gap: 2,
-            flexDirection: 'row',
-            paddingTop: 8,
-            paddingBottom: 8,
-            paddingLeft: 8,
-            paddingRight: 8,
-            borderRadius: 4,
-            cursor: 'grab',
-        }, className: "handle", ...props, children: [_jsx("style", { children: `.handle:hover{background:rgba(0,0,0,0.03);}` }), _jsxs("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [_jsx("div", { style: {
-                            width: 3,
-                            height: 3,
-                            borderRadius: 3,
-                            background: '#9CA0A7',
-                        } }), _jsx("div", { style: {
-                            width: 3,
-                            height: 3,
-                            borderRadius: 3,
-                            background: '#9CA0A7',
-                        } }), _jsx("div", { style: {
-                            width: 3,
-                            height: 3,
-                            borderRadius: 3,
-                            background: '#9CA0A7',
-                        } })] }), _jsxs("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [_jsx("div", { style: {
-                            width: 3,
-                            height: 3,
-                            borderRadius: 3,
-                            background: '#9CA0A7',
-                        } }), _jsx("div", { style: {
-                            width: 3,
-                            height: 3,
-                            borderRadius: 3,
-                            background: '#9CA0A7',
-                        } }), _jsx("div", { style: {
-                            width: 3,
-                            height: 3,
-                            borderRadius: 3,
-                            background: '#9CA0A7',
-                        } })] })] }));
-}
-const NewSectionButton = ({ onAddSection, existingSections, isEditing, setIsEditing, }) => {
-    const { state: { theme }, } = useAdmin();
-    const [sectionName, setSectionName] = useState('');
-    const [error, setError] = useState('');
-    const inputRef = useRef(null);
-    useEffect(() => {
-        if (isEditing && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
-    const handleClick = () => {
-        setIsEditing(true);
-    };
-    const handleSave = () => {
-        if (sectionName.trim() !== '') {
-            if (existingSections.includes(sectionName.trim())) {
-                setError('Section name already exists');
-                inputRef.current?.focus();
-                return;
-            }
-            onAddSection(sectionName.trim());
-            setSectionName('');
-            setError('');
-            setIsEditing(false);
-        }
-        else {
-            setIsEditing(false);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            if (sectionName.trim() === '') {
-                setError('Section name cannot be empty');
-                return;
-            }
-            if (existingSections.includes(sectionName.trim())) {
-                setError('Section name already exists');
-                return;
-            }
-            onAddSection(sectionName.trim());
-            setSectionName('');
-            setError('');
-            setIsEditing(false);
-        }
-        else if (e.key === 'Escape') {
-            setSectionName('');
-            setError('');
-            setIsEditing(false);
-        }
-    };
-    if (!isEditing) {
-        return (_jsxs("div", { className: "new-section-button", onClick: handleClick, style: {
-                border: '2px dashed #e5e7eb',
-                borderRadius: '8px',
-                marginTop: '20px',
-                padding: '16px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: 'pointer',
-                height: '100px',
-                transition: 'border-color 0.2s ease, background-color 0.2s ease',
-            }, children: [_jsx("div", { style: { fontSize: '24px', fontWeight: 'bold', color: '#9CA0A7' }, children: "+" }), _jsx("div", { style: {
-                        marginTop: '8px',
-                        fontSize: '16px',
-                        fontWeight: 300,
-                        fontFamily: theme?.fontFamily,
-                        color: '#9CA0A7',
-                    }, children: "New section" })] }));
-    }
-    return (_jsx("div", { className: "section-container", style: { marginTop: 20 }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [_jsx("div", { className: "section-header", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("input", { ref: inputRef, className: "section-name-input", value: sectionName, onChange: (e) => {
-                                    setSectionName(e.target.value);
-                                    if (e.target.value.trim() !== '' && error) {
-                                        setError('');
-                                    }
-                                }, onBlur: handleSave, onKeyDown: handleKeyDown, placeholder: "New section name...", style: {
-                                    fontSize: 22,
-                                    fontWeight: 'bold',
-                                    border: 'none',
-                                    background: 'transparent',
-                                    outline: 'none',
-                                    width: '100%',
-                                    minWidth: '200px',
-                                    textAlign: 'left',
-                                    padding: 0,
-                                    margin: 0,
-                                    lineHeight: 'normal',
-                                } }), error && (_jsx("div", { style: { color: '#EF4444', fontSize: '14px', marginTop: '4px' }, children: error }))] }) }), _jsx("div", { className: "section-grid-container empty", style: {
-                        boxSizing: 'border-box',
-                        width: '100%',
-                        minHeight: '120px',
-                        border: '1px dashed #e5e7eb',
-                        borderRadius: '8px',
-                        backgroundColor: 'rgba(249, 250, 251, 0.5)',
-                        position: 'relative',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    } })] }) }));
-};