Persistencia en columnas de plan fix #113

src/components/planes/detalle/Ia/ImprovementCard.tsx

@@ -1,46 +1,92 @@
-import { Check } from 'lucide-react'
+import { Check, Loader2 } from 'lucide-react'
 import { useState } from 'react'
 
 import { Button } from '@/components/ui/button'
+import { useUpdatePlanFields } from '@/data' // Tu hook existente
 
 export const ImprovementCard = ({
   suggestions,
   onApply,
+  planId, // Necesitamos el ID
+  currentDatos, // Necesitamos los datos actuales para no sobrescribir todo el JSON
 }: {
   suggestions: Array<any>
-  onApply: (key: string, value: string) => void
+  onApply?: (key: string, value: string) => void
+  planId: string
+  currentDatos: any
 }) => {
-  // Estado para rastrear qué campos han sido aplicados
   const [appliedFields, setAppliedFields] = useState<Array<string>>([])
+  const updatePlan = useUpdatePlanFields()
 
-  const handleApply = (key: string, value: string) => {
-    onApply(key, value)
-    setAppliedFields((prev) => [...prev, key])
+  const handleApply = (key: string, newValue: string) => {
+    if (!currentDatos) return
+
+    // 1. Lógica para preparar el valor (idéntica a tu handleSave original)
+    const currentValue = currentDatos[key]
+    let finalValue: any
+
+    if (
+      typeof currentValue === 'object' &&
+      currentValue !== null &&
+      'description' in currentValue
+    ) {
+      finalValue = { ...currentValue, description: newValue }
+    } else {
+      finalValue = newValue
+    }
+
+    // 2. Construir el nuevo objeto 'datos' manteniendo lo que ya existía
+    const datosActualizados = {
+      ...currentDatos,
+      [key]: finalValue,
+    }
+
+    // 3. Ejecutar la mutación directamente aquí
+    updatePlan.mutate(
+      {
+        planId: planId as any,
+        patch: { datos: datosActualizados },
+      },
+      {
+        onSuccess: () => {
+          setAppliedFields((prev) => [...prev, key])
+          if (onApply) onApply(key, newValue)
+          console.log(`Campo ${key} guardado exitosamente`)
+        },
+      },
+    )
   }
 
   return (
     <div className="mt-2 flex w-full flex-col gap-4">
       {suggestions.map((sug) => {
         const isApplied = appliedFields.includes(sug.key)
+        const isUpdating =
+          updatePlan.isPending &&
+          updatePlan.variables.patch.datos?.[sug.key] !== undefined
 
         return (
           <div
             key={sug.key}
-            className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm"
+            className={`rounded-2xl border bg-white p-5 shadow-sm transition-all ${
+              isApplied ? 'border-teal-200 bg-teal-50/20' : 'border-slate-100'
+            }`}
           >
             <div className="mb-4 flex items-center justify-between">
               <h3 className="text-sm font-bold text-slate-900">{sug.label}</h3>
               <Button
                 size="sm"
                 onClick={() => handleApply(sug.key, sug.newValue)}
-                disabled={isApplied}
+                disabled={isApplied || !!isUpdating}
                 className={`h-8 rounded-full px-4 text-xs transition-all ${
                   isApplied
                     ? 'cursor-not-allowed bg-slate-100 text-slate-400'
                     : 'bg-[#00a189] text-white hover:bg-[#008f7a]'
                 }`}
               >
-                {isApplied ? (
+                {isUpdating ? (
+                  <Loader2 size={12} className="animate-spin" />
+                ) : isApplied ? (
                   <span className="flex items-center gap-1">
                     <Check size={12} /> Aplicado
                   </span>
@@ -53,7 +99,7 @@ export const ImprovementCard = ({
             <div
               className={`rounded-xl border p-3 text-sm transition-colors duration-300 ${
                 isApplied
-                  ? 'border-[#ccfbf1] bg-[#f0fdfa] text-slate-700'
+                  ? 'border-teal-100 bg-teal-50/50 text-slate-700'
                   : 'border-slate-200 bg-slate-50 text-slate-500'
               }`}
             >