@peak-ai/canvas 1.3.15 → 1.3.16

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

@@ -0,0 +1,816 @@
+/* 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>
+  );
+}