Create the frontend receipes page to use real API 2

frontend/src/components/domain/recipes/CreateRecipeModal.tsx

@@ -57,7 +57,7 @@ export const CreateRecipeModal: React.FC<CreateRecipeModalProps> = ({
   });
 
   const [loading, setLoading] = useState(false);
-  const [mode, setMode] = useState<'overview' | 'edit'>('edit');
+  const [mode, setMode] = useState<'view' | 'edit'>('edit');
 
   // Get tenant and fetch inventory data
   const currentTenant = useCurrentTenant();
@@ -280,7 +280,8 @@ export const CreateRecipeModal: React.FC<CreateRecipeModalProps> = ({
     }
   };
 
-  const getModalSections = () => [
+  const getModalSections = () => {
+    const sections = [
     {
       title: 'Información Básica',
       icon: ChefHat,
@@ -588,12 +589,21 @@ export const CreateRecipeModal: React.FC<CreateRecipeModalProps> = ({
     }
   ];
 
+    // Add editable: true to all fields since this is a creation modal
+    return sections.map(section => ({
+      ...section,
+      fields: section.fields.map(field => ({
+        ...field,
+        editable: field.readonly !== true // Make editable unless explicitly readonly
+      }))
+    }));
+  };
+
   return (
     <StatusModal
       isOpen={isOpen}
       onClose={onClose}
-      mode={mode}
-      onModeChange={setMode}
+      mode="edit"
       title="Nueva Receta"
       subtitle="Crear una nueva receta para la panadería"
       statusIndicator={{
@@ -606,15 +616,9 @@ export const CreateRecipeModal: React.FC<CreateRecipeModalProps> = ({
       size="xl"
       sections={getModalSections()}
       onFieldChange={handleFieldChange}
-      actions={[
-        {
-          label: loading ? 'Creando...' : 'Crear Receta',
-          icon: ChefHat,
-          variant: 'primary',
-          onClick: handleSubmit,
-          disabled: loading || !formData.name.trim() || !formData.finished_product_id.trim()
-        }
-      ]}
+      showDefaultActions={true}
+      onSave={handleSubmit}
+      onCancel={onClose}
     />
   );
 };