@apptimate/ui 4.3.0 → 4.4.0

package/package.json

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

package/src/common-components/DashboardLayout.tsx

@@ -179,7 +179,7 @@ export function DashboardLayout({
             return (
               <div
                 key={menu.id}
-                onClick={() => handleMainMenuSelect(menu)}
+                onClick={() => setActiveMenuId(menu.id)}
                 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]"
                   }`}
               >

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

@@ -19,6 +19,7 @@ interface PartyPickerProps {
   placeholder?: string;
   isRequired?: boolean;
   partyType?: "customer" | "supplier" | "all";
+  customTrigger?: (onClick: () => void) => React.ReactNode;
 }
 
 export function PartyPicker({
@@ -29,6 +30,7 @@ export function PartyPicker({
   placeholder = "Select party…",
   isRequired = false,
   partyType = "all",
+  customTrigger,
 }: PartyPickerProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -43,11 +45,11 @@ export function PartyPicker({
   const [quickAddPhone, setQuickAddPhone] = useState("");
   const [isCreating, setIsCreating] = useState(false);
 
-  const fetchData = useCallback(async () => {
+  const fetchData = useCallback(async (query: string = "") => {
     setIsLoading(true);
     try {
       const typeParam = partyType === "all" ? undefined : partyType;
-      const res = await lookupParties(typeParam);
+      const res = await lookupParties({ type: typeParam, search: query, limit: 100 });
       if (res.is_success) {
         const data = res.result?.data || res.result || [];
         setParties(data.map((p: any) => ({ ...p, name: p.name || p.full_name || [p.first_name, p.last_name].filter(Boolean).join(" ") })));
@@ -56,10 +58,18 @@ export function PartyPicker({
     setIsLoading(false);
   }, [partyType]);
 
+  useEffect(() => {
+    if (isOpen) {
+      const delayFn = setTimeout(() => {
+        fetchData(search);
+      }, 300);
+      return () => clearTimeout(delayFn);
+    }
+  }, [search, isOpen, fetchData]);
+
   const handleOpen = () => {
     setSearch("");
     setIsOpen(true);
-    fetchData();
   };
 
   const handleSelect = (party: any) => {
@@ -104,21 +114,22 @@ export function PartyPicker({
     setIsCreating(false);
   };
 
-  const searchLower = (search || "").toLowerCase();
-  const filtered = parties.filter((p) =>
-    (p.name || "").toLowerCase().includes(searchLower) || (p.code || "").toLowerCase().includes(searchLower)
-  );
+  // Server-side filtering used
 
   return (
     <>
-      <PickerTrigger
-        label={label}
-        value={displayValue || null}
-        placeholder={placeholder}
-        isRequired={isRequired}
-        onClick={handleOpen}
-        onClear={value ? handleClear : undefined}
-      />
+      {customTrigger ? (
+        customTrigger(handleOpen)
+      ) : (
+        <PickerTrigger
+          label={label}
+          value={displayValue || null}
+          placeholder={placeholder}
+          isRequired={isRequired}
+          onClick={handleOpen}
+          onClear={value ? handleClear : undefined}
+        />
+      )}
 
       <EntityPickerModal
         isOpen={isOpen}
@@ -152,14 +163,14 @@ export function PartyPicker({
             <div className="inline-block h-6 w-6 rounded-full border-2 border-gray-200 border-t-primary-500 animate-spin" />
             <p className="mt-3 text-sm text-gray-400">Loading {label.toLowerCase()}s…</p>
           </div>
-        ) : filtered.length === 0 ? (
+        ) : parties.length === 0 ? (
           <div className="py-12 text-center">
             <User size={32} className="mx-auto text-gray-300 mb-2" />
             <p className="text-sm text-gray-400">No {label.toLowerCase()}s found</p>
           </div>
         ) : (
           <div className="space-y-0.5 py-1">
-            {filtered.map((party) => (
+            {parties.map((party) => (
               <PickerItem
                 key={party.id}
                 label={party.name}