@apptimate/ui 6.4.0 → 6.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.4.0",
+  "version": "6.6.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/pickers/PartyPicker.tsx

@@ -51,18 +51,45 @@ export function PartyPicker({
   const [quickAddEmail, setQuickAddEmail] = useState("");
   const [quickAddPhone, setQuickAddPhone] = useState("");
   const [quickAddSecondaryContact, setQuickAddSecondaryContact] = useState("");
-  const [quickAddGender, setQuickAddGender] = useState("");
   const [quickAddDOB, setQuickAddDOB] = useState("");
+  const [quickAddIdentityType, setQuickAddIdentityType] = useState("");
+  const [quickAddIdentity, setQuickAddIdentity] = useState("");
+  
+  const [quickAddAddressLine1, setQuickAddAddressLine1] = useState("");
+  const [quickAddAddressLine2, setQuickAddAddressLine2] = useState("");
+  const [quickAddCity, setQuickAddCity] = useState("");
+  const [quickAddState, setQuickAddState] = useState("");
+  const [quickAddPostalCode, setQuickAddPostalCode] = useState("");
+  const [quickAddCountry, setQuickAddCountry] = useState("");
+  const [showQuickAddDetailedAddress, setShowQuickAddDetailedAddress] = useState(false);
+
   const [quickAddCurrencyId, setQuickAddCurrencyId] = useState<string | number | undefined>(undefined);
   const [quickAddCurrencyDisplay, setQuickAddCurrencyDisplay] = useState<any>(null);
   const [errors, setErrors] = useState<Record<string, string[]>>({});
   const [isCreating, setIsCreating] = useState(false);
 
+  const [fieldConfigs, setFieldConfigs] = useState<any[]>([]);
+
+  const effectiveType = partyType === "all" ? "customer" : partyType;
+  const mergedConfig = React.useMemo(() => {
+    const configMap: Record<string, { active: boolean; mandatory: boolean }> = {};
+    const relevantConfigs = fieldConfigs.filter(c => c.entity === effectiveType);
+    for (const config of relevantConfigs) {
+      if (!configMap[config.field]) {
+        configMap[config.field] = { active: false, mandatory: false };
+      }
+      if (config.status === "active") configMap[config.field].active = true;
+      if (config.is_mandatory) configMap[config.field].mandatory = true;
+    }
+    return configMap;
+  }, [fieldConfigs, effectiveType]);
+
   const hasInitializedQuickAddCurrency = useRef(false);
 
   useEffect(() => {
-    if (isQuickAddOpen && !hasInitializedQuickAddCurrency.current) {
-      hasInitializedQuickAddCurrency.current = true;
+    if (isQuickAddOpen) {
+      if (!hasInitializedQuickAddCurrency.current) {
+        hasInitializedQuickAddCurrency.current = true;
       sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/settings`, method: 'GET' })
         .then((res: any) => {
           if (res.responseData?.is_success && res.responseData?.result) {
@@ -89,8 +116,18 @@ export function PartyPicker({
             }
           }
         });
+      }
+      
+      if (fieldConfigs.length === 0) {
+        sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/field-configs`, method: 'GET' })
+          .then((res: any) => {
+            if (res.responseData?.is_success && res.responseData?.result) {
+              setFieldConfigs(res.responseData.result);
+            }
+          });
+      }
     }
-  }, [isQuickAddOpen]);
+  }, [isQuickAddOpen, fieldConfigs.length]);
 
   const fetchData = useCallback(async (query: string = "") => {
     setIsLoading(true);
@@ -121,12 +158,17 @@ export function PartyPicker({
 
   const handleSelect = (party: any) => {
     onChange({
-      id: party.id,
-      name: party.name,
-      code: party.code,
-      type: party.type,
-      default_currency_id: party.default_currency_id,
-      default_currency: party.default_currency,
+      id: Number(party.id),
+      name: String(party.name || ""),
+      code: party.code ? String(party.code) : undefined,
+      type: Array.isArray(party.type) ? party.type[0] : (party.type ? String(party.type) : undefined),
+      default_currency_id: party.default_currency_id ? Number(party.default_currency_id) : undefined,
+      default_currency: party.default_currency ? {
+        id: Number(party.default_currency.id),
+        code: String(party.default_currency.code),
+        name: String(party.default_currency.name),
+        symbol: String(party.default_currency.symbol),
+      } : undefined,
     });
     setIsOpen(false);
   };
@@ -146,11 +188,20 @@ export function PartyPicker({
         email: quickAddEmail.trim() || undefined,
         primary_contact: quickAddPhone.trim() || undefined,
         secondary_contact: quickAddSecondaryContact.trim() || undefined,
-        gender: quickAddGender || undefined,
         date_of_birth: quickAddDOB || undefined,
+        identity_type: quickAddIdentityType || undefined,
+        identity: quickAddIdentity.trim() || undefined,
         default_currency_id: quickAddCurrencyId || undefined,
-        type: [partyType === "all" ? "customer" : partyType],
-        status: "active"
+        type: [partyType === "all" || !partyType ? "customer" : partyType],
+        status: "active",
+        address: quickAddAddressLine1.trim() ? {
+          address_line_1: quickAddAddressLine1.trim(),
+          address_line_2: quickAddAddressLine2.trim() || undefined,
+          city: quickAddCity.trim() || undefined,
+          state: quickAddState.trim() || undefined,
+          postal_code: quickAddPostalCode.trim() || undefined,
+          country: quickAddCountry.trim() || undefined,
+        } : undefined
       };
       const res = await createParty(payload);
       if (res.is_success && res.result) {
@@ -158,16 +209,16 @@ export function PartyPicker({
         const party = res.result;
         const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
         onChange({
-          id: party.id,
-          name: partyName,
-          code: party.code,
-          type: party.type,
-          default_currency_id: quickAddCurrencyDisplay?.id,
+          id: Number(party.id),
+          name: String(partyName),
+          code: party.code ? String(party.code) : undefined,
+          type: Array.isArray(party.type) ? party.type[0] : (party.type ? String(party.type) : undefined),
+          default_currency_id: quickAddCurrencyDisplay?.id ? Number(quickAddCurrencyDisplay.id) : undefined,
           default_currency: quickAddCurrencyDisplay ? {
-            id: quickAddCurrencyDisplay.id,
-            code: quickAddCurrencyDisplay.code,
-            name: quickAddCurrencyDisplay.name,
-            symbol: quickAddCurrencyDisplay.symbol
+            id: Number(quickAddCurrencyDisplay.id),
+            code: String(quickAddCurrencyDisplay.code),
+            name: String(quickAddCurrencyDisplay.name),
+            symbol: String(quickAddCurrencyDisplay.symbol)
           } : undefined
         });
         setIsQuickAddOpen(false);
@@ -176,8 +227,16 @@ export function PartyPicker({
         setQuickAddEmail("");
         setQuickAddPhone("");
         setQuickAddSecondaryContact("");
-        setQuickAddGender("");
         setQuickAddDOB("");
+        setQuickAddIdentityType("");
+        setQuickAddIdentity("");
+        setQuickAddAddressLine1("");
+        setQuickAddAddressLine2("");
+        setQuickAddCity("");
+        setQuickAddState("");
+        setQuickAddPostalCode("");
+        setQuickAddCountry("");
+        setShowQuickAddDetailedAddress(false);
         setErrors({});
         setIsOpen(false);
       } else if ((res as any).errors) {
@@ -229,8 +288,16 @@ export function PartyPicker({
               setQuickAddEmail("");
               setQuickAddPhone("");
               setQuickAddSecondaryContact("");
-              setQuickAddGender("");
               setQuickAddDOB("");
+              setQuickAddIdentityType("");
+              setQuickAddIdentity("");
+              setQuickAddAddressLine1("");
+              setQuickAddAddressLine2("");
+              setQuickAddCity("");
+              setQuickAddState("");
+              setQuickAddPostalCode("");
+              setQuickAddCountry("");
+              setShowQuickAddDetailedAddress(false);
               setErrors({});
             }}
             className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
@@ -256,7 +323,11 @@ export function PartyPicker({
               <PickerItem
                 key={party.id}
                 label={party.name}
-                sublabel={party.code ? `Code: ${party.code}` : undefined}
+                sublabel={[
+                  party.code ? `Code: ${party.code}` : null,
+                  party.phone ? `Contact: ${party.phone}` : null,
+                  party.identity ? `Identity: ${party.identity}` : null
+                ].filter(Boolean).join(" | ") || undefined}
                 isSelected={String(value) === String(party.id)}
                 onClick={() => handleSelect(party)}
               />
@@ -276,71 +347,181 @@ export function PartyPicker({
       >
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-3">
-            <Input
-              label="First Name"
-              isRequired
-              placeholder={`Enter ${label.toLowerCase()} first name`}
-              value={quickAddFirstName}
-              onChange={(e) => setQuickAddFirstName(e.target.value)}
-              error={errors.first_name?.[0]}
-            />
-            <Input
-              label="Last Name"
-              placeholder={`Enter ${label.toLowerCase()} last name`}
-              value={quickAddLastName}
-              onChange={(e) => setQuickAddLastName(e.target.value)}
-              error={errors.last_name?.[0]}
-            />
+            {mergedConfig.first_name?.active !== false && (
+              <Input
+                label="First Name"
+                isRequired={mergedConfig.first_name?.mandatory ?? true}
+                placeholder={`Enter ${label.toLowerCase()} first name`}
+                value={quickAddFirstName}
+                onChange={(e) => setQuickAddFirstName(e.target.value)}
+                error={errors.first_name?.[0]}
+              />
+            )}
+            {mergedConfig.last_name?.active !== false && (
+              <Input
+                label="Last Name"
+                isRequired={mergedConfig.last_name?.mandatory}
+                placeholder={`Enter ${label.toLowerCase()} last name`}
+                value={quickAddLastName}
+                onChange={(e) => setQuickAddLastName(e.target.value)}
+                error={errors.last_name?.[0]}
+              />
+            )}
           </div>
           <div className="grid grid-cols-2 gap-3">
-            <Input
-              label="Email"
-              type="email"
-              placeholder="Email address"
-              value={quickAddEmail}
-              onChange={(e) => setQuickAddEmail(e.target.value)}
-              error={errors.email?.[0]}
-            />
-            <Input
-              label="Primary Contact"
-              placeholder="Primary phone number"
-              value={quickAddPhone}
-              onChange={(e) => setQuickAddPhone(e.target.value)}
-              error={errors.primary_contact?.[0]}
-            />
+            {mergedConfig.email?.active !== false && (
+              <Input
+                label="Email"
+                type="email"
+                isRequired={mergedConfig.email?.mandatory}
+                placeholder="Email address"
+                value={quickAddEmail}
+                onChange={(e) => setQuickAddEmail(e.target.value)}
+                error={errors.email?.[0]}
+              />
+            )}
+            {mergedConfig.primary_contact?.active !== false && (
+              <Input
+                label="Primary Contact"
+                isRequired={mergedConfig.primary_contact?.mandatory}
+                placeholder="Primary phone number"
+                value={quickAddPhone}
+                onChange={(e) => setQuickAddPhone(e.target.value)}
+                error={errors.primary_contact?.[0]}
+              />
+            )}
           </div>
           <div className="grid grid-cols-2 gap-3">
-            <Input
-              label="Secondary Contact"
-              placeholder="Alternative phone (optional)"
-              value={quickAddSecondaryContact}
-              onChange={(e) => setQuickAddSecondaryContact(e.target.value)}
-              error={errors.secondary_contact?.[0]}
-            />
-            <Input
-              label="Date of Birth"
-              type="date"
-              value={quickAddDOB}
-              onChange={(e) => setQuickAddDOB(e.target.value)}
-              error={errors.date_of_birth?.[0]}
-            />
+            {mergedConfig.secondary_contact?.active !== false && (
+              <Input
+                label="Secondary Contact"
+                isRequired={mergedConfig.secondary_contact?.mandatory}
+                placeholder="Alternative phone (optional)"
+                value={quickAddSecondaryContact}
+                onChange={(e) => setQuickAddSecondaryContact(e.target.value)}
+                error={errors.secondary_contact?.[0]}
+              />
+            )}
+            {mergedConfig.date_of_birth?.active !== false && (
+              <Input
+                label="Date of Birth"
+                type="date"
+                isRequired={mergedConfig.date_of_birth?.mandatory}
+                value={quickAddDOB}
+                onChange={(e) => setQuickAddDOB(e.target.value)}
+                error={errors.date_of_birth?.[0]}
+              />
+            )}
           </div>
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1">
-              <label className="text-sm font-semibold text-gray-700">Gender</label>
+          {mergedConfig.identity?.active !== false && (
+            <div className="space-y-1.5 w-full">
+              <label className="text-[13px] font-medium text-[#4A5568]">
+                Identity Details {mergedConfig.identity?.mandatory && <span className="text-red-500">*</span>}
+              </label>
+            <div className="flex relative">
               <select
-                value={quickAddGender}
-                onChange={(e) => setQuickAddGender(e.target.value)}
-                className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white"
+                value={quickAddIdentityType}
+                onChange={(e) => setQuickAddIdentityType(e.target.value)}
+                className={`w-1/3 bg-surface-0 border-[1.5px] ${errors.identity_type ? 'border-danger-alt' : 'border-border-subtle'} rounded-l-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 border-r-0 focus:z-10 appearance-none`}
+                style={{ backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right .7rem top 50%', backgroundSize: '.65rem auto' }}
               >
-                <option value="">Select gender</option>
-                <option value="male">Male</option>
-                <option value="female">Female</option>
+                <option value="">Select type</option>
+                <option value="nic">NIC</option>
+                <option value="passport">Passport</option>
+                <option value="driving_license">Driving License</option>
+                <option value="business_registration">Business Registration</option>
                 <option value="other">Other</option>
-                <option value="prefer_not_to_say">Prefer not to say</option>
               </select>
-              {errors.gender?.[0] && <p className="text-xs text-red-500">{errors.gender[0]}</p>}
+              <input
+                type="text"
+                placeholder="Enter identity number"
+                value={quickAddIdentity}
+                onChange={(e) => setQuickAddIdentity(e.target.value)}
+                className={`flex-1 bg-surface-0 border-[1.5px] ${errors.identity ? 'border-danger-alt' : 'border-border-subtle'} rounded-r-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 placeholder:text-foreground-disabled z-0 focus:z-10 relative`}
+              />
             </div>
+              {(errors.identity_type?.[0] || errors.identity?.[0]) && (
+                <span className="text-[11px] text-danger-alt font-medium">
+                  {errors.identity_type?.[0] || errors.identity?.[0]}
+                </span>
+              )}
+            </div>
+          )}
+          {mergedConfig.address?.active !== false && (
+            <div className="space-y-3">
+              <div className="flex justify-between items-center">
+                <label className="text-[13px] font-medium text-[#4A5568]">
+                  Address {mergedConfig.address?.mandatory ? <span className="text-red-500">*</span> : "(Optional)"}
+                </label>
+              <button
+                type="button"
+                onClick={() => setShowQuickAddDetailedAddress(!showQuickAddDetailedAddress)}
+                className="text-xs font-semibold text-primary-600 hover:text-primary-700 transition-colors"
+              >
+                {showQuickAddDetailedAddress ? "Quick Add Address" : "Add Detailed Address"}
+              </button>
+            </div>
+
+            {!showQuickAddDetailedAddress ? (
+              <Input
+                placeholder="Enter complete primary address..."
+                value={quickAddAddressLine1}
+                onChange={(e) => setQuickAddAddressLine1(e.target.value)}
+                error={errors.address?.[0] || errors['address.address_line_1']?.[0]}
+              />
+            ) : (
+              <div className="p-3 bg-gray-50 border border-gray-100 rounded-xl space-y-3">
+                <Input
+                  label="Address Line 1"
+                  placeholder="Street address, P.O. box, etc."
+                  value={quickAddAddressLine1}
+                  onChange={(e) => setQuickAddAddressLine1(e.target.value)}
+                  error={errors.address?.[0] || errors['address.address_line_1']?.[0]}
+                />
+                <Input
+                  label="Address Line 2"
+                  placeholder="Apartment, suite, unit, etc. (optional)"
+                  value={quickAddAddressLine2}
+                  onChange={(e) => setQuickAddAddressLine2(e.target.value)}
+                  error={errors['address.address_line_2']?.[0]}
+                />
+                <div className="grid grid-cols-2 gap-3">
+                  <Input
+                    label="City"
+                    placeholder="City"
+                    value={quickAddCity}
+                    onChange={(e) => setQuickAddCity(e.target.value)}
+                    error={errors['address.city']?.[0]}
+                  />
+                  <Input
+                    label="State / Province"
+                    placeholder="State or Province"
+                    value={quickAddState}
+                    onChange={(e) => setQuickAddState(e.target.value)}
+                    error={errors['address.state']?.[0]}
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <Input
+                    label="Postal Code"
+                    placeholder="ZIP or Postal Code"
+                    value={quickAddPostalCode}
+                    onChange={(e) => setQuickAddPostalCode(e.target.value)}
+                    error={errors['address.postal_code']?.[0]}
+                  />
+                  <Input
+                    label="Country"
+                    placeholder="Country"
+                    value={quickAddCountry}
+                    onChange={(e) => setQuickAddCountry(e.target.value)}
+                    error={errors['address.country']?.[0]}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+          <div className="grid grid-cols-2 gap-3">
             {(partyType === "all" || partyType === "customer" || partyType === "supplier") && (
               <AsyncSearchableSelect
                 label="Default Currency"

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"