@apptimate/ui 3.0.0 → 3.1.0

package/package.json

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

package/src/base-components/HintIcon.tsx

@@ -6,9 +6,10 @@ import { Info } from 'lucide-react';
 
 interface HintIconProps {
     text: string;
+    icon?: React.ReactNode;
 }
 
-export function HintIcon({ text }: HintIconProps) {
+export function HintIcon({ text, icon }: HintIconProps) {
     const [show, setShow] = useState(false);
     const [pos, setPos] = useState({ top: 0, left: 0, isBelow: false });
     const iconRef = React.useRef<HTMLSpanElement>(null);
@@ -40,7 +41,7 @@ export function HintIcon({ text }: HintIconProps) {
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={() => setShow(false)}
             >
-                <Info size={14} className="text-foreground-muted hover:text-foreground-1 transition-colors cursor-help" />
+                {icon ? icon : <Info size={14} className="text-foreground-muted hover:text-foreground-1 transition-colors cursor-help" />}
             </span>
             {show && typeof document !== 'undefined' && ReactDOM.createPortal(
                 <div

package/src/common-components/PaymentSection.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { cn } from "@apptimate/core-lib";
-import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle } from "lucide-react";
+import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle, AlertTriangle, CheckCircle } from "lucide-react";
+import { HintIcon } from "../base-components/HintIcon";
 
 /* ── Types (mirroring sales POS types) ── */
 
@@ -61,11 +62,13 @@ export interface PaymentSectionProps {
   materialTypes?: any[];
   /** 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[] }>;
 }
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [] }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -241,7 +244,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       {/* ── Single Mode: Entry with fields (no delete) ── */}
       {selectionMode === "single" && payments.length === 1 && (
         <PaymentEntryRow entry={payments[0]} mode={paymentModes.find((m) => m.id === payments[0].mode_id)}
-          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
+          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} fetchChequeLeaves={fetchChequeLeaves} />
       )}
 
       {/* ── Split Mode: Multi-entry UI ── */}
@@ -251,7 +254,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
             const mode = paymentModes.find((m) => m.id === entry.mode_id);
             return (
               <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts} materialTypes={materialTypes}
-                onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} />
+                onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} fetchChequeLeaves={fetchChequeLeaves} />
             );
           })}
           {/* Add split mode buttons */}
@@ -325,9 +328,10 @@ interface PaymentEntryRowProps {
   onUpdate: (updates: Partial<PaymentEntry>) => void;
   onRemove: () => void;
   showRemove?: boolean;
+  fetchChequeLeaves?: (query: string) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
-function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
+function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true, fetchChequeLeaves }: PaymentEntryRowProps) {
   const fields = mode?.field_config?.fields || [];
 
   const getModeIcon = () => {
@@ -369,9 +373,24 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
         <div className="grid grid-cols-2 gap-2.5">
           {fields.map((field: PaymentModeField) => (
             <div key={field.key} className="flex flex-col gap-1">
-              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider">
+              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
                 {field.label}
                 {field.required && <span className="text-danger-alt ml-0.5">*</span>}
+                {field.key === "cheque_number" && fetchChequeLeaves && !!entry.metadata[field.key] && (
+                  <span className="ml-1.5 flex items-center">
+                    {entry.metadata.cheque_leaf_id ? (
+                      <HintIcon 
+                        text="Selected from your cheque book. This will be automatically issued."
+                        icon={<CheckCircle size={13} className="text-green-500" />}
+                      />
+                    ) : (
+                      <HintIcon 
+                        text="Not selected from cheque book. This cheque will not be auto-issued."
+                        icon={<AlertTriangle size={13} className="text-amber-500" />}
+                      />
+                    )}
+                  </span>
+                )}
               </label>
               {field.type === "bank_account_select" ? (
                 <select value={entry.metadata[field.key] || ""}
@@ -389,6 +408,21 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   <option value="">Select Material...</option>
                   {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}
+                />
               ) : (
                 <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
                   {...(field.type === "number" ? { step: "any" } : {})}
@@ -404,3 +438,109 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
     </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>
+  );
+}