@apptimate/ui 4.5.0 → 4.7.0

package/package.json

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

package/src/base-components/SearchableSelect.tsx

@@ -49,6 +49,8 @@ export interface SearchableSelectProps<T = Record<string, unknown>> {
     creatable?: CreatableConfig<T>;
     /** Additional className on the outer wrapper */
     className?: string;
+    /** Additional className on the control div (the trigger) */
+    controlClassName?: string;
     /** Enable search filtering (default: true) */
     isSearchable?: boolean;
     /** Show clear button when a value is selected */
@@ -119,6 +121,7 @@ function SelectCore<T extends Record<string, unknown>>({
     error,
     isRequired,
     surface = 0,
+    controlClassName,
 }: SelectCoreProps<T>) {
     const opt = { ...DEFAULT_OPTION_CONFIG, ...optionConfig } as SearchableSelectOptionConfig<T>;
 
@@ -560,11 +563,11 @@ function SelectCore<T extends Record<string, unknown>>({
                         )}
 
                         {/* Option label */}
-                        <span className="truncate">
+                        <div className="flex-1 min-w-0">
                             {opt.renderOption
                                 ? opt.renderOption(item)
-                                : getLabel(item)}
-                        </span>
+                                : <span className="truncate block">{getLabel(item)}</span>}
+                        </div>
                     </li>
                 ))}
 
