Arreglado orden de renderizado de campos

src/routes/planes/$planId/_detalle/index.tsx

@@ -50,14 +50,34 @@ function DatosGeneralesPage() {
 
   // Efecto para transformar data?.datos en el arreglo de campos
   useEffect(() => {
-    const properties = data?.estructuras_plan?.definicion?.properties
+    const definicion = data?.estructuras_plan?.definicion as any
+    const properties = definicion?.properties
+    const requiredOrder = definicion?.required as Array<string> | undefined
 
-    const valores = data?.datos as Record<string, unknown>
+    const valores = (data?.datos as Record<string, unknown>) || {}
 
     if (properties && typeof properties === 'object') {
-      const datosTransformados: Array<DatosGeneralesField> = Object.entries(
-        properties,
-      ).map(([key, schema], index) => {
+      let keys = Object.keys(properties)
+
+      // Ordenar llaves basado en la lista "required" si existe
+      if (Array.isArray(requiredOrder)) {
+        keys = keys.sort((a, b) => {
+          const indexA = requiredOrder.indexOf(a)
+          const indexB = requiredOrder.indexOf(b)
+          // Si 'a' está en la lista y 'b' no -> 'a' primero (-1)
+          if (indexA !== -1 && indexB === -1) return -1
+          // Si 'b' está en la lista y 'a' no -> 'b' primero (1)
+          if (indexA === -1 && indexB !== -1) return 1
+          // Si ambos están, comparar índices
+          if (indexA !== -1 && indexB !== -1) return indexA - indexB
+          // Ninguno en la lista, mantener orden relativo
+          return 0
+        })
+      }
+
+      const datosTransformados: Array<DatosGeneralesField> = keys.map(
+        (key, index) => {
+          const schema = properties[key]
           const rawValue = valores[key]
 
           return {
@@ -66,7 +86,9 @@ function DatosGeneralesPage() {
             helperText: schema?.description || '',
             holder: schema?.examples || '',
             value:
-            rawValue !== undefined && rawValue !== null ? String(rawValue) : '',
+              rawValue !== undefined && rawValue !== null
+                ? String(rawValue)
+                : '',
 
             requerido: true,
 
@@ -79,7 +101,8 @@ function DatosGeneralesPage() {
 
             opciones: schema?.enum || [],
           }
-      })
+        },
+      )
 
       setCampos(datosTransformados)
     }
@@ -205,7 +228,7 @@ function DatosGeneralesPage() {
                       value={editValue}
                       onChange={(e) => setEditValue(e.target.value)}
                       className="placeholder:text-muted-foreground/70 min-h-30 not-italic placeholder:italic"
-                      placeholder={`Ej. ${campo.holder[0] as string}`}
+                      placeholder={`Ej. ${campo.holder[0]}`}
                     />
                     <div className="flex justify-end gap-2">
                       <Button