@apptimate/ui 6.4.0 → 6.5.0

package/package.json

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

package/src/base-components/Checkbox.tsx

@@ -12,7 +12,11 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     ({ label, className, indeterminate, ...props }, ref) => {
         return (
-            <label className={cn("flex items-center gap-2.5 cursor-pointer select-none group", className)}>
+            <label className={cn(
+                "flex items-center gap-2.5 select-none group", 
+                props.disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+                className
+            )}>
                 <div className="relative flex items-center justify-center">
                     <input
                         ref={ref}
@@ -21,7 +25,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                         {...props}
                     />
                     <div className={cn(
-                        "w-5 h-5 bg-surface-0 border-2 border-border-subtle rounded-md transition-all peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/30 group-hover:border-primary/50 peer-disabled:opacity-50 peer-disabled:bg-surface-1 peer-disabled:border-border-default peer-disabled:cursor-not-allowed",
+                        "w-5 h-5 bg-surface-0 border-2 border-border-subtle rounded-md transition-all peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/30 group-hover:border-primary/50",
                         indeterminate && "bg-primary border-primary"
                     )} />
                     {indeterminate ? (
@@ -37,7 +41,10 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                     )}
                 </div>
                 {label && (
-                    <span className="text-[13px] font-medium text-foreground-1 leading-tight peer-disabled:text-foreground-disabled">
+                    <span className={cn(
+                        "text-[13px] font-medium leading-tight",
+                        props.disabled ? "text-foreground-muted" : "text-foreground-1"
+                    )}>
                         {label}
                     </span>
                 )}

package/src/base-components/Table.tsx

@@ -61,7 +61,7 @@ export const TCell = ({ children, className, isHeader = false, colSpan, rowSpan,
                 className
             )}>
             {label && <span className="lg:hidden text-[11px] font-bold text-gray-400 uppercase tracking-wider shrink-0 mr-4">{label}</span>}
-            <div className="flex justify-end lg:block flex-1 min-w-0 lg:w-auto">{children}</div>
+            <div className={cn("flex lg:block flex-1 min-w-0 lg:w-auto", colSpan ? "justify-center" : "justify-end")}>{children}</div>
         </Tag>
     );
 };

package/src/common-components/item-wizard/ItemFormWizard.tsx

@@ -102,13 +102,13 @@ export default function ItemFormWizard({
     sequence_length: 4,
     current_sequence: 1,
   });
-  
+
   const fetchSkuConfig = useCallback(() => {
     getInventorySetting("sku_generation_rule_v3").then((res) => {
       if (res.is_success && res.result) {
         setSkuConfig(res.result);
       }
-    }).catch(() => {});
+    }).catch(() => { });
   }, []);
 
   // Fetch initial config
@@ -133,8 +133,19 @@ export default function ItemFormWizard({
     }
   }, [formData.tracking_type, formData.valuation_method, update]);
 
+  React.useEffect(() => {
+    if (!formData.is_available_purchase && formData.valuation_method === 'mac') {
+      update('valuation_method', 'fifo');
+    }
+  }, [formData.is_available_purchase, formData.valuation_method, update]);
+
   const canNext = (): boolean => {
     if (step === 0) return Boolean(formData.name && formData.sku && formData.category_id && formData.uom_id);
+    if (step === 1 && formData.has_variants) {
+      if (!formData.attributes || formData.attributes.length === 0) return false;
+      if (formData.attributes.some(attr => !attr.name || attr.name.trim() === "")) return false;
+      if (formData.attributes.some(attr => !attr.values || attr.values.length === 0)) return false;
+    }
     return true;
   };
 
