@peak-ai/canvas 1.3.16 → 1.3.17

package/src/shadcn/components/ui/date-filter.tsx

@@ -1,816 +0,0 @@
-/* eslint-disable func-style */
-/* eslint-disable camelcase */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef, useState } from 'react';
-import { Calendar, Loader2Icon, X } from 'lucide-react';
-import ReactDatePicker from 'react-datepicker';
-import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
-import classnames from 'classnames';
-
-import { getAffectedComponentsWithLoader } from '../../../helpers';
-import { Button } from './button';
-import sherlock from 'sherlockjs';
-
-export type DatePickerProps = {
-  className?: string;
-  dateFormat?: string;
-  disabled?: boolean;
-  enableTime?: boolean;
-  isInputEditable?: boolean;
-  isClearable?: boolean;
-  label?: string;
-  maxDate?: Date | undefined;
-  minDate?: Date | undefined;
-  onChange(date: Date | null): void;
-  value: Date | null;
-  open?: boolean;
-  onClickOutside?: () => void;
-  showTimeSelect?: boolean;
-  timeFormat?: string;
-  timeIntervals?: number;
-  inline?: boolean;
-};
-
-type DateFilterProps = {
-  gjsModel: any;
-  performInteraction: (payload: Record<string, any>) => Promise<void>;
-};
-
-const TIMEZONE = 'TIMEZONE';
-
-function getTimezone() {
-  return window.localStorage.getItem(TIMEZONE) || 'UTC';
-}
-
-const formatDateWithTimezone = (date: Date | null, timezone: string, showTime = false): string => {
-  if (!date) {
-    return '';
-  }
-
-  const formatOptions: Intl.DateTimeFormatOptions = {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    ...(showTime && {
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false,
-    }),
-    timeZone: timezone,
-  };
-
-  return date.toLocaleString('en-GB', formatOptions);
-};
-
-const convertToTargetTimezone = (date: Date | null): Date | null => {
-  if (!date) {return null;}
-  
-  const targetTimezone = getTimezone();
-
-  return zonedTimeToUtc(date, targetTimezone);
-};
-
-const convertFromStoredDate = (date: Date | null): Date | null => {
-  if (!date) {return null;}
-  
-  const targetTimezone = getTimezone();
-  
-  return utcToZonedTime(date, targetTimezone);
-};
-
-const inputClasses =
-  'w-full px-3 py-2 border border-gray-300 rounded-md mb-1 focus:outline-none focus:ring-2 focus:ring-blue-500';
-const disabledClasses = 'opacity-60 cursor-not-allowed bg-gray-50';
-const enabledClasses = 'cursor-pointer';
-
-const buttonClasses =
-  'flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors';
-const closeButtonClasses =
-  'p-1 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500';
-
-const dropdownClasses =
-  'absolute top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-4 w-[380px] z-[9999]';
-
-const parseRelativeDate = (dateString: string | Date | null): Date | null => {
-  if (!dateString) {
-    return null;
-  }
-
-  if (dateString instanceof Date) {
-    return dateString;
-  }
-
-  const result = sherlock.parse(dateString as string);
-
-  if (result.startDate) {
-    return result.startDate;
-  }
-
-  return null;
-};
-
-const getDefaultDates = () => {
-  const now = new Date();
-  const oneYearAgo = new Date(now);
-  oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
-  const oneYearFromNow = new Date(now);
-  oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
-
-  return {
-    defaultStartDate: new Date(
-      oneYearAgo.getFullYear(),
-      oneYearAgo.getMonth(),
-      oneYearAgo.getDate(),
-      0,
-      0,
-      0,
-    ),
-    defaultEndDate: new Date(
-      oneYearFromNow.getFullYear(),
-      oneYearFromNow.getMonth(),
-      oneYearFromNow.getDate(),
-      23,
-      59,
-      59,
-    ),
-  };
-};
-
-const DateInput = ({
-  label,
-  value,
-  onClick,
-  disabled,
-  placeholder,
-  isOpen,
-  showTime = false,
-  onChange,
-  minDate,
-  maxDate,
-}: {
-  label: string;
-  value: Date | null;
-  onClick: () => void;
-  disabled?: boolean;
-  placeholder?: string;
-  isOpen?: boolean;
-  showTime?: boolean;
-  onChange?: (date: Date | null) => void;
-  minDate?: Date | null;
-  maxDate?: Date | null;
-}) => {
-  const [inputValue, setInputValue] = useState('');
-  const [isEditing, setIsEditing] = useState(false);
-  const [validationError, setValidationError] = useState<string>('');
-
-  const formatDate = (date: Date | null) => {
-    const timezone = getTimezone();
-
-    return formatDateWithTimezone(date, timezone, showTime);
-  };
-
-  useEffect(() => {
-    if (!isEditing) {
-      setInputValue(formatDate(value));
-    }
-  }, [value, showTime, isEditing]);
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (!disabled) {
-      onClick();
-    }
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  const handleInputFocus = () => {
-    setIsEditing(true);
-    setValidationError('');
-  };
-
-  const parseInputDate = (inputText: string): Date | null => {
-    if (!inputText.trim()) {
-      return null;
-    }
-
-    const commonFormats = [
-      // DD/MM/YYYY formats
-      /^(\d{1,2})\/(\d{1,2})\/(\d{4})(?:\s*,?\s*(\d{1,2}):(\d{2}))?$/,
-      // DD-MM-YYYY formats
-      /^(\d{1,2})-(\d{1,2})-(\d{4})(?:\s*,?\s*(\d{1,2}):(\d{2}))?$/,
-      // YYYY-MM-DD formats
-      /^(\d{4})-(\d{1,2})-(\d{1,2})(?:\s*,?\s*(\d{1,2}):(\d{2}))?$/,
-      // YYYY/MM/DD formats
-      /^(\d{4})\/(\d{1,2})\/(\d{1,2})(?:\s*,?\s*(\d{1,2}):(\d{2}))?$/,
-    ];
-
-    for (const format of commonFormats) {
-      const match = inputText.match(format);
-
-      if (match) {
-                 let day: string; let month: string; let year: string; let hours = '0'; let minutes = '0';
-         
-         if (format.source.startsWith('^(\\d{4})')) {
-           [, year, month, day, hours = '0', minutes = '0'] = match;
-         } else {
-           [, day, month, year, hours = '0', minutes = '0'] = match;
-         }
-
-         const yearNum = parseInt(year, 10);
-         const monthNum = parseInt(month, 10);
-         const dayNum = parseInt(day, 10);
-         const hoursNum = parseInt(hours, 10);
-         const minutesNum = parseInt(minutes, 10);
-
-         const parsedDate = new Date(
-           yearNum,
-           monthNum - 1,
-           dayNum,
-           hoursNum,
-           minutesNum
-         );
-
-         if (
-           !isNaN(parsedDate.getTime()) &&
-           parsedDate.getFullYear() === yearNum &&
-           parsedDate.getMonth() === monthNum - 1 &&
-           parsedDate.getDate() === dayNum
-         ) {
-           return parsedDate;
-         }
-      }
-    }
-
-    try {
-      const result = sherlock.parse(inputText);
-
-      if (result.startDate) {
-        return result.startDate;
-      }
-    } catch (error) {
-
-      return null;
-    }
-
-    return null;
-  };
-
-  const validateDateRange = (date: Date | null): string => {
-    if (!date) {
-      return '';
-    }
-
-    if (minDate && date < minDate) {
-      return `Minimum allowed date is ${formatDateWithTimezone(minDate, getTimezone(), false)}`;
-    }
-
-    if (maxDate && date > maxDate) {
-      return `Maximum allowed date is ${formatDateWithTimezone(maxDate, getTimezone(), false)}`;
-    }
-
-    return '';
-  };
-
-  const handleInputBlur = () => {
-    setIsEditing(false);
-    
-    if (onChange) {
-      const parsedDate = parseInputDate(inputValue);
-      
-      if (parsedDate) {
-        const errorMessage = validateDateRange(parsedDate);
-        setValidationError(errorMessage);
-        
-        if (!errorMessage) {
-          onChange(parsedDate);
-        }
-      } else if (inputValue.trim() === '') {
-        setValidationError('');
-        onChange(null);
-      } else {
-        setValidationError('');
-        setInputValue(formatDate(value));
-      }
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleInputBlur();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      setInputValue(formatDate(value));
-      setValidationError('');
-      setIsEditing(false);
-    }
-  };
-
-  return (
-    <div className="relative">
-      <input
-        value={inputValue}
-        onChange={handleInputChange}
-        onFocus={handleInputFocus}
-        onBlur={handleInputBlur}
-        onKeyDown={handleKeyDown}
-        onClick={handleClick}
-        placeholder={placeholder || label}
-        disabled={disabled}
-        className={`${inputClasses} ${disabled ? disabledClasses : enabledClasses} ${
-          isOpen ? 'ring-2 ring-blue-500' : ''
-        }`}
-        title={showTime ? 
-          "Enter date and time" : 
-          "Enter date"
-        }
-      />
-      <div className="absolute right-3 top-7 transform -translate-y-1/2 flex items-center gap-1">
-        <Calendar size={16} className="text-gray-400 cursor-pointer" onClick={handleClick} />
-      </div>
-      {validationError && (
-        <div className="absolute top-full left-0 text-xs text-red-600 px-2 mb-2 z-10">
-          {validationError}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export function DatePicker({
-  className = '',
-  disabled = false,
-  enableTime = false,
-  isClearable = true,
-  maxDate,
-  minDate,
-  onChange,
-  value = null,
-  open,
-  onClickOutside,
-  showTimeSelect = false,
-  timeFormat = 'HH:mm',
-  timeIntervals = 15,
-  inline = true,
-}: DatePickerProps) {
-  const dateFormat = showTimeSelect || enableTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
-
-  const date = typeof value === 'string' && value ? new Date(value) : value;
-
-  const shouldShowTime = showTimeSelect || enableTime;
-
-  const datePickerProps = {
-    selected: date,
-    minDate,
-    maxDate,
-    disabled,
-    isClearable,
-    onChange,
-    dateFormat,
-    showTimeSelect: shouldShowTime,
-    timeFormat,
-    timeIntervals,
-    timeCaption: 'Time',
-    portalId: 'date-picker-portal',
-    popperClassName: 'date-picker-popper !z-[9999]',
-    popperPlacement: 'bottom-end',
-    inline,
-    open,
-    onClickOutside,
-    className: classnames(className, inputClasses),
-  } as any;
-
-  return (
-    <div className={`relative inline-block ${className}`}>
-      {
-        <div className="absolute z-[9999] mt-1 border rounded-md shadow-lg bg-white">
-          <ReactDatePicker {...datePickerProps} />
-        </div>
-      }
-    </div>
-  );
-}
-
-export function renderDateFilter({ gjsModel, performInteraction }: DateFilterProps) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const startDatePickerRef = useRef<HTMLDivElement>(null);
-  const endDatePickerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const [componentData, setComponentData] = useState({ ...gjsModel.get('componentProps') });
-  const [attributes, setAttributes] = useState({ ...gjsModel.get('attributes') });
-  const [isApplying, setIsApplying] = useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isStartDateOpen, setIsStartDateOpen] = useState(false);
-  const [isEndDateOpen, setIsEndDateOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ left: 'auto', right: '0' });
-
-  const {
-    className = '',
-    affectedComponents = [],
-    startLabel = 'Start date',
-    endLabel = 'End date',
-    isClearable = true,
-    dateFormat = 'yyyy-MM-dd',
-    minDate,
-    maxDate,
-    showTimeSelect = true,
-    timeFormat = 'HH:mm',
-    timeIntervals = 15,
-    value,
-    default: defaultValue,
-  } = componentData;
-
-  const { defaultStartDate, defaultEndDate } = getDefaultDates();
-
-  const globalMin = minDate ? parseRelativeDate(minDate) : undefined;
-  const globalMax = maxDate ? parseRelativeDate(maxDate) : undefined;
-
-  const getInitialStartDate = (): Date | null => {
-    if (value?.start) {
-      return new Date(value.start);
-    }
-
-    if (defaultValue?.start) {
-      return parseRelativeDate(defaultValue.start);
-    }
-
-    return defaultStartDate;
-  };
-
-  const getInitialEndDate = (): Date | null => {
-    if (value?.end) {
-      return new Date(value.end);
-    }
-
-    if (defaultValue?.end) {
-      return parseRelativeDate(defaultValue.end);
-    }
-
-    return defaultEndDate;
-  };
-
-  const [startDate, setStartDate] = useState<Date | null>(getInitialStartDate());
-  const [endDate, setEndDate] = useState<Date | null>(getInitialEndDate());
-  const [tempStartDate, setTempStartDate] = useState<Date | null>(null);
-  const [tempEndDate, setTempEndDate] = useState<Date | null>(null);
-
-  const isBusy = attributes.interactionApiInProgress || isApplying;
-
-  const getMaxStartDate = () => {
-    return globalMax || tempEndDate;
-  };
-
-  const getMinEndDate = () => {
-    return globalMin || tempStartDate;
-  };
-
-  const closeAllPickers = () => {
-    setIsStartDateOpen(false);
-    setIsEndDateOpen(false);
-  };
-
-  const closeDropdown = () => {
-    setIsDropdownOpen(false);
-    closeAllPickers();
-  };
-
-  const toggleDropdown = () => {
-    if (!isDropdownOpen) {
-      closeAllPickers();
-    }
-
-    setIsDropdownOpen(!isDropdownOpen);
-  };
-
-  const handleStartDateClick = () => {
-    if (!isApplying && !isBusy) {
-      setIsEndDateOpen(false);
-      setIsStartDateOpen(!isStartDateOpen);
-    }
-  };
-
-  const handleEndDateClick = () => {
-    if (!isApplying && !isBusy) {
-      setIsStartDateOpen(false);
-      setIsEndDateOpen(!isEndDateOpen);
-    }
-  };
-
-  useEffect(() => {
-    const doc = wrapperRef.current?.ownerDocument ?? document;
-
-    function handleOutsideClick(e: PointerEvent) {
-      if (isDropdownOpen && wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        closeDropdown();
-      }
-    }
-
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        closeDropdown();
-      }
-    }
-
-    doc.addEventListener('pointerdown', handleOutsideClick);
-    doc.addEventListener('keydown', handleEscape);
-
-    return () => {
-      doc.removeEventListener('pointerdown', handleOutsideClick);
-      doc.removeEventListener('keydown', handleEscape);
-    };
-  }, [isDropdownOpen]);
-
-  // Add click event listeners to detect time selector clicks
-  useEffect(() => {
-    const handleTimeClick = (event: MouseEvent, isStartPicker: boolean) => {
-      const target = event.target as HTMLElement;
-      
-      // Check if the click was on time-related elements
-      const isTimeClick = target.closest('.react-datepicker__time-container') ||
-                          target.closest('.react-datepicker__time-list') ||
-                          target.closest('.react-datepicker__time-list-item') ||
-                          target.classList.contains('react-datepicker__time-list-item');
-
-      if (isTimeClick && showTimeSelect) {
-        // Close the picker after a small delay to allow the time selection to complete
-        setTimeout(() => {
-          if (isStartPicker) {
-            setIsStartDateOpen(false);
-          } else {
-            setIsEndDateOpen(false);
-          }
-        }, 100);
-      }
-    };
-
-    const startPickerElement = startDatePickerRef.current;
-    const endPickerElement = endDatePickerRef.current;
-
-    if (isStartDateOpen && startPickerElement) {
-      const handleStartTimeClick = (e: MouseEvent) => handleTimeClick(e, true);
-      startPickerElement.addEventListener('click', handleStartTimeClick);
-      
-      return () => {
-        startPickerElement.removeEventListener('click', handleStartTimeClick);
-      };
-    }
-
-    if (isEndDateOpen && endPickerElement) {
-      const handleEndTimeClick = (e: MouseEvent) => handleTimeClick(e, false);
-      endPickerElement.addEventListener('click', handleEndTimeClick);
-      
-      return () => {
-        endPickerElement.removeEventListener('click', handleEndTimeClick);
-      };
-    }
-
-    // Always return undefined if no cleanup is needed
-    return undefined;
-  }, [isStartDateOpen, isEndDateOpen, showTimeSelect]);
-
-  const handleStartDateChange = (date: Date | null) => {
-    const adjustedDate = convertToTargetTimezone(date);
-    setTempStartDate(adjustedDate);
-
-    if (!showTimeSelect) {
-      setIsStartDateOpen(false);
-    }
-  };
-
-  const handleEndDateChange = (date: Date | null) => {
-    const adjustedDate = convertToTargetTimezone(date);
-    setTempEndDate(adjustedDate);
-
-    if (!showTimeSelect) {
-      setIsEndDateOpen(false);
-    }
-  };
-
-  const handleApply = async () => {
-    setIsApplying(true);
-
-    try {
-      const dateValues = {
-        start: tempStartDate?.toISOString() || null,
-        end: tempEndDate?.toISOString() || null,
-      };
-
-      gjsModel.set('componentProps', {
-        ...gjsModel.get('componentProps'),
-        value: dateValues,
-      });
-
-      const id = gjsModel.get('id');
-
-      setStartDate(tempStartDate);
-      setEndDate(tempEndDate);
-
-      await performInteraction({
-        interactionType: 'dateFilter',
-        id,
-        affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),
-      });
-
-      closeDropdown();
-    } finally {
-      setIsApplying(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isDropdownOpen) {
-      setTempStartDate(startDate);
-      setTempEndDate(endDate);
-    } else {
-      closeAllPickers();
-    }
-  }, [isDropdownOpen, startDate, endDate]);
-
-  useEffect(() => {
-    if (!isDropdownOpen || !buttonRef.current) {
-      return;
-    }
-
-    const buttonRect = buttonRef.current.getBoundingClientRect();
-    const dropdownWidth = 380;
-    const iframeViewportWidth = document.documentElement.clientWidth;
-    const iframeBodyWidth =
-      document.getElementById('dashboard-root')?.clientWidth || iframeViewportWidth;
-
-    const spaceToRight = iframeBodyWidth - buttonRect.right;
-    const spaceToLeft = buttonRect.left;
-
-    if (spaceToLeft >= dropdownWidth) {
-      setDropdownPosition({ left: 'auto', right: '0px' });
-    } else if (spaceToRight < dropdownWidth && spaceToLeft < dropdownWidth) {
-      const shiftLeft = dropdownWidth - spaceToRight + 16;
-      setDropdownPosition({ left: `-${shiftLeft}px`, right: 'auto' });
-    } else if (spaceToRight >= dropdownWidth) {
-      setDropdownPosition({ left: '0px', right: 'auto' });
-    }
-  }, [isDropdownOpen]);
-
-  useEffect(() => {
-    const updateComponentData = () => {
-      const newData = { ...gjsModel.get('componentProps') };
-      setComponentData(newData);
-
-      if (newData.value?.start && newData.value.start !== componentData.value?.start) {
-        setStartDate(new Date(newData.value.start));
-      }
-
-      if (newData.value?.end && newData.value.end !== componentData.value?.end) {
-        setEndDate(new Date(newData.value.end));
-      }
-    };
-
-    const updateAttributes = () => {
-      setAttributes({ ...gjsModel.get('attributes') });
-    };
-
-    gjsModel.on('change:componentProps', updateComponentData);
-    gjsModel.on('change:attributes', updateAttributes);
-
-    return () => {
-      gjsModel.off('change:componentProps', updateComponentData);
-      gjsModel.off('change:attributes', updateAttributes);
-    };
-  }, [gjsModel, componentData.value]);
-
-  return (
-    <div ref={wrapperRef} className={`relative ${className}`}>
-      <button
-        ref={buttonRef}
-        onClick={toggleDropdown}
-        disabled={isBusy}
-        className={`${buttonClasses} ${isBusy ? disabledClasses : enabledClasses}`}
-        title="Open Date & Time Filter"
-      >
-        <div className="flex items-center gap-1">
-          <Calendar size={16} className="text-gray-600" />
-        </div>
-        {isBusy && <Loader2Icon size={14} className="animate-spin text-blue-500" />}
-      </button>
-
-      {isDropdownOpen && (
-        <div ref={dropdownRef} className={dropdownClasses} style={dropdownPosition}>
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <h3 className="text-sm font-medium text-gray-900">Select Date & Time Range</h3>
-              <button onClick={closeDropdown} className={closeButtonClasses}>
-                <X size={14} className="text-gray-400" />
-              </button>
-            </div>
-
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">{startLabel}</label>
-              <div className="relative">
-                <DateInput
-                  label={startLabel}
-                  value={tempStartDate}
-                  onClick={handleStartDateClick}
-                  disabled={isApplying}
-                  placeholder="Select start date"
-                  isOpen={isStartDateOpen}
-                  showTime={showTimeSelect}
-                  onChange={handleStartDateChange}
-                  minDate={globalMin ? (convertFromStoredDate(globalMin) ?? undefined) : undefined}
-                  maxDate={getMaxStartDate() ? (convertFromStoredDate(getMaxStartDate()) ?? undefined) : undefined}
-                />
-              </div>
-
-              {isStartDateOpen && (
-                <div ref={startDatePickerRef} className="mt-2 p-2">
-                  <ReactDatePicker
-                    selected={convertFromStoredDate(tempStartDate)}
-                    onChange={handleStartDateChange}
-                    minDate={globalMin ? (convertFromStoredDate(globalMin) ?? undefined) : undefined}
-                    maxDate={getMaxStartDate() ? (convertFromStoredDate(getMaxStartDate()) ?? undefined) : undefined}
-                    showTimeSelect={showTimeSelect}
-                    timeFormat={timeFormat}
-                    timeIntervals={timeIntervals}
-                    timeCaption="Time"
-                    dateFormat={showTimeSelect ? 'dd/MM/yyyy HH:mm' : dateFormat}
-                    inline={true}
-                    isClearable={isClearable}
-                    disabled={isApplying}
-                  />
-                </div>
-              )}
-            </div>
-
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">{endLabel}</label>
-              <div className="relative">
-                <DateInput
-                  label={endLabel}
-                  value={tempEndDate}
-                  onClick={handleEndDateClick}
-                  disabled={isApplying}
-                  placeholder="Select end date"
-                  isOpen={isEndDateOpen}
-                  showTime={showTimeSelect}
-                  onChange={handleEndDateChange}
-                  minDate={getMinEndDate() ? (convertFromStoredDate(getMinEndDate()) ?? undefined) : undefined}
-                  maxDate={globalMax ? (convertFromStoredDate(globalMax) ?? undefined) : undefined}
-                />
-              </div>
-
-              {isEndDateOpen && (
-                <div ref={endDatePickerRef} className="mt-2 p-2">
-                  <ReactDatePicker
-                    selected={convertFromStoredDate(tempEndDate)}
-                    onChange={handleEndDateChange}
-                    minDate={getMinEndDate() ? (convertFromStoredDate(getMinEndDate()) ?? undefined) : undefined}
-                    maxDate={globalMax ? (convertFromStoredDate(globalMax) ?? undefined) : undefined}
-                    showTimeSelect={showTimeSelect}
-                    timeFormat={timeFormat}
-                    timeIntervals={timeIntervals}
-                    timeCaption="Time"
-                    dateFormat={showTimeSelect ? 'dd/MM/yyyy HH:mm' : dateFormat}
-                    inline={true}
-                    isClearable={isClearable}
-                    disabled={isApplying}
-                  />
-                </div>
-              )}
-            </div>
-
-            <div className="flex gap-2 pt-2">
-              <Button
-                variant="outline"
-                onClick={closeDropdown}
-                disabled={isApplying}
-                className="flex-1 h-8 text-xs"
-                size="sm"
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleApply}
-                disabled={isApplying}
-                className="flex-1 h-8 text-xs"
-                size="sm"
-              >
-                {isApplying ? (
-                  <>
-                    <Loader2Icon size={12} className="animate-spin mr-1" />
-                  </>
-                ) : (
-                  'Apply'
-                )}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}