@apptimate/ui 1.1.0 → 1.3.0

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@apptimate/ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
+    "@apptimate/core-lib": "*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.14.0",
     "react": "^19.2.5",
-    "tailwind-merge": "^3.5.0",
-    "@apptimate/core-lib": "*"
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^3.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/base-components/DateLabel.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+export interface DateLabelProps {
+  date: string | Date;
+  className?: string;
+}
+
+export function DateLabel({ date, className = '' }: DateLabelProps) {
+  if (!date) return <span className="text-gray-300">-</span>;
+
+  const d = new Date(date);
+  
+  // Format to "2026-05-07 4:35PM"
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  let hours = d.getHours();
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  
+  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}${ampm}`;
+
+  // Calculate relative time
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - d.getTime()) / 1000);
+  
+  let relativeText = null;
+
+  if (diffInSeconds < 60) {
+    relativeText = 'just now';
+  } else if (diffInSeconds < 3600) {
+    const mins = Math.floor(diffInSeconds / 60);
+    relativeText = `${mins} min${mins !== 1 ? 's' : ''} ago`;
+  } else if (diffInSeconds < 86400) {
+    // Less than 24 hours ago
+    const hours = Math.floor(diffInSeconds / 3600);
+    
+    // Check if it's the same calendar day or previous
+    const isSameDay = now.getDate() === d.getDate() && now.getMonth() === d.getMonth() && now.getFullYear() === d.getFullYear();
+    
+    if (isSameDay) {
+      relativeText = `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+    } else {
+      relativeText = 'yesterday';
+    }
+  } else if (diffInSeconds < 172800) {
+    // Between 24 and 48 hours ago
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    
+    const isYesterday = yesterday.getDate() === d.getDate() && yesterday.getMonth() === d.getMonth() && yesterday.getFullYear() === d.getFullYear();
+    
+    if (isYesterday) {
+      relativeText = 'yesterday';
+    }
+  }
+
+  return (
+    <div className={`flex flex-col ${className}`}>
+      <span className="text-gray-600 font-medium whitespace-nowrap">{formattedDate}</span>
+      {relativeText && (
+        <span className="text-[10.5px] text-gray-400 font-semibold">{relativeText}</span>
+      )}
+    </div>
+  );
+}

