@apptimate/ui 6.3.0 → 6.4.0

package/package.json

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

package/src/base-components/SearchableSelect.tsx

@@ -57,6 +57,8 @@ export interface SearchableSelectProps<T = Record<string, unknown>> {
     allowClear?: boolean;
     /** Disabled state */
     disabled?: boolean;
+    /** Required state */
+    required?: boolean;
     /** Label text above the select */
     label?: string;
     /** Error message below the select */

package/src/common-components/PaymentSection.tsx

@@ -405,6 +405,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
                   disabled={field.readonly}
+                  required={field.required}
                   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>))}
@@ -413,6 +414,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
                   disabled={field.readonly}
+                  required={field.required}
                   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>))}
@@ -421,6 +423,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
                   disabled={field.readonly}
+                  required={field.required}
                   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>))}
@@ -445,6 +448,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                     });
                   }}
                   disabled={field.readonly}
+                  required={field.required}
                   placeholder="Select..."
                   loadOptions={async () => field.options || []}
                 />
@@ -488,6 +492,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                     }}
                     placeholder="Search cheque number..."
                     disabled={field.readonly}
+                    required={field.required}
                   />
                   {entry.metadata._display_bank_name && (
                     <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
@@ -502,6 +507,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
                   readOnly={field.readonly}
+                  required={field.required}
                   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>

package/src/common-components/pickers/modals/SerialSelectionModal.tsx

@@ -13,6 +13,7 @@ interface SerialSelectionModalProps {
   variant: TransactionItemVariant | null;
   allowCreate?: boolean;
   initialSerials?: string[];
+  initialSerialObjects?: {id: number, serial_number: string}[];
   warehouseId?: number;
   onConfirm: (serials: string[], serialObjects?: {id: number, serial_number: string}[]) => void;
 }
@@ -24,10 +25,12 @@ export function SerialSelectionModal({
   variant,
   allowCreate = false,
   initialSerials = [],
+  initialSerialObjects = [],
   warehouseId,
   onConfirm
 }: SerialSelectionModalProps) {
   const [serials, setSerials] = useState<string[]>([]);
+  const [selectedSerialObjects, setSelectedSerialObjects] = useState<{id: number, serial_number: string}[]>([]);
   const [inputValue, setInputValue] = useState("");
   const [availableSerials, setAvailableSerials] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -35,6 +38,7 @@ export function SerialSelectionModal({
   useEffect(() => {
     if (isOpen) {
       setSerials(initialSerials);
+      setSelectedSerialObjects(initialSerialObjects);
       setInputValue("");
     }
   }, [isOpen, item, allowCreate]);
@@ -81,6 +85,7 @@ export function SerialSelectionModal({
 
   const handleAddSerial = (e?: React.FormEvent) => {
     e?.preventDefault();
+    e?.stopPropagation();
     // Allow comma or space separated parsing
     const rawTokens = inputValue.split(/[\s,]+/);
     let addedCount = 0;
@@ -106,11 +111,13 @@ export function SerialSelectionModal({
     setSerials(serials.filter(v => v !== s));
   };
 
-  const toggleSelectSerial = (s: string) => {
-    if (serials.includes(s)) {
-      setSerials(serials.filter(v => v !== s));
+  const toggleSelectSerial = (s: any) => {
+    if (serials.includes(s.serial_number)) {
+      setSerials(serials.filter(v => v !== s.serial_number));
+      setSelectedSerialObjects(prev => prev.filter(v => v.serial_number !== s.serial_number));
     } else {
-      setSerials([...serials, s]);
+      setSerials([...serials, s.serial_number]);
+      setSelectedSerialObjects(prev => [...prev, { id: s.id, serial_number: s.serial_number }]);
     }
   };
 
@@ -121,10 +128,9 @@ export function SerialSelectionModal({
     }
     
     if (!allowCreate) {
-      const serialObjects = availableSerials
-        .filter(s => serials.includes(s.serial_number))
-        .map(s => ({ id: s.id, serial_number: s.serial_number }));
-      onConfirm(serials, serialObjects);
+      // Ensure we only pass objects that are currently in the selected serials array
+      const finalObjects = selectedSerialObjects.filter(obj => serials.includes(obj.serial_number));
+      onConfirm(serials, finalObjects);
     } else {
       onConfirm(serials);
     }
@@ -172,7 +178,11 @@ export function SerialSelectionModal({
 
             <div className="flex flex-col border border-border-subtle rounded-xl overflow-hidden bg-surface-0 min-h-[250px] shadow-sm">
               <div className="p-3 border-b border-border-subtle bg-surface-hover">
-                <form onSubmit={handleAddSerial} className="flex gap-2">
+                <form 
+                  onSubmit={handleAddSerial} 
+                  onKeyDown={(e) => e.key === 'Enter' && e.stopPropagation()}
+                  className="flex gap-2"
+                >
                   <input
                     type="text"
                     autoFocus
@@ -233,7 +243,7 @@ export function SerialSelectionModal({
                         type="checkbox"
                         className="w-4 h-4 rounded border-border-subtle text-primary focus:ring-primary"
                         checked={serials.includes(s.serial_number)}
-                        onChange={() => toggleSelectSerial(s.serial_number)}
+                        onChange={() => toggleSelectSerial(s)}
                       />
                       <span className="font-mono text-[13px] text-foreground-1">{s.serial_number}</span>
                     </label>

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

@@ -155,7 +155,7 @@ export function MetadataPanel({
             onChange={(p) => onPartyChange(p?.id ?? null, p ? { id: p.id, name: p.name, code: p.code, type: p.type } : undefined)}
             label={config.partyLabel}
             partyType={config.partyType}
-            isRequired
+            isRequired={config.type !== 'pos'}
             disabled={config.disablePartySelection}
           />
         )
@@ -248,8 +248,8 @@ export function MetadataPanel({
 
       {/* ── Submit Button ── */}
       <Button
+        type="submit"
         color="primary"
-        onClick={onSubmit}
         isDisabled={lineItems.length === 0}
         isLoading={isSubmitting}
         className="!w-full !py-4 !text-[14px] !font-semibold !rounded-[10px]"