@@ -163,7 +174,7 @@ export default function ItemFormWizard({
                 <label className="text-[11px] font-normal text-gray-500 tracking-normal apptimate-input-label">
                   SKU <span className="text-danger-alt ml-0.5">*</span>
                 </label>
-                <button 
+                <button
                   type="button"
                   onClick={() => setSkuModalOpen(true)}
                   className="text-[11px] font-semibold text-gray-900 hover:text-gray-700 transition-colors"
@@ -171,10 +182,10 @@ export default function ItemFormWizard({
                   Generate
                 </button>
               </div>
-              <Input 
-                placeholder="e.g. ITM-001" 
-                value={formData.sku} 
-                onChange={(e) => update("sku", e.target.value)} 
+              <Input
+                placeholder="e.g. ITM-001"
+                value={formData.sku}
+                onChange={(e) => update("sku", e.target.value)}
               />
             </div>
           </div>
@@ -199,7 +210,7 @@ export default function ItemFormWizard({
         <div className="space-y-3">
           <UomPicker label="Stocking UOM (Base)" isRequired value={formData.uom_id || null} displayValue={formData.uom_name || null} baseUnitsOnly
             onChange={(uom: any) => setFormData((p) => ({ ...p, uom_id: uom ? String(uom.id) : "", uom_name: uom?.name || "" }))} />
-          
+
           <div className="grid grid-cols-3 gap-3">
             <Input label="Weight" type="number" placeholder="0" value={formData.weight} onChange={(e) => update("weight", e.target.value)} />
             <Select label="Weight Unit" options={[{ label: "—", value: "" }, { label: "kg", value: "kg" }, { label: "g", value: "g" }, { label: "lb", value: "lb" }, { label: "oz", value: "oz" }]}
@@ -220,29 +231,27 @@ export default function ItemFormWizard({
       <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
         <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Item Type</p>
         <div className="flex flex-wrap gap-2">
-          <button 
+          <button
             type="button"
-            disabled={isEditing && formData.can_edit_variants === false}
-            title={isEditing && formData.can_edit_variants === false ? "Cannot change item type while transactions exist" : ""}
+            disabled={isEditing}
+            title={isEditing ? "Cannot change item type of an existing item" : ""}
             onClick={() => setFormData((p) => ({ ...p, has_variants: false }))}
-            className={`px-4 py-2 rounded-lg text-sm font-semibold border-2 transition-all duration-150 ${
-              !formData.has_variants ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50"
-            } ${isEditing && formData.can_edit_variants === false ? "opacity-60 cursor-not-allowed" : ""}`}
+            className={`px-4 py-2 rounded-lg text-sm font-semibold border-2 transition-all duration-150 ${!formData.has_variants ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              } ${isEditing ? "opacity-60 cursor-not-allowed" : ""}`}
           >
             Standard Item (No Variants)
           </button>
-          <button 
+          <button
             type="button"
-            disabled={isEditing && formData.can_edit_variants === false}
-            title={isEditing && formData.can_edit_variants === false ? "Cannot change item type while transactions exist" : ""}
-            onClick={() => setFormData((p) => ({ 
-              ...p, 
+            disabled={isEditing}
+            title={isEditing ? "Cannot change item type of an existing item" : ""}
+            onClick={() => setFormData((p) => ({
+              ...p,
               has_variants: true,
-              attributes: p.attributes.length === 0 ? [{ name: "", values: [] }] : p.attributes 
+              attributes: p.attributes.length === 0 ? [{ name: "", values: [] }] : p.attributes
             }))}
-            className={`px-4 py-2 rounded-lg text-sm font-semibold border-2 transition-all duration-150 flex items-center gap-1.5 ${
-              formData.has_variants ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50"
-            } ${isEditing && formData.can_edit_variants === false ? "opacity-60 cursor-not-allowed" : ""}`}
+            className={`px-4 py-2 rounded-lg text-sm font-semibold border-2 transition-all duration-150 flex items-center gap-1.5 ${formData.has_variants ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              } ${isEditing ? "opacity-60 cursor-not-allowed" : ""}`}
           >
             Item with Variants
             <HintIcon text="Use this if the item comes in multiple options (e.g., sizes, colors)." />
@@ -255,30 +264,29 @@ export default function ItemFormWizard({
         <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
           <div className="flex items-center justify-between mb-3">
             <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Variant Attributes</p>
-            <button 
+            <button
               type="button"
-              disabled={isEditing && formData.can_edit_variants === false}
-              title={isEditing && formData.can_edit_variants === false ? "Cannot add attributes while transactions exist" : ""}
+              disabled={isEditing}
+              title={isEditing ? "Cannot add attributes to an existing item" : ""}
               onClick={() => setFormData(p => ({ ...p, attributes: [...p.attributes, { name: "", values: [] }] }))}
-              className={`flex items-center gap-1.5 text-[12px] font-semibold transition-colors ${
-                isEditing && formData.can_edit_variants === false ? "text-gray-400 cursor-not-allowed" : "text-primary-600 hover:text-primary-700"
-              }`}
+              className={`flex items-center gap-1.5 text-[12px] font-semibold transition-colors ${isEditing ? "text-gray-400 cursor-not-allowed" : "text-primary-600 hover:text-primary-700"
+                }`}
             >
               <Plus size={14} /> Add Attribute
             </button>
           </div>
-          
+
           {formData.attributes.length === 0 ? (
-             <div className="text-center py-4 text-gray-400 text-[13px]">No attributes defined. Click "Add Attribute" to add variants like Color or Size.</div>
+            <div className="text-center py-4 text-gray-400 text-[13px]">No attributes defined. Click "Add Attribute" to add variants like Color or Size.</div>
           ) : (
             <div className="space-y-4">
               {formData.attributes.map((attr, idx) => (
                 <div key={idx} className="flex flex-col sm:flex-row items-start gap-4">
                   <div className="w-full sm:w-[250px]">
-                    <Input 
-                      placeholder="e.g. Size, Color" 
+                    <Input
+                      placeholder="e.g. Size, Color"
                       value={attr.name}
-                      disabled={isEditing && formData.can_edit_variants === false}
+                      disabled={isEditing}
                       onChange={(e) => {
                         const newAttrs = [...formData.attributes];
                         newAttrs[idx] = { ...newAttrs[idx], name: e.target.value };
@@ -287,9 +295,9 @@ export default function ItemFormWizard({
                     />
                   </div>
                   <div className="flex-1 flex items-start gap-2 w-full">
-                    <TagsInput 
+                    <TagsInput
                       values={attr.values}
-                      disabled={isEditing && formData.can_edit_variants === false}
+                      disabled={isEditing}
                       onChange={(values) => {
                         const newAttrs = [...formData.attributes];
                         newAttrs[idx] = { ...newAttrs[idx], values };
@@ -299,17 +307,16 @@ export default function ItemFormWizard({
                     />
                     <button
                       type="button"
-                      disabled={isEditing && formData.can_edit_variants === false}
-                      title={isEditing && formData.can_edit_variants === false ? "Cannot remove attributes while transactions exist" : ""}
+                      disabled={isEditing}
+                      title={isEditing ? "Cannot remove attributes from an existing item" : ""}
                       onClick={() => {
                         const newAttrs = formData.attributes.filter((_, i) => i !== idx);
                         setFormData(p => ({ ...p, attributes: newAttrs }));
                       }}
-                      className={`p-2.5 rounded-lg transition-colors mt-0.5 ${
-                        isEditing && formData.can_edit_variants === false 
-                          ? "text-gray-300 cursor-not-allowed" 
+                      className={`p-2.5 rounded-lg transition-colors mt-0.5 ${isEditing
+                          ? "text-gray-300 cursor-not-allowed"
                           : "text-gray-400 hover:text-danger-alt hover:bg-danger-50"
-                      }`}
+                        }`}
                     >
                       <Trash size={16} />
                     </button>
@@ -325,41 +332,41 @@ export default function ItemFormWizard({
       <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
         <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Availability & Settings</p>
         <div className="grid grid-cols-2 sm:grid-cols-3 gap-y-3 gap-x-4">
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Available for Purchase <HintIcon text="Can be purchased from suppliers" /></span>} 
-            checked={formData.is_available_purchase} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_purchase: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Available for Purchase <HintIcon text="Can be purchased from suppliers" /></span>}
+            checked={formData.is_available_purchase}
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_purchase: e.target.checked }))}
           />
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Available for Sale <HintIcon text="Can be sold to customers" /></span>} 
-            checked={formData.is_available_sell} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_sell: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Available for Sale <HintIcon text="Can be sold to customers" /></span>}
+            checked={formData.is_available_sell}
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_sell: e.target.checked }))}
           />
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Available on E-Commerce <HintIcon text="List on online store" /></span>} 
-            checked={formData.is_available_ecommerce} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_ecommerce: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Available on E-Commerce <HintIcon text="List on online store" /></span>}
+            checked={formData.is_available_ecommerce}
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_available_ecommerce: e.target.checked }))}
           />
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Track Stock <HintIcon text="Monitor inventory levels" /></span>} 
-            checked={formData.has_stocks} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, has_stocks: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Track Stock <HintIcon text="Monitor inventory levels" /></span>}
+            checked={formData.has_stocks}
+            onChange={(e: any) => setFormData((p) => ({ ...p, has_stocks: e.target.checked }))}
             disabled={isEditing && formData.can_edit_variants === false}
           />
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Taxable <HintIcon text="Subject to taxes" /></span>} 
-            checked={formData.is_taxable} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, is_taxable: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Taxable <HintIcon text="Subject to taxes" /></span>}
+            checked={formData.is_taxable}
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_taxable: e.target.checked }))}
           />
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Returnable <HintIcon text="Eligible for returns" /></span>} 
-            checked={formData.is_returnable} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, is_returnable: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Returnable <HintIcon text="Eligible for returns" /></span>}
+            checked={formData.is_returnable}
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_returnable: e.target.checked }))}
           />
