feat: add ConfigurationFieldsColumn component with search, reorder, and management capabilities

src/app/configuration/actionBuilder/components/ConfigurationFieldsColumn.tsx

@@ -40,6 +40,8 @@ export function ConfigurationFieldsColumn({
       (f.section || '').toLowerCase().includes(search.toLowerCase())
   );
 
+  const fieldNameByCode = new Map(fields.map((f) => [f.fieldCode, f.fieldName]));
+
   return (
     <div className="bg-[#FFFFFF] p-4 rounded-[20px] border border-gray-200/70 shadow-sm space-y-4 flex flex-col min-h-[600px]">
       {/* Column Header */}
@@ -85,10 +87,15 @@ export function ConfigurationFieldsColumn({
         ) : (
           filteredFields.map((f, idx) => {
             const hasVisibility = f.visibilityConditionJson?.field && f.visibilityConditionJson?.value;
+            const depFieldName = hasVisibility
+              ? fieldNameByCode.get(f.visibilityConditionJson!.field) || f.visibilityConditionJson!.field
+              : 'Field Name';
+
             const minVal = f.validationJson?.min;
             const maxVal = f.validationJson?.max;
             const hasMinMax = minVal !== undefined || maxVal !== undefined;
 
+
             const isDragging = draggedIndex === idx;
             const isDragOver = dragOverIndex === idx;
 
@@ -239,7 +246,7 @@ export function ConfigurationFieldsColumn({
                   <div className="pt-2 flex items-end justify-between gap-3">
                     {hasVisibility ? (
                       <div className="bg-[#FFF8E6] border border-[#FDE6B8] text-[#B45309] rounded-[10px] px-3.5 py-2 text-[12px] space-y-0.5 max-w-[70%]">
-                        <div className="font-medium text-[#B45309]">Visible if Field Name =</div>
+                        <div className="font-medium text-[#B45309]">Visible if {depFieldName} =</div>
                         <div className="font-bold text-[#B45309] uppercase break-all">
                           {String(f.visibilityConditionJson?.value)}
                         </div>