@apptimate/ui 2.5.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/base-components/FinanceErrorToast.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import toast from "react-hot-toast";
+import { Button } from "./Button";
+
+export const handleFinanceError = (error: any, defaultMessage: string = "An error occurred") => {
+  const errMsg = typeof error === "string" ? error : (error?.message || defaultMessage);
+  
+  if (errMsg.toLowerCase().includes("fiscal year")) {
+    toast.error((t) => (
+      <div className="flex flex-col gap-2 mt-1">
+        <span>{errMsg}</span>
+        <Button size="small" variant="solid" color="primary" className="w-fit mt-1" onClick={() => {
+          toast.dismiss(t.id);
+          window.open("/finance/fiscal-years", "_blank");
+        }}>
+          Open Fiscal Years
+        </Button>
+      </div>
+    ), { duration: 8000 });
+  } else {
+    toast.error(errMsg);
+  }
+};

package/src/base-components/HintIcon.tsx

@@ -10,15 +10,22 @@ interface HintIconProps {
 
 export function HintIcon({ text }: HintIconProps) {
     const [show, setShow] = useState(false);
-    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [pos, setPos] = useState({ top: 0, left: 0, isBelow: false });
     const iconRef = React.useRef<HTMLSpanElement>(null);
 
     const handleMouseEnter = () => {
         if (iconRef.current) {
             const rect = iconRef.current.getBoundingClientRect();
             // Try to keep tooltip within upper bounds if possible
-            const y = rect.top - 6;
-            setPos({ top: y, left: rect.left + rect.width / 2 });
+            const spaceAbove = rect.top;
+            
+            if (spaceAbove < 150) {
+                // Not enough space above, position below
+                setPos({ top: rect.bottom + 6, left: rect.left + rect.width / 2, isBelow: true });
+            } else {
+                // Default position above
+                setPos({ top: rect.top - 6, left: rect.left + rect.width / 2, isBelow: false });
+            }
         }
         setShow(true);
     };
@@ -38,7 +45,11 @@ export function HintIcon({ text }: HintIconProps) {
             {show && typeof document !== 'undefined' && ReactDOM.createPortal(
                 <div
                     className="fixed z-[9999] px-3 py-2 text-[12px] leading-relaxed text-white bg-foreground-0 rounded-[6px] shadow-lg max-w-[320px] whitespace-pre-wrap pointer-events-none"
-                    style={{ top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)' }}
+                    style={{ 
+                        top: pos.top, 
+                        left: pos.left, 
+                        transform: pos.isBelow ? 'translate(-50%, 0)' : 'translate(-50%, -100%)' 
+                    }}
                 >
                     {text}
                 </div>,

package/src/index.tsx

@@ -33,3 +33,4 @@ export type { ImageUploadComponentProps, ItemImage } from './components/shared/I
 export * from './common-components/DashboardLayout';
 export * from './common-components/charts';
 export * from './common-components/PaymentSection';
+export * from './base-components/FinanceErrorToast';