@@ -616,6 +619,7 @@ function SelectCore<T extends Record<string, unknown>>({
                     ref={controlRef}
                     className={cn(
                         'w-full border-[1.5px] rounded-[10px] px-3.5 py-2.5 flex items-center gap-2 cursor-pointer transition-all min-h-[42px]',
+                        controlClassName,
                         isOpen
                             ? `border-gray-300 bg-surface-${surface === 0 ? 1 : 2}`
                             : `border-border-subtle bg-surface-${surface} hover:border-gray-300`,

package/src/common-components/PaymentSection.tsx

@@ -11,9 +11,10 @@ import { AsyncSearchableSelect } from "../base-components/SearchableSelect";
 export interface PaymentModeField {
   key: string;
   label: string;
-  type: "text" | "number" | "date" | "bank_account_select" | "material_type_select";
+  type: "text" | "number" | "date" | "bank_account_select" | "material_type_select" | "select" | "multi_select";
   required: boolean;
   readonly?: boolean;
+  options?: { label: string; value: string }[];
 }
 
 export interface PaymentMode {
@@ -65,11 +66,13 @@ export interface PaymentSectionProps {
   allowedSpecialModes?: string[];
   /** Fetcher for cheque leaves (for auto-complete) */
   fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
+  /** UI Variant */
+  variant?: "default" | "advance";
 }
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves, variant = "default" }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -280,14 +283,14 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       {/* ── Totals ── */}
       {payments.length > 0 && (
         <div className="bg-surface-0 rounded-[12px] border border-border-subtle p-4 space-y-2">
-          <TotalRow label="Amount to Pay" value={formatCurrency(totalAmount)} bold />
+          <TotalRow label={variant === "advance" ? "Target Amount" : "Amount to Pay"} value={formatCurrency(totalAmount)} bold />
           <div className="border-t border-border-subtle my-2" />
           <TotalRow label="Total Paid" value={formatCurrency(totalPaid)} />
           {creditAmount > 0.01 && (
             <TotalRow label="Credit Amount" value={formatCurrency(creditAmount)} className="text-amber-600" />
           )}
           <TotalRow
-            label={balance > 0.01 ? "Outstanding Balance" : balance < -0.01 ? "Change Due" : "Settled"}
+            label={balance > 0.01 ? "Outstanding Balance" : balance < -0.01 ? "Change Due" : (variant === "advance" ? "Matched" : "Settled")}
             value={formatCurrency(Math.abs(balance))}
             className={balance > 0.01 ? "text-danger-alt" : "text-green-600"}
             bold
@@ -299,7 +302,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           )}
           {Math.abs(balance) < 0.01 && creditAmount <= 0.01 && (
             <div className="flex items-center gap-1.5 mt-1 text-[11px] text-green-600 font-medium">
-              <Check size={12} /><span>Fully paid</span>
+              <Check size={12} /><span>{variant === "advance" ? "Amount matched" : "Fully paid"}</span>
             </div>
           )}
         </div>
@@ -365,8 +368,8 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
       <div className="flex flex-col gap-1">
         <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider">Amount</label>
         <input type="number" value={entry.amount || ""} onChange={(e) => onUpdate({ amount: Number(e.target.value) || 0 })}
-          className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-3 py-2.5 text-[13px] font-medium 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"
-          step="0.01" min={0} />
+          className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-3 py-2.5 text-[13px] font-medium 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 disabled:opacity-50 disabled:cursor-not-allowed"
+          step="0.01" min={0} disabled={entry.mode_code === "advance"} />
       </div>
 
       {/* Dynamic sub-fields from field_config */}
@@ -414,6 +417,37 @@ 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.type === "select" ? (
+                <select value={entry.metadata[field.key] || ""}
+                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
+                  disabled={field.readonly}
+                  className="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 disabled:opacity-50 disabled:cursor-not-allowed">
+                  <option value="">Select...</option>
+                  {field.options?.map((o) => (<option key={o.value} value={o.value}>{o.label}</option>))}
+                </select>
+              ) : field.type === "multi_select" as any ? (
+                <AsyncSearchableSelect
+                  multiple
+                  option={{ label: 'label', value: 'value' }}
+                  defaultValue={
+                    Array.isArray(entry.metadata[field.key])
+                      ? (field.options || []).filter(o => (entry.metadata[field.key] as any).includes(o.value))
+                      : []
+                  }
+                  onChange={(val, selectedObjs: any) => {
+                    const sum = Array.isArray(selectedObjs) 
+                      ? selectedObjs.reduce((acc, curr) => acc + (curr.unapplied_amount || 0), 0)
+                      : 0;
+                    
+                    onUpdate({ 
+                      amount: sum, 
+                      metadata: { ...entry.metadata, [field.key]: val as any } 
+                    });
+                  }}
+                  disabled={field.readonly}
+                  placeholder="Select..."
+                  loadOptions={async () => field.options || []}
+                />
               ) : field.key === "cheque_number" && fetchChequeLeaves ? (
                 <>
                   <AsyncSearchableSelect

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

@@ -172,6 +172,7 @@ export interface PickerTriggerProps {
   placeholder?: string;
   isRequired?: boolean;
   error?: string;
+  disabled?: boolean;
   onClick: () => void;
   onClear?: () => void;
 }
@@ -182,6 +183,7 @@ export function PickerTrigger({
   placeholder = "Select…",
   isRequired = false,
   error,
+  disabled = false,
   onClick,
   onClear,
 }: PickerTriggerProps) {
@@ -193,10 +195,12 @@ export function PickerTrigger({
       </label>
       <button
         type="button"
+        disabled={disabled}
         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
-          ${error 
+          ${disabled ? "opacity-60 cursor-not-allowed bg-surface-hover" : ""}
+          ${error && !disabled
             ? "border-red-500 text-red-500" 
             : value
               ? "border-border-subtle text-foreground-1"

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

@@ -18,6 +18,7 @@ interface PartyPickerProps {
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
+  disabled?: boolean;
   partyType?: "customer" | "supplier" | "all" | "artisan";
   customTrigger?: (onClick: () => void) => React.ReactNode;
 }
@@ -29,6 +30,7 @@ export function PartyPicker({
   label = "Party",
   placeholder = "Select party…",
   isRequired = false,
+  disabled = false,
   partyType = "all",
   customTrigger,
 }: PartyPickerProps) {
@@ -126,6 +128,7 @@ export function PartyPicker({
           value={displayValue || null}
           placeholder={placeholder}
           isRequired={isRequired}
+          disabled={disabled}
           onClick={handleOpen}
           onClear={value ? handleClear : undefined}
         />

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

@@ -18,6 +18,7 @@ interface WarehousePickerProps {
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
+  disabled?: boolean;
   fetchFromAllUserOrgs?: boolean;
 }
 
@@ -28,6 +29,7 @@ export function WarehousePicker({
   label = "Warehouse",
   placeholder = "Select warehouse…",
   isRequired = false,
+  disabled = false,
   fetchFromAllUserOrgs = false,
 }: WarehousePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -86,6 +88,7 @@ export function WarehousePicker({
         value={displayValue || null}
         placeholder={placeholder}
         isRequired={isRequired}
+        disabled={disabled}
         onClick={handleOpen}
         onClear={value ? handleClear : undefined}
       />

package/src/common-components/transaction/MetadataPanel.tsx

@@ -146,6 +146,7 @@ export function MetadataPanel({
             label={config.partyLabel}
             isRequired
             fetchFromAllUserOrgs={true}
+            disabled={config.disablePartySelection}
           />
         ) : (
           <PartyPicker
@@ -155,6 +156,7 @@ export function MetadataPanel({
             label={config.partyLabel}
             partyType={config.partyType}
             isRequired
+            disabled={config.disablePartySelection}
           />
         )
       )}
@@ -167,6 +169,7 @@ export function MetadataPanel({
           onChange={(w) => onWarehouseChange(w?.id ?? null, w?.name)}
           label="Warehouse"
           isRequired
+          disabled={config.disableWarehouseSelection}
         />
       )}
 
@@ -187,7 +190,7 @@ export function MetadataPanel({
 
       {/* ── Expected Delivery Date ── */}
       {config.showExpectedDeliveryDate && onExpectedDeliveryDateChange && (
-        <Section label="Expected Delivery">
+        <Section label={config.expectedDeliveryDateLabel || "Expected Delivery"}>
           <div className="relative">
             <Calendar size={15} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-foreground-disabled pointer-events-none" />
             <input