@apptimate/ui 7.4.0 → 7.5.0

package/package.json

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

package/src/base-components/Modal.tsx

@@ -18,9 +18,11 @@ export interface ModalProps {
     position?: 'center' | 'bottom';
     /** Override z-index layer (default 50). Increase for nested modals. */
     zIndex?: number;
+    /** Whether clicking the backdrop should close the modal (default true) */
+    closeOnOutsideClick?: boolean;
 }
 
-export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'bottom', zIndex }: ModalProps) => {
+export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', position = 'bottom', zIndex, closeOnOutsideClick = true }: ModalProps) => {
     // SSR-safe portal mount guard — document is only available on the client
     const [mounted, setMounted] = useState(false);
     const [isDesktop, setIsDesktop] = useState(true);
@@ -73,7 +75,7 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
-                        onClick={onClose}
+                        onClick={closeOnOutsideClick ? onClose : undefined}
                         className={backdropClasses}
                     />
                     <motion.div

package/src/base-components/TagsInput.tsx

@@ -14,6 +14,7 @@ export interface TagsInputProps {
     placeholder?: string;
     className?: string;
     disabled?: boolean;
+    lockedValues?: string[];
 }
 
 export const TagsInput: React.FC<TagsInputProps> = ({
@@ -25,6 +26,7 @@ export const TagsInput: React.FC<TagsInputProps> = ({
     placeholder = "Type and press Enter...",
     className,
     disabled = false,
+    lockedValues = [],
 }) => {
     const [inputValue, setInputValue] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
@@ -40,12 +42,15 @@ export const TagsInput: React.FC<TagsInputProps> = ({
             setInputValue('');
         } else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
             e.preventDefault();
-            onChange(values.slice(0, -1));
+            const lastTag = values[values.length - 1];
+            if (!lockedValues.includes(lastTag)) {
+                onChange(values.slice(0, -1));
+            }
         }
     };
 
     const removeTag = (tagToRemove: string) => {
-        if (disabled) return;
+        if (disabled || lockedValues.includes(tagToRemove)) return;
         onChange(values.filter(tag => tag !== tagToRemove));
     };
 
@@ -68,10 +73,12 @@ export const TagsInput: React.FC<TagsInputProps> = ({
                 {values.map((tag) => (
                     <span 
                         key={tag} 
-                        className="flex items-center gap-1.5 px-2.5 py-1 text-[12px] font-medium bg-[#F3F4F6] text-[#2D3142] rounded-md border border-[#E5E7EB]"
+                        className={cn("flex items-center gap-1.5 px-2.5 py-1 text-[12px] font-medium bg-[#F3F4F6] text-[#2D3142] rounded-md border border-[#E5E7EB]", 
+                            lockedValues.includes(tag) && "opacity-80 pr-2.5"
+                        )}
                     >
                         {tag}
-                        {!disabled && (
+                        {!disabled && !lockedValues.includes(tag) && (
                             <button 
                                 type="button" 
                                 onClick={(e) => { e.stopPropagation(); removeTag(tag); }}

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

@@ -149,6 +149,17 @@ export default function ItemFormWizard({
     return true;
   };
 
+  const getLockedValues = useCallback((attrName: string) => {
+    if (!isEditing || !attrName) return [];
+    const locked = new Set<string>();
+    formData.variants.forEach(v => {
+      if ((v as any).id && v.attribute_values && v.attribute_values[attrName]) {
+        locked.add(v.attribute_values[attrName]);
+      }
+    });
+    return Array.from(locked);
+  }, [isEditing, formData.variants]);
+
   // No need for renderStepper, it is handled by WizardModal
 
   // ═══════════════════════════════════════
@@ -264,29 +275,32 @@ 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
-              type="button"
-              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 ? "text-gray-400 cursor-not-allowed" : "text-primary-600 hover:text-primary-700"
-                }`}
-            >
-              <Plus size={14} /> Add Attribute
-            </button>
+            {!isEditing && (
+              <button
+                type="button"
+                onClick={() => setFormData(p => ({ ...p, attributes: [...p.attributes, { name: "", values: [] }] }))}
+                className="flex items-center gap-1.5 text-[12px] font-semibold text-primary-600 hover:text-primary-700 transition-colors"
+              >
+                <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="space-y-4">
-              {formData.attributes.map((attr, idx) => (
+              {formData.attributes.map((attr, idx) => {
+                const lockedValues = getLockedValues(attr.name);
+                const hasLockedValues = lockedValues.length > 0;
+                
+                return (
                 <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"
                       value={attr.name}
-                      disabled={isEditing}
+                      disabled={isEditing && hasLockedValues}
                       onChange={(e) => {
                         const newAttrs = [...formData.attributes];
                         newAttrs[idx] = { ...newAttrs[idx], name: e.target.value };
@@ -297,7 +311,7 @@ export default function ItemFormWizard({
                   <div className="flex-1 flex items-start gap-2 w-full">
                     <TagsInput
                       values={attr.values}
-                      disabled={isEditing}
+                      lockedValues={lockedValues}
                       onChange={(values) => {
                         const newAttrs = [...formData.attributes];
                         newAttrs[idx] = { ...newAttrs[idx], values };
@@ -305,24 +319,21 @@ export default function ItemFormWizard({
                       }}
                       placeholder="Type values (e.g. S, M, L) and press Enter"
                     />
-                    <button
-                      type="button"
-                      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
-                        ? "text-gray-300 cursor-not-allowed"
-                        : "text-gray-400 hover:text-danger-alt hover:bg-danger-50"
-                        }`}
-                    >
-                      <Trash size={16} />
-                    </button>
+                    {!hasLockedValues && (
+                      <button
+                        type="button"
+                        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 text-gray-400 hover:text-danger-alt hover:bg-danger-50"
+                      >
+                        <Trash size={16} />
+                      </button>
+                    )}
                   </div>
                 </div>
-              ))}
+              )})}
             </div>
           )}
         </div>

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

@@ -1,14 +1,14 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Modal } from '../../base-components/Modal';
 import { ModalFooter } from '../../base-components/Modal';
 import { Button } from '../../base-components/Button';
 import { Select } from '../../base-components/Select';
 import { Input } from '../../base-components/Input';
 
-import { saveInventorySetting, getInventorySetting, getItemCategoryCount } from "@apptimate/core-lib";
-import { Trash2, Plus } from "lucide-react";
+import { saveInventorySetting, getInventorySetting, getItemCount, lookupSkuComponentFields, getSkuComponentTemplates, createSkuComponentField } from "@apptimate/core-lib";
+import { Trash2, Plus, LayoutTemplate, ChevronDown } from "lucide-react";
 import toast from "react-hot-toast";
 
 interface Props {
@@ -25,28 +25,62 @@ interface Props {
   isVariant?: boolean;
 }
 
-export const generateSkuPreview = (cfg: any, categoryName?: string, brandName?: string, itemName?: string, attributes?: Record<string, string>) => {
+interface CustomField {
+  id: number;
+  name: string;
+  code: string;
+  is_system?: boolean;
+  applicable_to?: string;
+  options: { id?: number; label: string; code: string }[];
+}
+
+interface SkuTemplate {
+  id: number;
+  name: string;
+  config: any;
+}
+
+export const generateSkuPreview = (cfg: any, categoryName?: string, brandName?: string, itemName?: string, attributes?: Record<string, string>, customFields?: CustomField[]) => {
   let result = "";
   if (!cfg || !cfg.parts) return result;
   
   cfg.parts.forEach((p: any, idx: number) => {
     let val = "";
-    if (p.type === "category") val = (categoryName || "CAT").substring(0, p.length || 3).toUpperCase();
-    if (p.type === "brand") val = (brandName || "BRN").substring(0, p.length || 3).toUpperCase();
-    if (p.type === "name") val = (itemName || "ITM").substring(0, p.length || 3).toUpperCase();
+    if (p.type === "category") val = categoryName ? categoryName.substring(0, p.length || 3).toUpperCase() : "";
+    if (p.type === "brand") val = brandName ? brandName.substring(0, p.length || 3).toUpperCase() : "";
+    if (p.type === "name") val = itemName ? itemName.substring(0, p.length || 3).toUpperCase() : "";
     if (p.type === "custom") val = p.custom_value || "";
-    if (p.type === "attributes") {
-      if (attributes && Object.keys(attributes).length > 0) {
-        val = Object.values(attributes)
-          .map((v: any) => String(v).substring(0, p.length || 3).toUpperCase())
-          .join("-");
+    if (p.type?.startsWith("custom_field:")) {
+      // Use selected option code if available, otherwise first option code
+      if (p.selected_option_code) {
+        val = p.selected_option_code;
       } else {
-        val = "ATTR";
+        const fieldId = parseInt(p.type.split(":")[1]);
+        const field = customFields?.find(f => f.id === fieldId);
+        if (field?.is_system) {
+          // System fields use dynamic data
+          const sysCode = field.code;
+          if (sysCode === "item_name") val = itemName ? itemName.substring(0, p.length || 3).toUpperCase() : "";
+          else if (sysCode === "category") val = categoryName ? categoryName.substring(0, p.length || 3).toUpperCase() : "";
+          else if (sysCode === "brand") val = brandName ? brandName.substring(0, p.length || 3).toUpperCase() : "";
+          else if (sysCode === "variant_attributes") {
+            if (attributes && Object.keys(attributes).length > 0) {
+              const attrVals = Object.values(attributes).filter(v => v);
+              if (attrVals.length > 0) {
+                val = attrVals.map((v: any) => String(v).substring(0, p.length || 3).toUpperCase()).join("-");
+              }
+            }
+          }
+        } else {
+          val = field?.options?.[0]?.code || "";
+        }
       }
     }
     
-    const isLast = (idx === cfg.parts.length - 1) && (!cfg.sequence_length || cfg.sequence_length === 0);
-    result += val + (isLast ? "" : (p.separator || ""));
+    if (val) {
+      const isLast = (idx === cfg.parts.length - 1) && (!cfg.sequence_length || cfg.sequence_length === 0);
+      result += val + (isLast ? "" : (p.separator || ""));
+    }
   });
   
   // Add sequence at the end
@@ -56,33 +90,48 @@ export const generateSkuPreview = (cfg: any, categoryName?: string, brandName?:
   return result;
 };
 
+
 export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryName, categoryId, brandName, itemName, itemNames, itemAttributes, itemsAttributes, isVariant }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [config, setConfig] = useState({
-    parts: (isVariant ? [
-      { type: "category", length: 3, custom_value: "", separator: "-" },
-      { type: "name", length: 3, custom_value: "", separator: "-" },
-      { type: "attributes", length: 3, custom_value: "", separator: "" },
-    ] : [
-      { type: "category", length: 3, custom_value: "", separator: "-" },
-      { type: "name", length: 3, custom_value: "", separator: "-" },
-    ]) as any[],
+    parts: [] as any[],
     sequence_length: 4,
     current_sequence: 1,
   });
 
+  // Custom fields & templates
+  const [customFields, setCustomFields] = useState<CustomField[]>([]);
+  const [templates, setTemplates] = useState<SkuTemplate[]>([]);
+  const [loadedTemplate, setLoadedTemplate] = useState<SkuTemplate | null>(null);
+  const [isTemplateDropdownOpen, setIsTemplateDropdownOpen] = useState(false);
+
+  const fetchCustomFields = useCallback(async () => {
+    try {
+      const res = await lookupSkuComponentFields({ applicable_to: isVariant ? 'variant' : 'item' });
+      if (res.is_success) setCustomFields(res.result || []);
+    } catch {}
+  }, [isVariant]);
+
+  const fetchTemplates = useCallback(async () => {
+    try {
+      const res = await getSkuComponentTemplates({ 
+        status: "active", 
+        per_page: 50,
+        applicable_to: isVariant ? 'variant' : 'item'
+      });
+      const data = res.result?.data || [];
+      if (res.is_success) setTemplates(data);
+      return data;
+    } catch {
+      return [];
+    }
+  }, [isVariant]);
+
   useEffect(() => {
     if (isOpen) {
       // Reset state to default immediately when opened
       setConfig({
-        parts: isVariant ? [
-          { type: "category", length: 3, custom_value: "", separator: "-" },
-          { type: "name", length: 3, custom_value: "", separator: "-" },
-          { type: "attributes", length: 3, custom_value: "", separator: "" },
-        ] : [
-          { type: "category", length: 3, custom_value: "", separator: "-" },
-          { type: "name", length: 3, custom_value: "", separator: "-" },
-        ] as any[],
+        parts: [] as any[],
         sequence_length: 4,
         current_sequence: 1,
       });
@@ -91,20 +140,24 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
       const settingKey = isVariant ? "sku_generation_rule_variant_v3" : "sku_generation_rule_v3";
       
       Promise.all([
-        getInventorySetting(settingKey).catch(() => null),
-        categoryId ? getItemCategoryCount(categoryId).catch(() => null) : Promise.resolve(null)
+        getItemCount(categoryId).catch(() => null),
+        fetchCustomFields(),
+        fetchTemplates(),
       ])
-        .then(([settingRes, countRes]) => {
+        .then(([countRes, , fetchedTemplates]) => {
           let currentSequence = 1;
           if (countRes && countRes.is_success) {
             currentSequence = (countRes.result?.count || 0) + 1;
           }
 
-          if (settingRes && settingRes.is_success && settingRes.result) {
+          const defaultTemplate = (fetchedTemplates || []).find((t: any) => t.is_default);
+
+          if (defaultTemplate && defaultTemplate.config) {
             setConfig({
-              ...settingRes.result,
+              ...defaultTemplate.config,
               current_sequence: currentSequence,
             });
+            setLoadedTemplate(defaultTemplate);
           } else {
             setConfig((prev) => ({
               ...prev,
@@ -115,11 +168,11 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
         .catch(() => {})
         .finally(() => setIsLoading(false));
     }
-  }, [isOpen, categoryId, isVariant]);
+  }, [isOpen, categoryId, isVariant, fetchCustomFields, fetchTemplates]);
 
   const generatePreview = (cfg = config) => {
     const effectiveCfg = { ...cfg, sequence_length: isVariant ? 0 : cfg.sequence_length };
-    return generateSkuPreview(effectiveCfg, categoryName, brandName, itemName, itemAttributes || (itemsAttributes ? itemsAttributes[0] : undefined));
+    return generateSkuPreview(effectiveCfg, categoryName, brandName, itemName, itemAttributes || (itemsAttributes ? itemsAttributes[0] : undefined), customFields);
   };
 
   const handleApply = async () => {
@@ -134,17 +187,13 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
 
       const nextConfig = { ...config };
       const effectiveSequenceLength = isVariant ? 0 : nextConfig.sequence_length;
-      const settingKey = isVariant ? "sku_generation_rule_variant_v3" : "sku_generation_rule_v3";
-      
-      // Save config and increment sequence
-      await saveInventorySetting(settingKey, nextConfig);
 
       if (itemNames && itemNames.length > 0) {
         // Generate for multiple items
         const generated = itemNames.map((name, idx) => {
           return generateSkuPreview(
             { ...nextConfig, sequence_length: effectiveSequenceLength, current_sequence: nextConfig.current_sequence + idx },
-            categoryName, brandName, name, itemsAttributes ? itemsAttributes[idx] : undefined
+            categoryName, brandName, name, itemsAttributes ? itemsAttributes[idx] : undefined, customFields
           );
         });
         onGenerate(generated, { ...nextConfig, current_sequence: nextConfig.current_sequence + count });
@@ -152,7 +201,7 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
         // Generate for single item
         const sku = generateSkuPreview(
           { ...nextConfig, sequence_length: effectiveSequenceLength },
-          categoryName, brandName, itemName, itemAttributes
+          categoryName, brandName, itemName, itemAttributes, customFields
         );
         onGenerate(sku, { ...nextConfig, current_sequence: nextConfig.current_sequence + 1 });
       }
@@ -169,13 +218,32 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
   const updatePart = (index: number, key: string, value: any) => {
     const newParts = [...config.parts];
     newParts[index] = { ...newParts[index], [key]: value };
+
+    // If selecting a custom_field, store field metadata
+    if (key === "type" && value.startsWith("custom_field:")) {
+      const fieldId = parseInt(value.split(":")[1]);
+      const field = customFields.find(f => f.id === fieldId);
+      newParts[index].field_id = fieldId;
+      newParts[index].field_code = field?.code || "";
+      newParts[index].field_name = field?.name || "";
+      // Default to first option code
+      newParts[index].selected_option_code = field?.options?.[0]?.code || "";
+    } else if (key === "type" && !value.startsWith("custom_field:")) {
+      delete newParts[index].field_id;
+      delete newParts[index].field_code;
+      delete newParts[index].field_name;
+      delete newParts[index].selected_option_code;
+    }
+
     setConfig({ ...config, parts: newParts });
+    setLoadedTemplate(null);
   };
 
   const removePart = (index: number) => {
     const newParts = [...config.parts];
     newParts.splice(index, 1);
     setConfig({ ...config, parts: newParts });
+    setLoadedTemplate(null);
   };
 
   const addPart = () => {
@@ -183,14 +251,36 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
       ...config,
       parts: [...config.parts, { type: "custom", length: 3, custom_value: "", separator: "-" }],
     });
+    setLoadedTemplate(null);
   };
 
-  const fieldOptions = [
-    { label: "Category", value: "category" },
-    { label: "Brand", value: "brand" },
-    { label: "Item Name", value: "name" },
-    ...(isVariant ? [{ label: "Variant Attributes", value: "attributes" }] : []),
+  const handleLoadTemplate = (template: SkuTemplate) => {
+    if (template.config) {
+      setConfig({
+        ...config,
+        parts: template.config.parts || [],
+        sequence_length: template.config.sequence_length ?? config.sequence_length,
+      });
+      setLoadedTemplate(template);
+    }
+    setIsTemplateDropdownOpen(false);
+    toast.success(`Template "${template.name}" loaded`);
+  };
+
+  // Build unified field options from API data (system fields first, then custom)
+  const systemFields = customFields.filter(f => f.is_system);
+  const userFields = customFields.filter(f => !f.is_system);
+
+  const allFieldOptions = [
+    // System fields
+    ...systemFields.map(f => ({ label: f.name, value: `custom_field:${f.id}` })),
+    // Custom text (always available)
     { label: "Custom Text/Code", value: "custom" },
+    // User-created custom fields
+    ...(userFields.length > 0 ? [
+      { label: "──── Custom Fields ────", value: "__divider__", disabled: true },
+      ...userFields.map(f => ({ label: f.name, value: `custom_field:${f.id}` })),
+    ] : []),
   ];
 
   const separatorOptions = [
@@ -209,6 +299,42 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
       ) : (
         <div className="space-y-5 animate-fade-in py-2">
           
+          {/* Template Preset Loader */}
+          {templates.length > 0 && (
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setIsTemplateDropdownOpen(!isTemplateDropdownOpen)}
+                className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors border border-primary-100"
+              >
+                <LayoutTemplate size={15} />
+                {loadedTemplate ? `Template: ${loadedTemplate.name}` : "Load Template"}
+                <ChevronDown size={14} className={`transition-transform ${isTemplateDropdownOpen ? "rotate-180" : ""}`} />
+              </button>
+              
+              {isTemplateDropdownOpen && (
+                <>
+                  <div className="fixed inset-0 z-10" onClick={() => setIsTemplateDropdownOpen(false)} />
+                  <div className="absolute top-full mt-1 left-0 z-20 bg-white border border-gray-200 rounded-xl shadow-lg py-1 min-w-[280px] max-h-[200px] overflow-y-auto">
+                    {templates.map(t => (
+                      <button
+                        key={t.id}
+                        type="button"
+                        onClick={() => handleLoadTemplate(t)}
+                        className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 transition-colors flex items-center justify-between"
+                      >
+                        <span className="font-medium text-gray-700">{t.name}</span>
+                        <span className="font-mono text-[11px] text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+                          {generatePreview({ ...t.config, current_sequence: 1 })}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
           <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">Formula Components</p>
@@ -229,47 +355,75 @@ export default function SkuConfigModal({ isOpen, onClose, onGenerate, categoryNa
 
             {/* Table Rows */}
             <div className="space-y-2">
-              {config.parts.map((part, index) => (
-                <div key={index} className="grid grid-cols-12 gap-3 items-center bg-white p-2 rounded-lg border border-gray-200">
-                  <div className="col-span-5">
-                    <Select 
-                      options={fieldOptions}
-                      value={part.type}
-                      onChange={(e) => updatePart(index, "type", e.target.value)}
-                    />
-                  </div>
-                  <div className="col-span-3">
-                    {part.type === "custom" ? (
-                      <Input 
-                        placeholder="e.g. PRE"
-                        value={part.custom_value}
-                        onChange={(e) => updatePart(index, "custom_value", e.target.value.toUpperCase())}
-                      />
-                    ) : (
-                      <Input 
-                        type="number"
-                        placeholder="3"
-                        value={String(part.length || 3)}
-                        onChange={(e) => updatePart(index, "length", Math.max(1, parseInt(e.target.value) || 1))}
-                      />
-                    )}
-                  </div>
-                  <div className="col-span-3">
-                    {!(isVariant && index === config.parts.length - 1) && (
-                      <Select 
-                        options={separatorOptions}
-                        value={part.separator}
-                        onChange={(e) => updatePart(index, "separator", e.target.value)}
-                      />
-                    )}
-                  </div>
-                  <div className="col-span-1 flex justify-center">
-                    <button type="button" onClick={() => removePart(index)} className="text-gray-400 hover:text-red-500 transition-colors p-1.5 rounded hover:bg-red-50">
-                      <Trash2 size={16} />
-                    </button>
+              {config.parts.map((part: any, index: number) => {
+                const currentType = part.type?.startsWith("custom_field:") ? part.type : part.type;
+                const isCustomField = part.type?.startsWith("custom_field:");
+                const customField = isCustomField ? customFields.find(f => f.id === parseInt(part.type.split(":")[1])) : null;
+
+                return (
+                  <div key={index} className="grid grid-cols-12 gap-3 items-center bg-white p-2 rounded-lg border border-gray-200">
+                    <div className="col-span-5">
+                      <select
+                        className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white text-sm focus:ring-2 focus:ring-primary-200 focus:border-primary-400 outline-none transition-all"
+                        value={currentType}
+                        onChange={(e) => updatePart(index, "type", e.target.value)}
+                      >
+                        {allFieldOptions.map((opt: any) => (
+                          <option key={opt.value} value={opt.value} disabled={opt.disabled || opt.value.startsWith("__divider")}>
+                            {opt.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div className="col-span-3">
+                      {part.type === "custom" ? (
+                        <Input 
+                          placeholder="e.g. PRE"
+                          value={part.custom_value}
+                          onChange={(e) => updatePart(index, "custom_value", e.target.value.toUpperCase())}
+                        />
+                      ) : isCustomField && customField && !customField.is_system && customField.options?.length > 0 ? (
+                        <select
+                          className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white text-sm focus:ring-2 focus:ring-primary-200 focus:border-primary-400 outline-none transition-all"
+                          value={part.selected_option_code || ""}
+                          onChange={(e) => updatePart(index, "selected_option_code", e.target.value)}
+                        >
+                          {customField.options.map(opt => (
+                            <option key={opt.code} value={opt.code}>
+                              {opt.label} ({opt.code})
+                            </option>
+                          ))}
+                        </select>
+                      ) : (
+                        <Input 
+                          type="number"
+                          placeholder="3"
+                          value={part.length === "" ? "" : String(part.length ?? 3)}
+                          onChange={(e) => updatePart(index, "length", e.target.value === "" ? "" : parseInt(e.target.value))}
+                        />
+                      )}
+                    </div>
+                    <div className="col-span-3">
+                      {isVariant && index === config.parts.length - 1 ? (
+                        <div className="w-full px-3 py-2 rounded-lg border border-transparent bg-gray-50/50 text-gray-400 text-sm italic flex items-center justify-center h-[38px]">
+                          None
+                        </div>
+                      ) : (
+                        <Select 
+                          options={separatorOptions}
+                          value={part.separator}
+                          onChange={(e) => updatePart(index, "separator", e.target.value)}
+                        />
+                      )}
+                    </div>
+                    <div className="col-span-1 flex justify-center">
+                      <button type="button" onClick={() => removePart(index)} className="text-gray-400 hover:text-red-500 transition-colors p-1.5 rounded hover:bg-red-50">
+                        <Trash2 size={16} />
+                      </button>
+                    </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
               
               {config.parts.length === 0 && (
                 <div className="text-center py-6 text-sm text-gray-400 border-2 border-dashed border-gray-200 rounded-lg bg-white">