Se agrega funcionalidad de historico de cambios

src/components/historico/HistorialCambiosModal.tsx

@@ -0,0 +1,92 @@
+import { useQuery } from "@tanstack/react-query"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { supabase } from "@/auth/supabase"
+import ReactMarkdown from "react-markdown"
+import { useSupabaseAuth } from "@/auth/supabase"
+
+export function HistorialCambiosModal({
+  open,
+  onClose,
+  planId,
+  onRestore, // 🔥 recibiremos una función del padre para restaurar
+}: {
+  open: boolean
+  onClose: () => void
+  planId: string
+  onRestore: (key: string, value: string) => void
+}) {
+  const auth = useSupabaseAuth()
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["historico_cambios", planId, auth.user?.id],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("historico_cambios")
+        .select("id, json_cambios, user_id, created_at")
+        .eq("id_plan_estudios", planId)
+        .eq("user_id", auth.user?.id) // ✅ filtro por usuario actual
+        .order("created_at", { ascending: false })
+
+      if (error) throw error
+      return data
+    },
+    enabled: !!auth.user?.id, // ✅ solo corre si hay usuario autenticado
+  })
+
+    return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Histórico de cambios</DialogTitle>
+        </DialogHeader>
+
+        {isLoading && <p className="text-sm text-gray-500">Cargando historial...</p>}
+        {error && <p className="text-red-500 text-sm">Error al cargar: {String(error)}</p>}
+        {!isLoading && !error && (!data || data.length === 0) && (
+          <p className="text-gray-500 text-sm">No hay cambios registrados.</p>
+        )}
+
+        <div className="space-y-4 max-h-[60vh] overflow-y-auto">
+          {data?.map((item) => {
+            const diff = item.json_cambios?.[0]
+            const key = diff?.path?.replace("/", "")
+            return (
+              <div
+                key={item.id}
+                className="rounded-lg border p-3 bg-white/70 dark:bg-neutral-900/50"
+              >
+                <div className="flex justify-between text-xs text-neutral-500 mb-2">
+                  <span>Usuario: {item.user_id || "Desconocido"}</span>
+                  <span>{new Date(item.created_at).toLocaleString()}</span>
+                </div>
+
+                <div className="text-xs text-gray-700 font-mono whitespace-pre-wrap">
+                  <p><strong>Campo:</strong> {key}</p>
+                  <p><strong>Antes:</strong> {diff?.from || "—"}</p>
+                  <p><strong>Después:</strong> {diff?.value || "—"}</p>
+                </div>
+
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="mt-2"
+                  onClick={() => onRestore(key, diff.from)}
+                >
+                  Restaurar
+                </Button>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="mt-4 text-right">
+          <Button variant="outline" onClick={onClose}>
+            Cerrar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+
+}

src/components/planes/academic-sections.tsx

@@ -7,6 +7,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { supabase,useSupabaseAuth } from "@/auth/supabase"
 import { toast } from "sonner"
 import ReactMarkdown from 'react-markdown'
+import { HistorialCambiosModal } from "../historico/HistorialCambiosModal"
 
 
 /* =====================================================
@@ -27,6 +28,7 @@ export type PlanTextFields = {
   indicadores_desempeno?: string | string[] | null
   pertinencia?: string | string[] | null
   prompt?: string | null
+  historico?: string | null
 }
 
 async function fetchPlanText(planId: string): Promise<PlanTextFields> {
@@ -112,6 +114,7 @@ function SectionPanel({ title, icon: Icon, color, children, id }: { title: strin
 export function AcademicSections({ planId, color }: { planId: string; color?: string | null }) {
   const qc = useQueryClient()
   const auth = useSupabaseAuth()
+  const [openHistorial, setOpenHistorial] = useState(false)
   if(!planId) return <div>Cargando…</div>
   const { data: plan } = useSuspenseQuery(planTextOptions(planId))
 
@@ -155,6 +158,7 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
       { id: "sec-ind", title: "Indicadores de desempeño", icon: Icons.LineChart, key: "indicadores_desempeno" as const, mono: false },
       { id: "sec-per", title: "Pertinencia", icon: Icons.Lightbulb, key: "pertinencia" as const, mono: false },
       { id: "sec-prm", title: "Prompt (origen)", icon: Icons.Code2, key: "prompt" as const, mono: true },
+      { id: "sec-hist", title: "Histórico de cambios", icon: Icons.History, key: "historico" as const, mono: false }
     ],
     []
   )
@@ -166,6 +170,12 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
         const text = plan[s.key] ?? null
         return (
           <SectionPanel key={s.id} id={s.id} title={s.title} icon={s.icon} color={color}>
+            {s.key === "historico" ? (
+              <Button variant="outline" size="sm" onClick={() => setOpenHistorial(true)}>
+                Ver historial
+              </Button>
+            ) : (
+              <>
                 <ExpandableText text={text} mono={s.mono} />
                 <div className="mt-4 flex flex-wrap gap-2">
                   <Button
@@ -179,8 +189,8 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
                   >
                     Copiar
                   </Button>
-                {s.key !== "prompt" && 
-                  (<Button
+                  {s.key !== "prompt" && (
+                    <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => {
@@ -190,11 +200,15 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
                       }}
                     >
                       Editar
-                  </Button>)}
+                    </Button>
+                  )}
                 </div>
+              </>
+            )}
           </SectionPanel>
         )
       })}
+
       </div>
 
      {/* Diálogo de edición */}
@@ -257,7 +271,14 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
         </DialogFooter>
       </DialogContent>
     </Dialog>
-
+      <HistorialCambiosModal
+      open={openHistorial}
+      onClose={() => setOpenHistorial(false)}
+      planId={planId}
+      onRestore={async (key, value) => {        
+        updateField.mutate({ key, value })
+      }}
+    />
     </>
   )
 }