@apptimate/ui 7.1.0 → 7.3.0

package/package.json

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

package/src/base-components/FormattedNumberInput.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface FormattedNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    value?: number | string | "";
+    onChange?: (value: number | "") => void;
+    decimals?: number;
+}
+
+export const FormattedNumberInput = React.forwardRef<HTMLInputElement, FormattedNumberInputProps>(
+    ({ value, onChange, decimals = 2, className, ...props }, ref) => {
+        const [displayValue, setDisplayValue] = useState("");
+
+        const formatNumber = (val: number | string | undefined) => {
+            if (val === "" || val === null || val === undefined) return "";
+            const num = Number(val);
+            if (isNaN(num)) return "";
+            return num.toLocaleString('en-US', { maximumFractionDigits: decimals });
+        };
+
+        useEffect(() => {
+            if (value === "" || value === null || value === undefined) {
+                setDisplayValue("");
+                return;
+            }
+            
+            // Check if user is typing something that evaluates to the same number (like "20." or "20.0")
+            // If they are, don't overwrite displayValue to preserve their cursor/typing state
+            const currentRaw = displayValue.replace(/,/g, '');
+            if (Number(value) !== Number(currentRaw)) {
+                setDisplayValue(formatNumber(value));
+            }
+        }, [value, decimals, displayValue]);
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            let val = e.target.value;
+
+            // Handle empty
+            if (val === "") {
+                setDisplayValue("");
+                onChange?.("");
+                return;
+            }
+
+            // Remove non-numeric characters except period and minus sign
+            const isNegative = val.startsWith('-');
+            val = val.replace(/[^0-9.]/g, '');
+            
+            // Prevent multiple periods
+            const parts = val.split('.');
+            if (parts.length > 2) {
+                val = parts[0] + '.' + parts.slice(1).join('');
+            }
+
+            // Limit decimal places
+            if (parts.length > 1 && parts[1].length > decimals) {
+                val = parts[0] + '.' + parts[1].substring(0, decimals);
+            }
+
+            if (isNegative) val = '-' + val;
+
+            // Update display value with comma formatting for the integer part
+            let formatted = val;
+            const currentParts = val.split('.');
+            const integerPart = currentParts[0];
+            
+            if (integerPart && integerPart !== '-' && integerPart !== '-0') {
+                const numInt = parseInt(integerPart, 10);
+                if (!isNaN(numInt)) {
+                   const formattedInt = numInt.toLocaleString('en-US');
+                   formatted = (isNegative && numInt > 0) ? '-' + formattedInt : formattedInt;
+                   // Re-attach decimal part if it exists
+                   if (currentParts.length > 1) {
+                       formatted += '.' + currentParts[1];
+                   }
+                }
+            } else if (integerPart === '-0') {
+                formatted = '-0' + (currentParts.length > 1 ? '.' + currentParts[1] : '');
+            } else if (integerPart === '-') {
+                formatted = '-';
+            }
+
+            setDisplayValue(formatted);
+
+            if (val === "-" || val === "-0") {
+                onChange?.("");
+            } else {
+                const numericValue = parseFloat(val);
+                if (!isNaN(numericValue)) {
+                    onChange?.(numericValue);
+                } else if (val === ".") {
+                    onChange?.("");
+                }
+            }
+        };
+
+        const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+            setDisplayValue(formatNumber(value));
+            props.onBlur?.(e);
+        };
+
+        return (
+            <input
+                ref={ref}
+                type="text"
+                value={displayValue}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className={cn('outline-none', className)}
+                {...props}
+            />
+        );
+    }
+);
+
+FormattedNumberInput.displayName = 'FormattedNumberInput';

package/src/base-components/Select.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { Label } from './Label';
 
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    label?: string;
+    label?: React.ReactNode | string;
     error?: string;
     isRequired?: boolean;
     options: { label: string; value: string | number }[];

package/src/common-components/DashboardLayout.tsx

