@apptimate/ui 3.2.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
@@ -21,4 +21,4 @@
   "peerDependencies": {
     "next": "^16.0.0"
   }
-}
+}

package/src/base-components/FinanceErrorToast.tsx

@@ -1,23 +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);
-  }
-};
+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/common-components/DashboardLayout.tsx

@@ -124,14 +124,42 @@ export function DashboardLayout({
           {logo}
         </div>
 
-        <nav className="flex flex-col gap-6 flex-1 w-full">
+        <style dangerouslySetInnerHTML={{
+          __html: `
+          .sidebar-scroll {
+            overflow-y: hidden;
+          }
+          .sidebar-scroll:hover {
+            overflow-y: auto;
+          }
+          /* Custom Scrollbar for Webkit */
+          .sidebar-scroll::-webkit-scrollbar {
+            width: 4px;
+          }
+          .sidebar-scroll::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          .sidebar-scroll::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+          }
+          /* For Firefox */
+          .sidebar-scroll {
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+          }
+          .sidebar-scroll:hover {
+            scrollbar-color: #cbd5e1 transparent;
+          }
+        `}} />
+        <nav className="flex flex-col gap-6 flex-1 w-full sidebar-scroll pb-4">
           {menus.map((menu) => {
             const isActive = activeMenuId === menu.id;
             return (
               <div
                 key={menu.id}
                 onClick={() => setActiveMenuId(menu.id)}
-                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
+                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]"
                   }`}
               >
                 {/* Clone the icon to dynamically apply styling based on active state */}
@@ -139,7 +167,7 @@ export function DashboardLayout({
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] text-center leading-tight px-1 ${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" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}

package/src/common-components/PaymentSection.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import { cn } from "@apptimate/core-lib";
 import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle, AlertTriangle, CheckCircle } from "lucide-react";
 import { HintIcon } from "../base-components/HintIcon";
+import { AsyncSearchableSelect } from "../base-components/SearchableSelect";
 
 /* ── Types (mirroring sales POS types) ── */
 
@@ -63,7 +64,7 @@ export interface PaymentSectionProps {
   /** Special mode codes that are allowed (e.g. 'credit-gold') */
   allowedSpecialModes?: string[];
   /** Fetcher for cheque leaves (for auto-complete) */
-  fetchChequeLeaves?: (query: string) => Promise<{ is_success: boolean; result?: any[] }>;
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
 /* ── Component ── */
@@ -328,7 +329,7 @@ interface PaymentEntryRowProps {
   onUpdate: (updates: Partial<PaymentEntry>) => void;
   onRemove: () => void;
   showRemove?: boolean;
-  fetchChequeLeaves?: (query: string) => Promise<{ is_success: boolean; result?: any[] }>;
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
 function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true, fetchChequeLeaves }: PaymentEntryRowProps) {
@@ -371,7 +372,12 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
       {/* Dynamic sub-fields from field_config */}
       {fields.length > 0 && (
         <div className="grid grid-cols-2 gap-2.5">
-          {fields.map((field: PaymentModeField) => (
+          {fields.map((field: PaymentModeField) => {
+            if ((field.key === "bank_account_id" || field.key === "bank_name") && entry.mode_code === "cheque" && fetchChequeLeaves) {
+              return null;
+            }
+
+            return (
             <div key={field.key} className="flex flex-col gap-1">
               <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
                 {field.label}
@@ -409,20 +415,53 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
                 </select>
               ) : field.key === "cheque_number" && fetchChequeLeaves ? (
-                <ChequeAutocomplete
-                  value={String(entry.metadata[field.key] || "")}
-                  onChange={(val, leafId, suggestion) => {
-                    const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafId || "" };
-                    if (suggestion?.cheque_book?.bank_account) {
-                      const ba = suggestion.cheque_book.bank_account;
-                      if (ba.bank_name) newMetadata.bank_name = ba.bank_name;
-                      if (ba.branch) newMetadata.branch = ba.branch;
-                    }
-                    onUpdate({ metadata: newMetadata });
-                  }}
-                  fetchChequeLeaves={fetchChequeLeaves}
-                  readonly={field.readonly}
-                />
+                <>
+                  <AsyncSearchableSelect
+                    defaultValue={entry.metadata[field.key] ? { cheque_number: entry.metadata[field.key] } : undefined}
+                    onChange={(val, selected: any) => {
+                      const leafObj = Array.isArray(selected) ? selected[0] : selected;
+                      const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafObj?.id || "" };
+                      if (leafObj?.cheque_book?.bank_account) {
+                        const ba = leafObj.cheque_book.bank_account;
+                        newMetadata.bank_account_id = ba.id;
+                        newMetadata._display_bank_name = ba.bank_name;
+                        newMetadata._display_branch = ba.branch;
+                      } else {
+                        delete newMetadata.bank_account_id;
+                        delete newMetadata._display_bank_name;
+                        delete newMetadata._display_branch;
+                      }
+                      onUpdate({ metadata: newMetadata });
+                    }}
+                    loadOptions={async (search, page) => {
+                      if (!fetchChequeLeaves) return [];
+                      const res = await fetchChequeLeaves(search, page);
+                      return res.is_success && res.result ? res.result : [];
+                    }}
+                    option={{
+                      label: "cheque_number",
+                      value: "cheque_number",
+                      renderOption: (item: any) => (
+                        <div className="flex flex-col">
+                          <span>{item.cheque_number}</span>
+                          {item.cheque_book?.bank_account?.bank_name && (
+                            <span className="text-[11px] text-foreground-subtle mt-0.5">
+                              {item.cheque_book.bank_account.bank_name} {item.cheque_book.bank_account.branch ? `— ${item.cheque_book.bank_account.branch}` : ""}
+                            </span>
+                          )}
+                        </div>
+                      )
+                    }}
+                    placeholder="Search cheque number..."
+                    disabled={field.readonly}
+                  />
+                  {entry.metadata._display_bank_name && (
+                    <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
+                      <Building size={12} className="text-foreground-disabled" />
+                      {entry.metadata._display_bank_name} {entry.metadata._display_branch ? `— ${entry.metadata._display_branch}` : ""}
+                    </div>
+                  )}
+                </>
               ) : (
                 <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
                   {...(field.type === "number" ? { step: "any" } : {})}
@@ -432,113 +471,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
               )}
             </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── ChequeAutocomplete ── */
-
-function ChequeAutocomplete({ 
-  value, 
-  onChange, 
-  fetchChequeLeaves, 
-  readonly 
-}: { 
-  value: string; 
-  onChange: (val: string, leafId?: number, suggestion?: any) => void; 
-  fetchChequeLeaves: (q: string) => Promise<{ is_success: boolean; result?: any[] }>; 
-  readonly?: boolean; 
-}) {
-  const [query, setQuery] = useState(value);
-  const [suggestions, setSuggestions] = useState<any[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setQuery(value);
-  }, [value]);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const fetchSuggestions = useCallback(async (search: string) => {
-    setIsLoading(true);
-    try {
-      const res = await fetchChequeLeaves(search);
-      if (res.is_success && res.result) {
-        setSuggestions(res.result);
-        setIsOpen(true);
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [fetchChequeLeaves]);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const timer = setTimeout(() => {
-      fetchSuggestions(query);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [query, isOpen, fetchSuggestions]);
-
-  return (
-    <div ref={wrapperRef} className="relative">
-      <input 
-        type="text"
-        value={query}
-        onChange={(e) => {
-          setQuery(e.target.value);
-          onChange(e.target.value, undefined, undefined); // reset ID when typed manually
-          setIsOpen(true);
-        }}
-        onFocus={() => {
-          if (!readonly) {
-            setIsOpen(true);
-            fetchSuggestions(query);
-          }
-        }}
-        readOnly={readonly}
-        className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all", readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} 
-        placeholder="Type to search cheques..."
-      />
-      {isLoading && (
-        <div className="absolute right-2 top-2.5">
-          <Loader2 size={14} className="animate-spin text-foreground-subtle" />
-        </div>
-      )}
-      {isOpen && suggestions.length > 0 && !readonly && (
-        <div className="absolute z-50 mt-1 w-full bg-surface-0 border border-border-subtle rounded-[8px] shadow-lg max-h-48 overflow-y-auto">
-          {suggestions.map((s) => (
-            <div 
-              key={s.id} 
-              className="px-3 py-2 text-[12px] text-foreground-1 hover:bg-primary/5 hover:text-primary cursor-pointer transition-colors"
-              onClick={() => {
-                setQuery(s.cheque_number);
-                onChange(s.cheque_number, s.id, s);
-                setIsOpen(false);
-              }}
-            >
-              <div className="font-semibold">{s.cheque_number}</div>
-              <div className="text-[10px] text-foreground-subtle flex items-center gap-2">
-                {s.cheque_book?.bank_account?.bank_name && <span>{s.cheque_book.bank_account.bank_name}</span>}
-                {s.amount && <span>Amount: {s.amount}</span>}
-              </div>
-            </div>
-          ))}
+          )})}
         </div>
       )}
     </div>