Se agrega funcionalidad de historico de cambios

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 }
     ],
     []
   )
@@ -163,38 +167,48 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
     <>
       <div className="grid gap-5 md:grid-cols-2">
         {sections.map((s) => {
-          const text = plan[s.key] ?? null
-          return (
-            <SectionPanel key={s.id} id={s.id} title={s.title} icon={s.icon} color={color}>
-              <ExpandableText text={text} mono={s.mono} />
-              <div className="mt-4 flex flex-wrap gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={!text || (Array.isArray(text) && text.length === 0)}
-                  onClick={() => {
-                    const toCopy = Array.isArray(text) ? text.join("\n") : (text ?? "")
-                    if (toCopy) navigator.clipboard.writeText(toCopy)
-                  }}
-                >
-                  Copiar
-                </Button>
-                {s.key !== "prompt" && 
-                  (<Button
-                    variant="ghost"
+        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
+                    variant="outline"
                     size="sm"
+                    disabled={!text || (Array.isArray(text) && text.length === 0)}
                     onClick={() => {
-                      const current = Array.isArray(text) ? text.join("\n") : (text ?? "")
-                      setEditing({ key: s.key, title: s.title })
-                      setDraft(current)
+                      const toCopy = Array.isArray(text) ? text.join("\n") : (text ?? "")
+                      if (toCopy) navigator.clipboard.writeText(toCopy)
                     }}
                   >
-                    Editar
-                  </Button>)}
-              </div>
-            </SectionPanel>
-          )
-        })}
+                    Copiar
+                  </Button>
+                  {s.key !== "prompt" && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const current = Array.isArray(text) ? text.join("\n") : (text ?? "")
+                        setEditing({ key: s.key, title: s.title })
+                        setDraft(current)
+                      }}
+                    >
+                      Editar
+                    </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 })
+      }}
+    />
     </>
   )
 }