-          <Checkbox 
-            label={<span className="flex items-center gap-1.5">Discountable <HintIcon text="Eligible for discounts" /></span>} 
-            checked={formData.is_discountable} 
-            onChange={(e: any) => setFormData((p) => ({ ...p, is_discountable: e.target.checked }))} 
+          <Checkbox
+            label={<span className="flex items-center gap-1.5">Discountable <HintIcon text="Eligible for discounts" /></span>}
+            checked={formData.is_discountable}
+            onChange={(e: any) => setFormData((p) => ({ ...p, is_discountable: e.target.checked }))}
           />
         </div>
       </div>
@@ -369,35 +376,35 @@ export default function ItemFormWizard({
           <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Tracking Options</p>
           <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
             <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
-              <input 
-                type="radio" 
-                name="tracking_type" 
+              <input
+                type="radio"
+                name="tracking_type"
                 className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
                 checked={formData.tracking_type === 'none'}
                 onChange={() => setFormData(p => ({ ...p, tracking_type: 'none' }))}
-                disabled={isEditing && formData.can_edit_variants === false}
+                disabled={isEditing}
               />
               <span>None</span>
             </label>
             <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
-              <input 
-                type="radio" 
-                name="tracking_type" 
+              <input
+                type="radio"
+                name="tracking_type"
                 className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
                 checked={formData.tracking_type === 'batch'}
                 onChange={() => setFormData(p => ({ ...p, tracking_type: 'batch' }))}
-                disabled={isEditing && formData.can_edit_variants === false}
+                disabled={isEditing}
               />
               <span className="flex items-center gap-1.5">Batches <HintIcon text="Track items by manufacturing batch or lot" /></span>
             </label>
             <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
-              <input 
-                type="radio" 
-                name="tracking_type" 
+              <input
+                type="radio"
+                name="tracking_type"
                 className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
                 checked={formData.tracking_type === 'serial'}
                 onChange={() => setFormData(p => ({ ...p, tracking_type: 'serial' }))}
-                disabled={isEditing && formData.can_edit_variants === false}
+                disabled={isEditing}
               />
               <span className="flex items-center gap-1.5">Serial Numbers <HintIcon text="Track each individual unit with a unique serial number" /></span>
             </label>
@@ -411,9 +418,9 @@ export default function ItemFormWizard({
           <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Valuation Method (COGS)</p>
           <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
             <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
-              <input 
-                type="radio" 
-                name="valuation_method" 
+              <input
+                type="radio"
+                name="valuation_method"
                 className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
                 checked={formData.valuation_method === 'fifo'}
                 onChange={() => setFormData(p => ({ ...p, valuation_method: 'fifo' }))}
@@ -422,9 +429,9 @@ export default function ItemFormWizard({
               <span>First-In, First-Out (FIFO)</span>
             </label>
             <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
-              <input 
-                type="radio" 
-                name="valuation_method" 
+              <input
+                type="radio"
+                name="valuation_method"
                 className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
                 checked={formData.valuation_method === 'lifo'}
                 onChange={() => setFormData(p => ({ ...p, valuation_method: 'lifo' }))}
@@ -432,17 +439,19 @@ export default function ItemFormWizard({
               />
               <span>Last-In, First-Out (LIFO)</span>
             </label>
-            <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
-              <input 
-                type="radio" 
-                name="valuation_method" 
-                className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
-                checked={formData.valuation_method === 'mac'}
-                onChange={() => setFormData(p => ({ ...p, valuation_method: 'mac' }))}
-                disabled={isEditing && formData.can_edit_variants === false}
-              />
-              <span className="flex items-center gap-1.5">Moving Average Cost (MAC)</span>
-            </label>
+            {formData.is_available_purchase && (
+              <label className="flex items-center gap-2 text-sm text-[#2D3142] cursor-pointer">
+                <input
+                  type="radio"
+                  name="valuation_method"
+                  className="w-4 h-4 text-[#7A52F4] border-gray-300 focus:ring-[#7A52F4] disabled:opacity-50"
+                  checked={formData.valuation_method === 'mac'}
+                  onChange={() => setFormData(p => ({ ...p, valuation_method: 'mac' }))}
+                  disabled={isEditing && formData.can_edit_variants === false}
+                />
+                <span className="flex items-center gap-1.5">Moving Average Cost (MAC)</span>
+              </label>
+            )}
           </div>
         </div>
       )}
@@ -549,7 +558,7 @@ export default function ItemFormWizard({
               <Input label="Sale Price" type="number" placeholder="0.00" value={formData.sale_price} onChange={(e) => update("sale_price", e.target.value)} />
             )}
             {formData.is_available_purchase && (
-              <Input label="Cost Price" type="number" placeholder="0.00" value={formData.cost_price} onChange={(e) => update("cost_price", e.target.value)} />
+              <Input label="Cost Price" type="number" placeholder="0.00" value={formData.cost_price} disabled={formData.can_edit_variants === false && formData.valuation_method === 'mac'} onChange={(e) => update("cost_price", e.target.value)} />
             )}
             {formData.is_available_sell && (
               <Input label="Min Sales Price" type="number" placeholder="0.00" value={formData.min_sales_price} onChange={(e) => update("min_sales_price", e.target.value)} />
@@ -637,18 +646,18 @@ export default function ItemFormWizard({
                       )}
                       {formData.is_available_purchase && (
                         <td className="p-2 min-w-[120px] align-top">
-                          <Input type="number" placeholder="0.00" value={v.cost_price} onChange={(e) => updateVariant(idx, "cost_price", e.target.value)} />
+                          <Input type="number" placeholder="0.00" value={v.cost_price} disabled={formData.can_edit_variants === false && formData.valuation_method === 'mac'} onChange={(e) => updateVariant(idx, "cost_price", e.target.value)} />
                         </td>
                       )}
                       <td className="p-2 text-center align-middle w-12">
-                        <button 
-                          type="button" 
-                          disabled={isEditing && formData.can_edit_variants === false}
-                          title={isEditing && formData.can_edit_variants === false ? "Cannot delete variants while transactions exist" : ""}
-                          onClick={() => removeVariant(idx)} 
+                        <button
+                          type="button"
+                          disabled={isEditing}
+                          title={isEditing ? "Cannot delete variants of an existing item" : ""}
+                          onClick={() => removeVariant(idx)}
                           className={cn(
                             "p-1.5 rounded-lg transition-colors mt-1",
-                            isEditing && formData.can_edit_variants === false
+                            isEditing
                               ? "text-gray-300 cursor-not-allowed"
                               : "text-gray-400 hover:text-danger-500 hover:bg-danger-50"
                           )}

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

@@ -427,6 +427,7 @@ export function ProductSelectionPanel({
               {searchResults.map((item) => (
                 <div key={item.id} className="flex flex-col border-b border-border-subtle last:border-0">
                   <button
+                    type="button"
                     onClick={() => {
                       if (item.has_variants) {
                         setExpandedItemIds(prev => prev.includes(item.id) ? prev.filter(id => id !== item.id) : [...prev, item.id]);
@@ -476,7 +477,7 @@ export function ProductSelectionPanel({
                             {formatCurrency(item.variants?.[0]?.[config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price'] || 0)}
                           </div>
                         )}
-                        {config.showStock && item.stock && (
+                        {config.showStock && item.has_stocks && item.stock && (
                           <div className={cn(
                             "text-[11px] font-medium",
                             item.stock.qty_available > 0 ? "text-green-600" : "text-danger-alt"
@@ -503,6 +504,7 @@ export function ProductSelectionPanel({
                       <div className="pl-[52px] pr-4 flex flex-col gap-0.5 mt-1">
                         {item.variants?.map((variant: any) => (
                           <button
+                            type="button"
                             key={variant.id}
                             id={`dropdown-item-variant-${variant.id}`}
                             onClick={() => handleSelectItem(item, variant)}
@@ -527,7 +529,7 @@ export function ProductSelectionPanel({
                                   {formatCurrency(variant[config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price'] || item.variants?.[0]?.[config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price'] || 0)}
                                 </div>
                               )}
-                              {config.showStock && variant.stock && (
+                              {config.showStock && item.has_stocks && variant.stock && (
                                 <div className={cn(
                                   "text-[11.5px] font-medium min-w-[50px] text-right",
                                   variant.stock.qty_available > 0 ? "text-green-600" : "text-danger-alt"