@apptimate/ui 2.0.0 → 2.2.0

package/package.json

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

package/src/common-components/PaymentSection.tsx

@@ -9,8 +9,9 @@ import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCir
 export interface PaymentModeField {
   key: string;
   label: string;
-  type: "text" | "number" | "date" | "bank_account_select";
+  type: "text" | "number" | "date" | "bank_account_select" | "material_type_select";
   required: boolean;
+  readonly?: boolean;
 }
 
 export interface PaymentMode {
@@ -56,11 +57,15 @@ export interface PaymentSectionProps {
   fetchPaymentModes: () => Promise<{ is_success: boolean; result?: any }>;
   /** Fetcher for bank accounts */
   fetchBankAccounts: () => Promise<{ is_success: boolean; result?: any }>;
+  /** Optional array of material types for the material_type_select field */
+  materialTypes?: any[];
+  /** Special mode codes that are allowed (e.g. 'credit-gold') */
+  allowedSpecialModes?: string[];
 }
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [] }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -72,7 +77,9 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       setIsLoading(true);
       try {
         const [modesRes, bankRes] = await Promise.all([fetchPaymentModes(), fetchBankAccounts()]);
-        const modes: PaymentMode[] = modesRes.is_success ? (modesRes.result || []) : [];
+        const modesRaw: PaymentMode[] = modesRes.is_success ? (modesRes.result || []) : [];
+        const SPECIAL_MODES = ["credit-gold"];
+        const modes = modesRaw.filter((m) => !SPECIAL_MODES.includes(m.code) || allowedSpecialModes.includes(m.code));
         setPaymentModes(modes);
         if (bankRes.is_success) setBankAccounts(bankRes.result || []);
 
@@ -98,12 +105,12 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   const balance = useMemo(() => totalAmount - totalPaid, [totalAmount, totalPaid]);
   const formatCurrency = (v: number) => v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 
-  // ── Mode icon ──
   const getModeIcon = useCallback((code: string, size = 14) => {
     switch (code) {
       case "cash": return <Banknote size={size} />;
       case "card": return <CreditCard size={size} />;
       case "bank_transfer": return <Building size={size} />;
+      case "credit-gold": return <AlertCircle size={size} />; // Fallback, better to use something else if available
       default: return <CreditCard size={size} />;
     }
   }, []);
@@ -219,7 +226,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} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
+          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
       )}
 
       {/* ── Split Mode: Multi-entry UI ── */}
@@ -228,7 +235,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           {payments.map((entry, idx) => {
             const mode = paymentModes.find((m) => m.id === entry.mode_id);
             return (
-              <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts}
+              <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts} materialTypes={materialTypes}
                 onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} />
             );
           })}
@@ -299,12 +306,13 @@ interface PaymentEntryRowProps {
   entry: PaymentEntry;
   mode?: PaymentMode;
   bankAccounts: BankAccount[];
+  materialTypes?: any[];
   onUpdate: (updates: Partial<PaymentEntry>) => void;
   onRemove: () => void;
   showRemove?: boolean;
 }
 
-function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
+function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
   const fields = mode?.field_config?.fields || [];
 
   const getModeIcon = () => {
@@ -312,6 +320,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRe
       case "cash": return <Banknote size={13} />;
       case "card": return <CreditCard size={13} />;
       case "bank_transfer": return <Building size={13} />;
+      case "credit-gold": return <AlertCircle size={13} />;
       default: return <CreditCard size={13} />;
     }
   };
@@ -352,15 +361,26 @@ function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRe
               {field.type === "bank_account_select" ? (
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
-                  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={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>
                   {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
                 </select>
+              ) : field.type === "material_type_select" ? (
+                <select value={entry.metadata[field.key] || ""}
+                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(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 Material...</option>
+                  {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
+                </select>
               ) : (
                 <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
+                  {...(field.type === "number" ? { step: "any" } : {})}
                   value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
-                  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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
+                  readOnly={field.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 [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>
           ))}