@apptimate/ui 5.5.0 → 5.7.0

package/package.json

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

package/src/base-components/Button.tsx

@@ -63,6 +63,9 @@ export interface ButtonProps {
 
   /** Test ID for testing */
   testId?: string;
+
+  /** Tooltip text on hover */
+  title?: string;
 }
 
 const iconSizeMap = {
@@ -219,6 +222,7 @@ export const Button = ({
   prefix = 'aceui',
   testId,
   disableWave = false,
+  title,
 }: ButtonProps) => {
   const isIconOnly = Boolean(!children && icon);
   const isActuallyDisabled = isDisabled || isLoading;
@@ -334,6 +338,7 @@ export const Button = ({
       aria-label={ariaLabel}
       aria-busy={isLoading ? 'true' : undefined}
       data-testid={testId}
+      title={title}
     >
       {wave && (
         <motion.span

package/src/base-components/DesktopFilterPopover.tsx

@@ -33,11 +33,13 @@ export const DesktopFilterPopover = ({
                     <div className="relative">
                         <Button
                             variant="soft"
-                            color="default"
-                            className={cn("!p-0 text-gray-500", triggerClassName)}
+                            color={hasActiveFilter ? 'primary' : 'default'}
+                            className={cn(triggerClassName)}
                             icon={<SlidersHorizontal size={18} strokeWidth={2} />}
                             ariaLabel={label}
-                        />
+                        >
+                            {label}
+                        </Button>
                         {hasActiveFilter && (
                             <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-primary-500 rounded-full ring-2 ring-white" />
                         )}

package/src/common-components/DashboardLayout.tsx

@@ -73,7 +73,9 @@ export function DashboardLayout({
 
   // Find which main menu should be active based on current path.
   // When basePath is set, prefer the menu whose items are mostly within basePath.
-  const fullPath = basePath + (pathname === "/" && basePath ? "" : pathname);
+  const fullPath = (basePath && pathname.startsWith(basePath))
+    ? pathname
+    : basePath + (pathname === "/" && basePath ? "" : pathname);
   const currentMainMenu = (() => {
     let bestMenu = menus[0];
     let bestScore = -1;
@@ -211,15 +213,18 @@ export function DashboardLayout({
                     setIsSubSidebarOpen(true);
                   }
                 }}
-                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors w-full px-1 ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
+                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-all duration-200 w-full px-1 py-1 relative ${isActive ? "text-indigo-600" : "text-gray-400 hover:text-[#2D3142]"
                   }`}
               >
+                {isActive && (
+                  <span className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-indigo-600 rounded-r-full" />
+                )}
                 {/* Clone the icon to dynamically apply styling based on active state */}
                 {React.cloneElement(menu.icon as React.ReactElement<any>, {
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
+                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold text-indigo-700" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}
@@ -286,9 +291,9 @@ export function DashboardLayout({
                       : !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 className = `pl-3 pr-4 py-2 rounded-r-lg rounded-l-none text-sm transition-all duration-200 flex items-center justify-between border-l-4 ${isItemActive
+                      ? "bg-indigo-50/70 border-indigo-600 text-indigo-950 font-bold"
+                      : "border-transparent text-gray-500 font-medium hover:bg-gray-50/50"
                       }`;
 
                     const content = (

package/src/common-components/pickers/PartyPicker.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useRef } from "react";
 import { Button } from '../../base-components/Button';
 import { Input } from '../../base-components/Input';
 import { Modal } from '../../base-components/Modal';
 import { ModalFooter } from '../../base-components/Modal';
+import { AsyncSearchableSelect } from '../../base-components/SearchableSelect';
 
 import { Plus, User } from "lucide-react";
 import {
@@ -12,7 +13,7 @@ import {
   PickerItem,
   PickerTrigger,
 } from "./EntityPickerModal";
-import { lookupParties, createParty } from "@apptimate/core-lib";
+import { lookupParties, createParty, sendRequest } from "@apptimate/core-lib";
 import toast from "react-hot-toast";
 
 interface PartyPickerProps {
@@ -49,8 +50,48 @@ export function PartyPicker({
   const [quickAddLastName, setQuickAddLastName] = useState("");
   const [quickAddEmail, setQuickAddEmail] = useState("");
   const [quickAddPhone, setQuickAddPhone] = useState("");
+  const [quickAddSecondaryContact, setQuickAddSecondaryContact] = useState("");
+  const [quickAddGender, setQuickAddGender] = useState("");
+  const [quickAddDOB, setQuickAddDOB] = useState("");
+  const [quickAddCurrencyId, setQuickAddCurrencyId] = useState<string | number | undefined>(undefined);
+  const [quickAddCurrencyDisplay, setQuickAddCurrencyDisplay] = useState<any>(null);
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
   const [isCreating, setIsCreating] = useState(false);
 
+  const hasInitializedQuickAddCurrency = useRef(false);
+
+  useEffect(() => {
+    if (isQuickAddOpen && !hasInitializedQuickAddCurrency.current) {
+      hasInitializedQuickAddCurrency.current = true;
+      sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/settings`, method: 'GET' })
+        .then((res: any) => {
+          if (res.responseData?.is_success && res.responseData?.result) {
+            const configs = Array.isArray(res.responseData.result) ? res.responseData.result : res.responseData.result.data;
+            const baseConfig = configs?.find((c: any) => c.key === 'base_currency');
+            if (baseConfig?.resolved_item) {
+              const currency = baseConfig.resolved_item;
+              setQuickAddCurrencyId(currency.id);
+              setQuickAddCurrencyDisplay({ id: currency.id, code: currency.code, displayLabel: `${currency.code} — ${currency.name}` });
+            } else if (baseConfig?.value) {
+              // Fallback just in case
+              const baseId = baseConfig.value;
+              sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/currencies`, method: 'GET', params: { search: '' } })
+                .then((cRes: any) => {
+                  if (cRes.responseData?.is_success && cRes.responseData?.result?.data) {
+                    const cData = Array.isArray(cRes.responseData.result.data) ? cRes.responseData.result.data : cRes.responseData.result;
+                    const baseCurrency = cData.find((c: any) => String(c.id) === String(baseId));
+                    if (baseCurrency) {
+                      setQuickAddCurrencyId(baseCurrency.id);
+                      setQuickAddCurrencyDisplay({ id: baseCurrency.id, code: baseCurrency.code, displayLabel: `${baseCurrency.code} — ${baseCurrency.name}` });
+                    }
+                  }
+                });
+            }
+          }
+        });
+    }
+  }, [isQuickAddOpen]);
+
   const fetchData = useCallback(async (query: string = "") => {
     setIsLoading(true);
     try {
@@ -90,12 +131,17 @@ export function PartyPicker({
   const handleQuickAdd = async () => {
     if (!quickAddFirstName.trim()) return;
     setIsCreating(true);
+    setErrors({});
     try {
       const payload = { 
         first_name: quickAddFirstName.trim(),
         last_name: quickAddLastName.trim() || undefined,
         email: quickAddEmail.trim() || undefined,
         primary_contact: quickAddPhone.trim() || undefined,
+        secondary_contact: quickAddSecondaryContact.trim() || undefined,
+        gender: quickAddGender || undefined,
+        date_of_birth: quickAddDOB || undefined,
+        default_currency_id: quickAddCurrencyId || undefined,
         type: [partyType === "all" ? "customer" : partyType],
         status: "active"
       };
@@ -110,7 +156,13 @@ export function PartyPicker({
         setQuickAddLastName("");
         setQuickAddEmail("");
         setQuickAddPhone("");
+        setQuickAddSecondaryContact("");
+        setQuickAddGender("");
+        setQuickAddDOB("");
+        setErrors({});
         setIsOpen(false);
+      } else if ((res as any).errors) {
+        setErrors((res as any).errors);
       } else {
         toast.error(res.message || "Failed to create");
       }
@@ -157,6 +209,10 @@ export function PartyPicker({
               setQuickAddLastName(""); 
               setQuickAddEmail("");
               setQuickAddPhone("");
+              setQuickAddSecondaryContact("");
+              setQuickAddGender("");
+              setQuickAddDOB("");
+              setErrors({});
             }}
             className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
             title={`Quick Add ${label}`}
@@ -207,12 +263,14 @@ export function PartyPicker({
               placeholder={`Enter ${label.toLowerCase()} first name`}
               value={quickAddFirstName}
               onChange={(e) => setQuickAddFirstName(e.target.value)}
+              error={errors.first_name?.[0]}
             />
             <Input
               label="Last Name"
               placeholder={`Enter ${label.toLowerCase()} last name`}
               value={quickAddLastName}
               onChange={(e) => setQuickAddLastName(e.target.value)}
+              error={errors.last_name?.[0]}
             />
           </div>
           <div className="grid grid-cols-2 gap-3">
@@ -222,14 +280,76 @@ export function PartyPicker({
               placeholder="Email address"
               value={quickAddEmail}
               onChange={(e) => setQuickAddEmail(e.target.value)}
+              error={errors.email?.[0]}
             />
             <Input
-              label="Phone"
-              placeholder="Phone number"
+              label="Primary Contact"
+              placeholder="Primary phone number"
               value={quickAddPhone}
               onChange={(e) => setQuickAddPhone(e.target.value)}
+              error={errors.primary_contact?.[0]}
             />
           </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              label="Secondary Contact"
+              placeholder="Alternative phone (optional)"
+              value={quickAddSecondaryContact}
+              onChange={(e) => setQuickAddSecondaryContact(e.target.value)}
+              error={errors.secondary_contact?.[0]}
+            />
+            <Input
+              label="Date of Birth"
+              type="date"
+              value={quickAddDOB}
+              onChange={(e) => setQuickAddDOB(e.target.value)}
+              error={errors.date_of_birth?.[0]}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <label className="text-sm font-semibold text-gray-700">Gender</label>
+              <select
+                value={quickAddGender}
+                onChange={(e) => setQuickAddGender(e.target.value)}
+                className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white"
+              >
+                <option value="">Select gender</option>
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+                <option value="other">Other</option>
+                <option value="prefer_not_to_say">Prefer not to say</option>
+              </select>
+              {errors.gender?.[0] && <p className="text-xs text-red-500">{errors.gender[0]}</p>}
+            </div>
+            {(partyType === "all" || partyType === "customer" || partyType === "supplier") && (
+              <AsyncSearchableSelect
+                label="Default Currency"
+                placeholder="Search currency..."
+                loadOptions={async (search, page) => {
+                  try {
+                    const res: any = await sendRequest({ 
+                      url: `${process.env.NEXT_PUBLIC_API_URL}/api/currencies`, 
+                      method: 'GET', 
+                      params: { search, page, per_page: 20 } 
+                    });
+                    if (res.responseData?.is_success && res.responseData?.result?.data) {
+                      return res.responseData.result.data.map((c: any) => ({
+                        ...c,
+                        displayLabel: `${c.code} — ${c.name}`
+                      }));
+                    }
+                    return [];
+                  } catch { return []; }
+                }}
+                option={{ label: "displayLabel", value: "id", keysToSearch: ["name", "code"] }}
+                onChange={(val) => setQuickAddCurrencyId(val as string | number)}
+                key={quickAddCurrencyDisplay ? quickAddCurrencyDisplay.code : 'empty'}
+                defaultValue={quickAddCurrencyDisplay || undefined}
+                error={errors.default_currency_id?.[0]}
+              />
+            )}
+          </div>
           <ModalFooter>
             <Button
               variant="flat"