@apptimate/ui 4.3.0 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "4.3.0",
+  "version": "4.5.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/EntityPickerModal.tsx

@@ -171,6 +171,7 @@ export interface PickerTriggerProps {
   value?: string | null;
   placeholder?: string;
   isRequired?: boolean;
+  error?: string;
   onClick: () => void;
   onClear?: () => void;
 }
@@ -180,6 +181,7 @@ export function PickerTrigger({
   value,
   placeholder = "Select…",
   isRequired = false,
+  error,
   onClick,
   onClear,
 }: PickerTriggerProps) {
@@ -194,9 +196,11 @@ export function PickerTrigger({
         onClick={onClick}
         className={`
           w-full flex items-center justify-between px-3.5 py-2.5 bg-surface-0 border-[1.5px] rounded-[10px] text-[13.5px] text-left transition-all
-          ${value
-            ? "border-border-subtle text-foreground-1"
-            : "border-border-subtle text-foreground-disabled"
+          ${error 
+            ? "border-red-500 text-red-500" 
+            : value
+              ? "border-border-subtle text-foreground-1"
+              : "border-border-subtle text-foreground-disabled"
           }
           hover:border-gray-300 focus:outline-none focus:border-gray-300 focus:bg-surface-1
         `}
@@ -216,6 +220,7 @@ export function PickerTrigger({
           <Search size={14} className="text-gray-400" />
         </div>
       </button>
+      {error && <span className="text-xs text-red-500 mt-0.5">{error}</span>}
     </div>
   );
 }

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

@@ -18,7 +18,8 @@ interface PartyPickerProps {
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
-  partyType?: "customer" | "supplier" | "all";
+  partyType?: "customer" | "supplier" | "all" | "artisan";
+  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}