@@ -70,6 +70,13 @@ export function DashboardLayout({
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
   const [isSubSidebarOpen, setIsSubSidebarOpen] = useState(true);
+  const [isMenusLoading, setIsMenusLoading] = useState(true);
+
+  React.useEffect(() => {
+    if (menus && menus.length > 0) {
+      setIsMenusLoading(false);
+    }
+  }, [menus]);
   const pathname = usePathname() || "";
   const router = useRouter();
 
@@ -247,7 +254,14 @@ export function DashboardLayout({
           }
         `}} />
         <nav className="flex flex-col gap-6 flex-1 w-full sidebar-scroll pb-4">
-          {effectiveMenus.map((menu) => {
+          {isMenusLoading ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <div key={`skel-${i}`} className="flex flex-col items-center justify-center gap-2 w-full px-1">
+                <div className="w-[22px] h-[22px] bg-gray-200/80 rounded-md animate-pulse" />
+                <div className="w-12 h-2.5 bg-gray-200/80 rounded animate-pulse" />
+              </div>
+            ))
+          ) : effectiveMenus.map((menu) => {
             const isActive = activeMenuId === menu.id;
             return (
               <div
@@ -318,68 +332,91 @@ export function DashboardLayout({
       </aside>
 
       {/* Desktop Secondary Sidebar */}
-      {activeMenu && activeMenu.groups.length > 0 && (
+      {isMenusLoading || (activeMenu && activeMenu.groups.length > 0) ? (
         <>
           <aside className={cn(
             "hidden md:flex print:hidden bg-white border-gray-200 flex-col py-8 shrink-0 z-10 transition-all duration-300 overflow-hidden group",
             isSubSidebarOpen ? "w-[210px]" : "w-0 opacity-0 px-0"
           )}>
-            <div className="flex items-center justify-between px-6 mb-6 w-[210px]">
-              <h2 className="text-xl font-bold text-[#2D3142]/80 truncate">{activeMenu.label}</h2>
-              <button onClick={() => setIsSubSidebarOpen(false)} className="text-gray-400 hover:text-[#2D3142] transition-colors flex-shrink-0 outline-none opacity-0 group-hover:opacity-100 cursor-pointer">
-                <PanelLeftClose size={18} />
-              </button>
-            </div>
-            <div className="flex-1 overflow-y-auto px-4 space-y-6">
-              {activeMenu.groups.map((group) => (
-                <div key={group.id}>
-                  {group.label && (
-                    <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
-                  )}
-                  <nav className="flex flex-col gap-1">
-                    {group.items.map((item: any) => {
-                      // Find the longest matching path in this group to avoid parent paths being active
-                      const allGroupItems = activeMenu.groups.flatMap(g => g.items);
-                      const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
-                      const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
-                      const isItemActive = longestMatch?.path === item.path;
-                      const isInternal = basePath
-                        ? item.path.startsWith(basePath)
-                        : !externalPaths.some(ext => item.path.startsWith(ext));
-                      const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
-
-                      const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
-                        ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
-                        : "text-gray-500 font-medium hover:bg-gray-50"
-                        }`;
-
-                      const content = (
-                        <>
-                          <div className="flex items-center gap-3">
-                            {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
-                            <span>{item.label}</span>
-                          </div>
-                          {item.badge && <div>{item.badge}</div>}
-                        </>
-                      );
-
-                      return isInternal ? (
-                        <Link key={item.id} href={href} className={className}>
-                          {content}
-                        </Link>
-                      ) : (
-                        <a key={item.id} href={href} className={className}>
-                          {content}
-                        </a>
-                      );
-                    })}
-                  </nav>
+            {isMenusLoading ? (
+              <div className="flex-1 px-4 w-[210px]">
+                <div className="flex items-center px-2 mb-8 mt-1">
+                  <div className="w-24 h-6 bg-gray-200/80 rounded animate-pulse" />
                 </div>
-              ))}
-            </div>
+                <div className="space-y-8">
+                  {Array.from({ length: 3 }).map((_, i) => (
+                    <div key={`skel-group-${i}`} className="space-y-3">
+                      <div className="w-16 h-3 bg-gray-200/80 rounded animate-pulse mx-2 mb-4" />
+                      {Array.from({ length: 4 }).map((_, j) => (
+                        <div key={`skel-item-${j}`} className="flex items-center gap-3 px-2 py-2">
+                          <div className="w-4 h-4 bg-gray-200/80 rounded animate-pulse shrink-0" />
+                          <div className="w-full h-3 bg-gray-200/80 rounded animate-pulse" />
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className="flex items-center justify-between px-6 mb-6 w-[210px]">
+                  <h2 className="text-xl font-bold text-[#2D3142]/80 truncate">{activeMenu!.label}</h2>
+                  <button onClick={() => setIsSubSidebarOpen(false)} className="text-gray-400 hover:text-[#2D3142] transition-colors flex-shrink-0 outline-none opacity-0 group-hover:opacity-100 cursor-pointer">
+                    <PanelLeftClose size={18} />
+                  </button>
+                </div>
+                <div className="flex-1 overflow-y-auto px-4 space-y-6">
+                  {activeMenu!.groups.map((group) => (
+                    <div key={group.id}>
+                      {group.label && (
+                        <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
+                      )}
+                      <nav className="flex flex-col gap-1">
+                        {group.items.map((item: any) => {
+                          // Find the longest matching path in this group to avoid parent paths being active
+                          const allGroupItems = activeMenu!.groups.flatMap(g => g.items);
+                          const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
+                          const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
+                          const isItemActive = longestMatch?.path === item.path;
+                          const isInternal = basePath
+                            ? item.path.startsWith(basePath)
+                            : !externalPaths.some(ext => item.path.startsWith(ext));
+                          const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
+    
+                          const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
+                            ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
+                            : "text-gray-500 font-medium hover:bg-gray-50"
+                            }`;
+    
+                          const content = (
+                            <>
+                              <div className="flex items-center gap-3">
+                                {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
+                                <span>{item.label}</span>
+                              </div>
+                              {item.badge && <div>{item.badge}</div>}
+                            </>
+                          );
+    
+                          return isInternal ? (
+                            <Link key={item.id} href={href} className={className}>
+                              {content}
+                            </Link>
+                          ) : (
+                            <a key={item.id} href={href} className={className}>
+                              {content}
+                            </a>
+                          );
+                        })}
+                      </nav>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
 
             {/* Organization Selector - Bottom of Secondary Sidebar */}
-            {organizations.length > 0 && (
+            {organizations.length > 0 && !isMenusLoading && (
               <div className="px-4 pt-4 mt-2 border-t border-gray-100">
                 <button
                   id="org-selector-desktop"
@@ -405,7 +442,7 @@ export function DashboardLayout({
           </aside>
 
         </>
-      )}
+      ) : null}
 
       {/* Main Content Area & Mobile Header */}
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden print:overflow-visible">
@@ -481,7 +518,14 @@ export function DashboardLayout({
 
             <div className="flex-1 overflow-y-auto py-6 px-4">
               <nav className="flex flex-col gap-8">
-                {effectiveMenus.map((menu) => (
+                {isMenusLoading ? (
+                  Array.from({ length: 4 }).map((_, i) => (
+                    <div key={`skel-mob-${i}`} className="flex items-center gap-3 mb-3 px-2">
+                      <div className="w-5 h-5 bg-gray-200/80 rounded-md animate-pulse" />
+                      <div className="w-24 h-4 bg-gray-200/80 rounded animate-pulse" />
+                    </div>
+                  ))
+                ) : effectiveMenus.map((menu) => (
                   <div key={menu.id}>
                     <div className="flex items-center gap-3 text-[#2D3142] font-bold mb-3 px-2">
                       {React.cloneElement(menu.icon as React.ReactElement<any>, {