package/src/base-components/DateRangePicker.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Calendar, ChevronDown, X, Check } from 'lucide-react';
+import { cn } from '@apptimate/core-lib';
+
+// ── Preset definitions ──────────────────────────────────────────────
+export type DateRangePresetKey =
+  | 'today'
+  | 'yesterday'
+  | 'this_week'
+  | 'last_7_days'
+  | 'this_month'
+  | 'last_30_days'
+  | 'this_year'
+  | 'custom';
+
+export interface DateRange {
+  from: string; // YYYY-MM-DD
+  to: string;   // YYYY-MM-DD
+}
+
+export interface DateRangePreset {
+  key: DateRangePresetKey;
+  label: string;
+  resolve: () => DateRange;
+}
+
+const fmt = (d: Date): string => {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+};
+
+const today = (): Date => {
+  const d = new Date();
+  d.setHours(0, 0, 0, 0);
+  return d;
+};
+
+const PRESETS: DateRangePreset[] = [
+  {
+    key: 'today',
+    label: 'Today',
+    resolve: () => {
+      const d = fmt(today());
+      return { from: d, to: d };
+    },
+  },
+  {
+    key: 'yesterday',
+    label: 'Yesterday',
+    resolve: () => {
+      const d = today();
+      d.setDate(d.getDate() - 1);
+      const s = fmt(d);
+      return { from: s, to: s };
+    },
+  },
+  {
+    key: 'this_week',
+    label: 'This Week',
+    resolve: () => {
+      const d = today();
+      const day = d.getDay(); // 0=Sun
+      const diff = day === 0 ? 6 : day - 1; // monday start
+      const start = new Date(d);
+      start.setDate(d.getDate() - diff);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'last_7_days',
+    label: 'Last 7 Days',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d);
+      start.setDate(d.getDate() - 6);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'this_month',
+    label: 'This Month',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d.getFullYear(), d.getMonth(), 1);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'last_30_days',
+    label: 'Last 30 Days',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d);
+      start.setDate(d.getDate() - 29);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'this_year',
+    label: 'This Year',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d.getFullYear(), 0, 1);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'custom',
+    label: 'Custom Range',
+    resolve: () => {
+      const d = fmt(today());
+      return { from: d, to: d };
+    },
+  },
+];
+
+// ── Props ──────────────────────────────────────────────────────────
+export interface DateRangePickerProps {
+  /** Currently selected preset key */
+  value: DateRangePresetKey;
+  /** The resolved from/to dates */
+  dateRange: DateRange;
+  /** Callback when selection changes */
+  onChange: (preset: DateRangePresetKey, range: DateRange) => void;
+  /** Additional className for the trigger */
+  className?: string;
+  /** Alignment of the dropdown */
+  align?: 'left' | 'right';
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────
+const formatDisplayDate = (dateStr: string): string => {
+  if (!dateStr) return '';
+  const d = new Date(dateStr + 'T00:00:00');
+  return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
+};
+
+const getDisplayLabel = (preset: DateRangePresetKey, range: DateRange): string => {
+  const p = PRESETS.find((pr) => pr.key === preset);
+  if (!p) return '';
+  if (preset === 'custom') {
+    if (range.from === range.to) return formatDisplayDate(range.from);
+    return `${formatDisplayDate(range.from)} – ${formatDisplayDate(range.to)}`;
+  }
+  return p.label;
+};
+
+// ── Component ──────────────────────────────────────────────────────
+export const DateRangePicker = ({
+  value,
+  dateRange,
+  onChange,
+  className,
+  align = 'left',
+}: DateRangePickerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Custom-range local state (only used when editing custom)
+  const [customFrom, setCustomFrom] = useState(dateRange.from);
+  const [customTo, setCustomTo] = useState(dateRange.to);
+  const [showCustomPanel, setShowCustomPanel] = useState(value === 'custom');
+
+  // Sync custom state when dateRange changes externally
+  useEffect(() => {
+    setCustomFrom(dateRange.from);
+    setCustomTo(dateRange.to);
+  }, [dateRange.from, dateRange.to]);
+
+  const updatePosition = useCallback(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCoords({
+        top: rect.top + window.scrollY,
+        bottom: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        right: window.innerWidth - rect.right - window.scrollX,
+      });
+    }
+  }, []);
+
+  const toggleDropdown = () => {
+    if (!isOpen) {
+      updatePosition();
+      setShowCustomPanel(value === 'custom');
+    }
+    setIsOpen((prev) => !prev);
+  };
+
+  const closeDropdown = () => setIsOpen(false);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Element;
+      const clickedTrigger = triggerRef.current?.contains(target as Node);
+      const clickedContent = contentRef.current?.contains(target as Node);
+      if (!clickedTrigger && !clickedContent) {
+        setIsOpen(false);
+      }
+    };
+    const handleScroll = () => { if (isOpen) updatePosition(); };
+    const handleResize = () => { if (isOpen) updatePosition(); };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      window.addEventListener('scroll', handleScroll, true);
+      window.addEventListener('resize', handleResize);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isOpen, updatePosition]);
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    if (preset.key === 'custom') {
+      setShowCustomPanel(true);
+      return; // don't close, show custom date inputs
+    }
+    const resolved = preset.resolve();
+    onChange(preset.key, resolved);
+    setShowCustomPanel(false);
+    closeDropdown();
+  };
+
+  const handleCustomApply = () => {
+    if (customFrom && customTo) {
+      // ensure from <= to
+      const f = customFrom <= customTo ? customFrom : customTo;
+      const t = customFrom <= customTo ? customTo : customFrom;
+      onChange('custom', { from: f, to: t });
+      closeDropdown();
+    }
+  };
+
+  const displayLabel = useMemo(() => getDisplayLabel(value, dateRange), [value, dateRange]);
+
+  return (
+    <>
+      {/* Trigger */}
+      <div ref={triggerRef} className={cn("relative inline-block", className)}>
+        <button
+          type="button"
+          onClick={toggleDropdown}
+          className={cn(
+            "flex items-center gap-2 px-3 py-2.5 rounded-xl text-[12.5px] font-bold border transition-all",
+            "bg-white border-gray-200 hover:border-gray-300 text-gray-700",
+            isOpen && "border-primary-300 ring-2 ring-primary-100"
+          )}
+        >
+          <Calendar size={14} strokeWidth={2.5} className="text-gray-400 flex-shrink-0" />
+          <span className="truncate max-w-[180px]">{displayLabel}</span>
+          <ChevronDown
+            size={13}
+            strokeWidth={2.5}
+            className={cn(
+              "text-gray-400 transition-transform flex-shrink-0",
+              isOpen && "rotate-180"
+            )}
+          />
+        </button>
+      </div>
+
+      {/* Dropdown via portal */}
+      {isOpen && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={contentRef}
+          style={{
+            position: 'absolute',
+            top: `${coords.bottom}px`,
+            ...(align === 'left'
+              ? { left: `${coords.left}px` }
+              : { right: `${coords.right}px` }),
+          }}
+          className="z-[9999] mt-1.5 rounded-[12px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] animate-in fade-in zoom-in-95 duration-200 overflow-hidden"
+        >
+          <div className="flex">
+            {/* Preset list */}
+            <div className={cn(
+              "py-2 min-w-[180px]",
+              showCustomPanel && "border-r border-gray-100"
+            )}>
+              <p className="px-3 pb-1.5 pt-1 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                Date Range
+              </p>
+              {PRESETS.map((preset) => (
+                <button
+                  key={preset.key}
+                  type="button"
+                  onClick={() => handlePresetClick(preset)}
+                  className={cn(
+                    "w-full px-3 py-2 text-[13px] text-left transition-colors flex items-center gap-2",
+                    (value === preset.key && !(preset.key === 'custom' && !showCustomPanel))
+                      ? "bg-primary-50 text-primary-700 font-bold"
+                      : "text-gray-700 hover:bg-gray-50 font-medium"
+                  )}
+                >
+                  {value === preset.key && (
+                    <Check size={13} strokeWidth={3} className="text-primary-600 flex-shrink-0" />
+                  )}
+                  <span className={cn(value !== preset.key && "pl-[21px]")}>
+                    {preset.label}
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            {/* Custom date panel */}
+            {showCustomPanel && (
+              <div className="p-3 min-w-[220px] flex flex-col gap-3">
+                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                  Custom Range
+                </p>
+                <div className="space-y-2">
+                  <div>
+                    <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1 block">
+                      From
+                    </label>
+                    <input
+                      type="date"
+                      value={customFrom}
+                      onChange={(e) => setCustomFrom(e.target.value)}
+                      className="appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 text-[12.5px] font-semibold text-gray-700 outline-none transition-all hover:border-gray-300 focus:border-primary-300 focus:ring-2 focus:ring-primary-100 w-full"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1 block">
+                      To
+                    </label>
+                    <input
+                      type="date"
+                      value={customTo}
+                      onChange={(e) => setCustomTo(e.target.value)}
+                      className="appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 text-[12.5px] font-semibold text-gray-700 outline-none transition-all hover:border-gray-300 focus:border-primary-300 focus:ring-2 focus:ring-primary-100 w-full"
+                    />
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={handleCustomApply}
+                  disabled={!customFrom || !customTo}
+                  className={cn(
+                    "w-full py-2 rounded-lg text-[12.5px] font-bold transition-all",
+                    customFrom && customTo
+                      ? "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700"
+                      : "bg-gray-100 text-gray-400 cursor-not-allowed"
+                  )}
+                >
+                  Apply Range
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Footer showing resolved range */}
+          {value !== 'custom' && (
+            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+              <p className="text-[11px] text-gray-500 font-medium">
+                <span className="font-bold text-gray-600">{formatDisplayDate(dateRange.from)}</span>
+                {dateRange.from !== dateRange.to && (
+                  <>
+                    <span className="mx-1">→</span>
+                    <span className="font-bold text-gray-600">{formatDisplayDate(dateRange.to)}</span>
+                  </>
+                )}
+              </p>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+};
+
+// ── Utility: resolve a preset key to a DateRange ───────────────────
+export const resolveDateRangePreset = (key: DateRangePresetKey): DateRange => {
+  const preset = PRESETS.find((p) => p.key === key);
+  if (!preset) return { from: fmt(today()), to: fmt(today()) };
+  return preset.resolve();
+};
+
+DateRangePicker.displayName = 'DateRangePicker';

package/src/base-components/ImageDropzone.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import React, { useRef } from "react";
+import { Upload } from "lucide-react";
+
+export interface ImageDropzoneProps {
+  onDrop: (files: File[]) => void;
+  maxSizeMB?: number;
+  maxFiles?: number;
+  accept?: string;
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  isLoading?: boolean;
+}
+
+export function ImageDropzone({
+  onDrop,
+  maxSizeMB = 5,
+  maxFiles = 10,
+  accept = "image/*",
+  className = "",
+  title = "Drop images here or click to upload",
+  subtitle = "JPEG, PNG, WebP — max 5MB each, up to 10 images",
+  isLoading = false,
+}: ImageDropzoneProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (isLoading) return;
+    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isLoading) return;
+    const files = Array.from(e.target.files || []);
+    if (files.length) {
+      onDrop(files.slice(0, maxFiles));
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div
+      onDragOver={(e) => e.preventDefault()}
+      onDrop={handleFileDrop}
+      onClick={() => fileInputRef.current?.click()}
+      className={`border-2 border-dashed border-gray-200 hover:border-primary-300 rounded-xl p-6 flex flex-col items-center justify-center cursor-pointer transition-all hover:bg-primary-50/30 group ${
+        isLoading ? "opacity-50 cursor-not-allowed" : ""
+      } ${className}`}
+    >
+      <div className="w-10 h-10 rounded-full bg-gray-100 group-hover:bg-primary-100 flex items-center justify-center mb-2 transition-colors">
+        {isLoading ? (
+          <div className="w-5 h-5 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
+        ) : (
+          <Upload size={18} className="text-gray-400 group-hover:text-primary-500" />
+        )}
+      </div>
+      <p className="text-[13px] font-medium text-gray-500 group-hover:text-primary-600">
+        {isLoading ? "Uploading..." : title}
+      </p>
+      <p className="text-[11px] text-gray-400 mt-0.5">{subtitle}</p>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={maxFiles > 1}
+        className="hidden"
+        onChange={handleFileSelect}
+        disabled={isLoading}
+      />
+    </div>
+  );
+}

package/src/base-components/Modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X } from 'lucide-react';
 import { cn } from '@apptimate/core-lib';
@@ -15,9 +16,15 @@ export interface ModalProps {
     backdrop?: 'transparent' | 'opaque' | 'blur';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
     position?: 'center' | 'bottom';
+    /** Override z-index layer (default 50). Increase for nested modals. */
+    zIndex?: number;
 }
 
-export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'center' }: ModalProps) => {
+export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'center', zIndex }: ModalProps) => {
+    // SSR-safe portal mount guard — document is only available on the client
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => { setMounted(true); }, []);
+
     useEffect(() => {
         if (isOpen) {
             document.body.style.overflow = 'hidden';
@@ -44,14 +51,14 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
         full: 'max-w-[100vw]',
     };
 
-    return (
+    const content = (
         <AnimatePresence>
             {isOpen && (
                 <div className={cn(
-                    "fixed inset-0 z-50 flex",
+                    "fixed inset-0 flex",
                     position === 'center' ? "items-center justify-center p-2 sm:p-4" : "items-end justify-center sm:items-center p-0 sm:p-4",
                     size === 'full' ? 'p-0 sm:p-0' : ''
-                )}>
+                )} style={{ zIndex: zIndex ?? 50 }}>
                     <motion.div
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
@@ -73,7 +80,7 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
                     >
                         {/* Header */}
                         <div className="flex items-center justify-between px-5 sm:px-8 py-4 border-b border-surface-0">
-                            <h3 className="text-[16px] sm:text-[18px] font-bold text-foreground-0 tracking-tight">{title}</h3>
+                            <h3 className="text-[16px] sm:text-[18px] font-bold text-foreground-0 tracking-tight flex-1 min-w-0">{title}</h3>
                             <button
                                 onClick={onClose}
                                 className="w-8 h-8 rounded-full flex items-center justify-center text-foreground-disabled hover:bg-surface-0 hover:text-foreground-0 transition-all"
@@ -92,7 +99,7 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
 
                         {/* Footer */}
                         {footer && (
-                            <div className="px-5 sm:px-8 pb-5 sm:pb-7 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
+                            <div className="px-5 sm:px-8 pb-5 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
                                 {footer}
                             </div>
                         )}
@@ -101,6 +108,11 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
             )}
         </AnimatePresence>
     );
+
+    // Always render via a portal into <body> so the modal escapes any parent
+    // stacking context created by Framer Motion transforms or CSS transforms.
+    if (!mounted) return null;
+    return createPortal(content, document.body);
 };
 
 export const ModalFooter = ({ children, className }: { children: React.ReactNode; className?: string }) => {

package/src/base-components/PopConfirm.tsx

@@ -12,8 +12,8 @@ export interface PopConfirmProps {
   /** Element that triggers the popover (e.g. Button) */
   trigger: React.ReactElement<{ onClick?: (e: React.MouseEvent) => void }>;
 
-  /** Called when user confirms. Call callback() to close. setLoading controls confirm button loading state. */
-  onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void;
+  /** Called when user confirms. Call callback() to close. Returning a Promise automatically handles loading state. */
+  onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void | Promise<any>;
 
   /** Called when user cancels. Call callback() to close. */
   onCancel: (callback: () => void) => void;
@@ -76,8 +76,19 @@ export const PopConfirm = ({
     setIsLoading(false);
   }, []);
 
-  const handleConfirm = useCallback(() => {
-    onConfirm(close, setIsLoading);
+  const handleConfirm = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = onConfirm(close, setIsLoading);
+      if (result instanceof Promise) {
+        await result;
+        // Automatically close if the promise resolves successfully
+        close();
+      }
+    } catch (e) {
+      console.error(e);
+      setIsLoading(false);
+    }
   }, [onConfirm, close]);
 
   const handleCancel = useCallback(() => {