Improve the frontend 2

frontend/src/components/ui/EditViewModal/EditViewModal.tsx

@@ -144,11 +144,7 @@ const renderEditableField = (
   onChange?: (value: string | number) => void,
   validationError?: string
 ): React.ReactNode => {
-  if (!isEditMode || !field.editable) {
-    return formatFieldValue(field.value, field.type);
-  }
-
-  // Handle custom components
+  // Handle custom components FIRST - they work in both view and edit modes
   if (field.type === 'component' && field.component) {
     const Component = field.component;
     return (
@@ -160,6 +156,11 @@ const renderEditableField = (
     );
   }
 
+  // Then check if we should render as view or edit
+  if (!isEditMode || !field.editable) {
+    return formatFieldValue(field.value, field.type);
+  }
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = field.type === 'number' || field.type === 'currency' ? Number(e.target.value) : e.target.value;
     onChange?.(value);
@@ -355,6 +356,16 @@ export const EditViewModal: React.FC<EditViewModalProps> = ({
   const StatusIcon = statusIndicator?.icon;
   const [isSaving, setIsSaving] = React.useState(false);
   const [isWaitingForRefetch, setIsWaitingForRefetch] = React.useState(false);
+  const [collapsedSections, setCollapsedSections] = React.useState<Record<number, boolean>>({});
+
+  // Initialize collapsed states when sections change
+  React.useEffect(() => {
+    const initialCollapsed: Record<number, boolean> = {};
+    sections.forEach((section, index) => {
+      initialCollapsed[index] = section.collapsed || false;
+    });
+    setCollapsedSections(initialCollapsed);
+  }, [sections]);
 
   const handleEdit = () => {
     if (onModeChange) {
@@ -616,7 +627,7 @@ export const EditViewModal: React.FC<EditViewModalProps> = ({
 
         <div className="space-y-6">
           {sections.map((section, sectionIndex) => {
-            const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
+            const isCollapsed = collapsedSections[sectionIndex] || false;
             const sectionColumns = section.columns || (mobileOptimized ? 1 : 2);
 
             // Determine grid classes based on mobile optimization and section columns
@@ -642,7 +653,12 @@ export const EditViewModal: React.FC<EditViewModalProps> = ({
                   className={`flex items-start gap-3 pb-3 border-b border-[var(--border-primary)] ${
                     section.collapsible ? 'cursor-pointer' : ''
                   }`}
-                  onClick={section.collapsible ? () => setIsCollapsed(!isCollapsed) : undefined}
+                  onClick={section.collapsible ? () => {
+                    setCollapsedSections(prev => ({
+                      ...prev,
+                      [sectionIndex]: !isCollapsed
+                    }));
+                  } : undefined}
                 >
                   {section.icon && (
                     <section.icon className="w-5 h-5 text-[var(--text-secondary)] flex-shrink-0 mt-0.5" />