@quillsql/admin 1.6.1 → 1.6.3

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

@@ -0,0 +1,1940 @@
+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, useDashboard, useAllReports, } from '@quillsql/react';
+import equal from 'fast-deep-equal';
+import { useAdmin } from '../../AdminProvider';
+import { convertCustomFilter, 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 } = 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, } = useDashboard(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(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 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) {
+            return;
+        }
+        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, undefined, populatedDashboardFilters?.length
+            ? { filters: populatedDashboardFilters, refetchReports: true }
+            : undefined).then(() => {
+            isInitialLoadOfDashboardRef.current = false;
+            prevTenantsRef.current = tenants;
+            // prevFlagsRef.current = flags;
+        });
+    }, [name, isClientLoading, parentLoading, tenants]);
+    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;
+        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);
+                    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;
+                    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);
+                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);
+                }
+            }
+            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 &&
+        (Object.keys(data?.sections ?? {}).length === 0 ||
+            Object.values(data?.sections ?? {}).flat().length === 0)) {
+        return _jsx(EmptyDashboardComponent, {});
+    }
+    if (hidden || isLoading || isClientLoading || parentLoading) {
+        return _jsx(DashboardLoadingComponent, { containerStyle: containerStyle });
+    }
+    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';
+          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: () => {
+                                    // 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: 'white',
+                                            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,
+                                                    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 [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',
+                                            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: {
+                                            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 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,
+                                }, 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 [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,
+                        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',
+                    } })] }) }));
+};