wip

src/components/planes/CreatePlanDialog.tsx

@@ -1,15 +1,24 @@
-import { useRouter } from "@tanstack/react-router"
+import { useRouter } from "@tanstack/react-router";
-import { useSupabaseAuth } from "@/auth/supabase"
+import { useSupabaseAuth } from "@/auth/supabase";
-import { useState, useEffect, useCallback } from "react"
+import { useState, useEffect, useCallback } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import {
-import { Label } from "@/components/ui/label"
+  Dialog,
-import { Textarea } from "@/components/ui/textarea"
+  DialogContent,
-import { Input } from "@/components/ui/input"
+  DialogHeader,
-import { CarreraCombobox, FacultadCombobox } from "@/components/users/procedencia-combobox"
+  DialogTitle,
-import { Button } from "@/components/ui/button"
+  DialogFooter,
-import { postAPI } from "@/lib/api"
+} from "@/components/ui/dialog";
-import { supabase } from "@/auth/supabase"
+import { Label } from "@/components/ui/label";
-import { DetailDialog } from "@/components/archivos/DetailDialog"
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import {
+  CarreraCombobox,
+  FacultadCombobox,
+} from "@/components/users/procedencia-combobox";
+import { Button } from "@/components/ui/button";
+import { postAPI } from "@/lib/api";
+import { supabase } from "@/auth/supabase";
+import { DetailDialog } from "@/components/archivos/DetailDialog";
 import type { RefRow } from "@/types/RefRow";
 
 // ————————————————————————————————————————————————————————————————
@@ -50,42 +59,51 @@ function extIcon(ext: string) {
 // ————————————————————————————————————————————————————————————————
 // Componente principal
 // ————————————————————————————————————————————————————————————————
-export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (v: boolean) => void }) {
+export function CreatePlanDialog({
-  const router = useRouter()
+  open,
-  const auth = useSupabaseAuth()
+  onOpenChange,
-  const role = auth.claims?.role
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const router = useRouter();
+  const auth = useSupabaseAuth();
+  const role = auth.claims?.role;
 
-  const [saving, setSaving] = useState(false)
+  const [saving, setSaving] = useState(false);
-  const [err, setErr] = useState<string | null>(null)
+  const [err, setErr] = useState<string | null>(null);
 
-  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "")
+  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "");
-  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "")
+  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "");
-  const [nivel, setNivel] = useState("")
+  const [nivel, setNivel] = useState("");
   const [prompt, setPrompt] = useState(
     "Genera un plan de estudios claro y realista: "
-  )
+  );
 
-  const [dbFiles, setDbFiles] = useState<{
+  const [dbFiles, setDbFiles] = useState<
+    {
       id: string;
       titulo: string;
       s3_file_path: string;
       fecha_subida?: string;
       tags?: string[];
-  }[]>([])
+    }[]
-  const [selectedFiles, setSelectedFiles] = useState<string[]>([])
+  >([]);
-  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(null)
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
-  const [searchTerm, setSearchTerm] = useState("")
+  const [lastSelectedIndex, setLastSelectedIndex] = useState<number | null>(
-  const [currentPage, setCurrentPage] = useState(1)
+    null
-  const itemsPerPage = 10
+  );
-  const debouncedSearchTerm = useDebounce(searchTerm, 300)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const totalPages = Math.ceil(dbFiles.length / itemsPerPage);
 
   const [previewRow, setPreviewRow] = useState<RefRow | null>(null);
 
-  const lockFacultad = role === "secretario_academico" || role === "jefe_carrera"
+  const lockFacultad =
-  const lockCarrera = role === "jefe_carrera"
+    role === "secretario_academico" || role === "jefe_carrera";
-
+  const lockCarrera = role === "jefe_carrera";
-  
 
   useEffect(() => {
     async function fetchDbFiles() {
@@ -94,20 +112,25 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
           .from("documentos")
           .select("documentos_id, titulo_archivo, fecha_subida, tags")
           .ilike("titulo_archivo", `%${debouncedSearchTerm}%`)
-          .range((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage - 1);
+          .range(
+            (currentPage - 1) * itemsPerPage,
+            currentPage * itemsPerPage - 1
+          );
 
         if (error) {
           console.error("Error fetching files from database:", error);
           return;
         }
 
-        setDbFiles((data || []).map((file: any) => ({
+        setDbFiles(
+          (data || []).map((file: any) => ({
             id: file.documentos_id,
             titulo: file.titulo_archivo,
             s3_file_path: `prueba-referencias/documento_${file.documentos_id}.pdf`,
             fecha_subida: file.fecha_subida,
             tags: file.tags || [],
-        })));
+          }))
+        );
       } catch (err) {
         console.error("Unexpected error fetching files:", err);
       }
@@ -116,23 +139,32 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
     if (open) fetchDbFiles();
   }, [open, debouncedSearchTerm, currentPage]);
 
-  const isSelected = useCallback((path: string) => selectedFiles.includes(path), [selectedFiles]);
+  const isSelected = useCallback(
+    (path: string) => selectedFiles.includes(path),
+    [selectedFiles]
+  );
 
   const toggleSelected = useCallback((id: string) => {
-    setSelectedFiles(prev => prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id]);
+    setSelectedFiles((prev) =>
+      prev.includes(id) ? prev.filter((p) => p !== id) : [...prev, id]
+    );
   }, []);
 
   const replaceSelection = useCallback((id: string) => {
     setSelectedFiles([id]);
   }, []);
 
-  const rangeSelect = useCallback((start: number, end: number) => {
+  const rangeSelect = useCallback(
+    (start: number, end: number) => {
       const [s, e] = start < end ? [start, end] : [end, start];
-    const ids = dbFiles.slice(s, e + 1).map(f => f.id);
+      const ids = dbFiles.slice(s, e + 1).map((f) => f.id);
-    setSelectedFiles(prev => Array.from(new Set([...prev, ...ids])));
+      setSelectedFiles((prev) => Array.from(new Set([...prev, ...ids])));
-  }, [dbFiles]);
+    },
+    [dbFiles]
+  );
 
-  const handleCardClick = useCallback((e: React.MouseEvent, index: number, file: { id: string }) => {
+  const handleCardClick = useCallback(
+    (e: React.MouseEvent, index: number, file: { id: string }) => {
       const id = file.id;
 
       if (e.shiftKey && lastSelectedIndex !== null) {
@@ -150,7 +182,16 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
           setLastSelectedIndex(index);
         }
       }
-  }, [isSelected, lastSelectedIndex, rangeSelect, replaceSelection, selectedFiles.length, toggleSelected]);
+    },
+    [
+      isSelected,
+      lastSelectedIndex,
+      rangeSelect,
+      replaceSelection,
+      selectedFiles.length,
+      toggleSelected,
+    ]
+  );
 
   const clearSelection = () => {
     setSelectedFiles([]);
@@ -158,30 +199,51 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
   };
 
   async function crearConIA() {
-    setErr(null)
+    setErr(null);
-    if (!carreraId) { setErr("Selecciona una carrera."); return }
+    if (!carreraId) {
-    setSaving(true)
+      setErr("Selecciona una carrera.");
+      return;
+    }
+    setSaving(true);
     try {
-      const res = await postAPI("/api/generar/plan", {
+
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      const token = session?.access_token;
+
+      const { data, error } = await supabase.functions.invoke(
+        "crear-plan-estudios",
+        {
+          headers: { Authorization: `Bearer ${token}` },
+          body: {
             carreraId,
-        prompt: prompt,
+            prompt_usuario: prompt,
             insert: true,
-        files: selectedFiles,
+            archivos_a_usar: [],
-        created_by: auth.user?.id,
+          },
-      })
+        }
-      const newId = (res as any)?.id || (res as any)?.plan?.id || (res as any)?.data?.id
+      );
+      if (error) throw error;
+
+      const res = JSON.parse(data as string);
+
+      const newId =
+        (res as any)?.id || (res as any)?.plan?.id || (res as any)?.data?.id;
       if (newId) {
-        onOpenChange(false)
+        onOpenChange(false);
-        router.invalidate()
+        router.invalidate();
-        router.navigate({ to: "/plan/$planId", params: { planId: newId } })
+        router.navigate({ to: "/plan/$planId", params: { planId: newId } });
       } else {
-        onOpenChange(false)
+        onOpenChange(false);
-        router.invalidate()
+        router.invalidate();
       }
     } catch (e: any) {
-      setErr(typeof e?.message === "string" ? e.message : "Error al generar el plan.")
+      setErr(
+        typeof e?.message === "string" ? e.message : "Error al generar el plan."
+      );
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
   }
 
@@ -192,7 +254,9 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="min-w-[65vw] max-w-4xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="font-mono">Nuevo plan de estudios (IA)</DialogTitle>
+          <DialogTitle className="font-mono">
+            Nuevo plan de estudios (IA)
+          </DialogTitle>
         </DialogHeader>
 
         <div className="grid gap-4 md:grid-cols-2">
@@ -215,7 +279,10 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
             <Label>Facultad</Label>
             <FacultadCombobox
               value={facultadId}
-              onChange={(id) => { setFacultadId(id); setCarreraId("") }}
+              onChange={(id) => {
+                setFacultadId(id);
+                setCarreraId("");
+              }}
               disabled={lockFacultad}
               placeholder="Elige una facultad…"
             />
@@ -228,7 +295,11 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
               value={carreraId}
               onChange={setCarreraId}
               disabled={!facultadId || lockCarrera}
-              placeholder={facultadId ? "Elige una carrera…" : "Selecciona una facultad primero"}
+              placeholder={
+                facultadId
+                  ? "Elige una carrera…"
+                  : "Selecciona una facultad primero"
+              }
             />
           </div>
 
@@ -246,11 +317,19 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
             <div className="text-sm text-neutral-600">
               {selectedFiles.length > 0 ? (
                 <span>
-                  {selectedFiles.length} seleccionado{selectedFiles.length > 1 ? 's' : ''}
+                  {selectedFiles.length} seleccionado
-                  <button className="ml-3 underline hover:no-underline" onClick={clearSelection}>Limpiar</button>
+                  {selectedFiles.length > 1 ? "s" : ""}
+                  <button
+                    className="ml-3 underline hover:no-underline"
+                    onClick={clearSelection}
+                  >
+                    Limpiar
+                  </button>
                 </span>
               ) : (
-                <span>Tip: ⇧ para seleccionar rango, ⌘/Ctrl para múltiples.</span>
+                <span>
+                  Tip: ⇧ para seleccionar rango, ⌘/Ctrl para múltiples.
+                </span>
               )}
             </div>
           </div>
@@ -258,7 +337,10 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
           {/* Grid de archivos con selección tipo file manager */}
           <div className="md:col-span-2 space-y-1">
             <Label>Archivos de referencia (opcional)</Label>
-            <div role="grid" className="grid gap-4 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+            <div
+              role="grid"
+              className="grid gap-4 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+            >
               {dbFiles.map((file, index) => {
                 const ext = fileExt(file.titulo);
                 const selected = isSelected(file.id);
@@ -285,10 +367,10 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                         fecha_subida: file.fecha_subida ?? null,
                         tags: file.tags ?? null,
                         instrucciones: "",
-                      })
+                      });
                     }}
                     onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
+                      if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         handleCardClick(e as any, index, file);
                       }
@@ -296,31 +378,51 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                     className={[
                       "group relative rounded-2xl border bg-white p-4 text-left shadow-sm transition",
                       "hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
-                      selected ? "border-blue-500 ring-2 ring-blue-500 shadow-md" : "border-neutral-200 hover:border-neutral-300",
+                      selected
-                    ].join(' ')}
+                        ? "border-blue-500 ring-2 ring-blue-500 shadow-md"
+                        : "border-neutral-200 hover:border-neutral-300",
+                    ].join(" ")}
                   >
                     {/* Outline animado tipo file manager */}
-                    <span className={[
+                    <span
+                      className={[
                         "pointer-events-none absolute inset-0 rounded-2xl ring-2 ring-blue-500",
                         "opacity-0 group-aria-selected:opacity-100 group-focus:opacity-100 transition-opacity",
-                    ].join(' ')} />
+                      ].join(" ")}
+                    />
 
                     <div className="flex items-start gap-3">
                       <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border bg-neutral-50">
-                        <span className="text-lg" aria-hidden>{extIcon(ext)}</span>
+                        <span className="text-lg" aria-hidden>
+                          {extIcon(ext)}
+                        </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="font-semibold text-sm md:text-base truncate" title={file.titulo}>{file.titulo}</h3>
+                        <h3
+                          className="font-semibold text-sm md:text-base truncate"
+                          title={file.titulo}
+                        >
+                          {file.titulo}
+                        </h3>
                         {file.fecha_subida ? (
-                          <p className="text-xs text-neutral-600">{new Date(file.fecha_subida).toLocaleDateString()}</p>
+                          <p className="text-xs text-neutral-600">
+                            {new Date(file.fecha_subida).toLocaleDateString()}
+                          </p>
                         ) : (
-                          <p className="text-xs text-neutral-500">Fecha desconocida</p>
+                          <p className="text-xs text-neutral-500">
+                            Fecha desconocida
+                          </p>
                         )}
 
                         {file.tags && file.tags.length > 0 && (
                           <div className="mt-2 flex flex-wrap gap-1.5">
                             {file.tags.map((tag, i) => (
-                              <span key={i} className="text-[10px] px-2 py-0.5 bg-neutral-100 text-neutral-700 rounded-full">#{tag}</span>
+                              <span
+                                key={i}
+                                className="text-[10px] px-2 py-0.5 bg-neutral-100 text-neutral-700 rounded-full"
+                              >
+                                #{tag}
+                              </span>
                             ))}
                           </div>
                         )}
@@ -347,50 +449,69 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
                             fecha_subida: file.fecha_subida ?? null,
                             tags: file.tags ?? null,
                             instrucciones: "",
-                          })
+                          });
                         }}
-                      >Previsualizar</Button>
+                      >
+                        Previsualizar
+                      </Button>
                     </div>
 
                     {/* Footer compacto */}
                     <div className="mt-4 flex items-center justify-between text-xs text-neutral-600">
                       <span className="truncate">{ext.toUpperCase()}</span>
-                      {selected ? <span className="font-medium">Seleccionado</span> : <span className="opacity-60">Click para seleccionar</span>}
+                      {selected ? (
+                        <span className="font-medium">Seleccionado</span>
+                      ) : (
+                        <span className="opacity-60">
+                          Click para seleccionar
+                        </span>
+                      )}
                     </div>
                   </div>
-                )
+                );
               })}
 
               {dbFiles.length === 0 && (
-                <p className="text-sm text-neutral-500">No se encontraron archivos.</p>
+                <p className="text-sm text-neutral-500">
+                  No se encontraron archivos.
+                </p>
               )}
             </div>
 
             {/* Paginación mejorada */}
             {dbFiles.length > itemsPerPage && (
               <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
-                <div className="text-sm text-neutral-700">Página {currentPage} de {totalPages}</div>
+                <div className="text-sm text-neutral-700">
+                  Página {currentPage} de {totalPages}
+                </div>
                 <div className="flex items-center gap-2">
                   <Button
                     variant="outline"
                     size="sm"
                     disabled={currentPage === 1}
                     onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-                  >Anterior</Button>
+                  >
+                    Anterior
+                  </Button>
                   <Input
                     className="h-8 w-16 text-center"
                     value={currentPage}
                     onChange={(e) => {
-                      const v = parseInt(e.target.value || '1', 10);
+                      const v = parseInt(e.target.value || "1", 10);
-                      if (!isNaN(v)) setCurrentPage(Math.min(Math.max(v, 1), totalPages));
+                      if (!isNaN(v))
+                        setCurrentPage(Math.min(Math.max(v, 1), totalPages));
                     }}
                   />
                   <Button
                     variant="outline"
                     size="sm"
                     disabled={currentPage === totalPages}
-                    onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
+                    onClick={() =>
-                  >Siguiente</Button>
+                      setCurrentPage((p) => Math.min(p + 1, totalPages))
+                    }
+                  >
+                    Siguiente
+                  </Button>
                 </div>
               </div>
             )}
@@ -400,19 +521,26 @@ export function CreatePlanDialog({ open, onOpenChange }: { open: boolean; onOpen
         {err && <div className="text-sm text-red-600">{err}</div>}
 
         <DialogFooter className="flex flex-col-reverse sm:flex-row gap-2">
-          <Button variant="outline" className="w-full sm:w-auto" onClick={() => onOpenChange(false)}>Cancelar</Button>
+          <Button
-          <Button className="w-full sm:w-auto" onClick={crearConIA} disabled={saving}>
+            variant="outline"
+            className="w-full sm:w-auto"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancelar
+          </Button>
+          <Button
+            className="w-full sm:w-auto"
+            onClick={crearConIA}
+            disabled={saving}
+          >
             {saving ? "Generando…" : "Generar y crear"}
           </Button>
         </DialogFooter>
       </DialogContent>
 
       {previewRow && (
-        <DetailDialog
+        <DetailDialog row={previewRow} onClose={() => setPreviewRow(null)} />
-          row={previewRow}
-          onClose={() => setPreviewRow(null)}
-        />
       )}
     </Dialog>
-  )
+  );
 }

src/components/planes/academic-sections.tsx

@@ -1,16 +1,26 @@
-import * as Icons from "lucide-react"
+import * as Icons from "lucide-react";
-import { useMemo, useState } from "react"
+import { useMemo, useState } from "react";
-import { useSuspenseQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query"
+import {
-import { Button } from "@/components/ui/button"
+  useSuspenseQuery,
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+  useMutation,
-import { Textarea } from "@/components/ui/textarea"
+  useQueryClient,
-import { supabase,useSupabaseAuth } from "@/auth/supabase"
+  queryOptions,
-import { toast } from "sonner"
+} from "@tanstack/react-query";
-import ReactMarkdown from 'react-markdown'
+import { Button } from "@/components/ui/button";
-import { HistorialCambiosModal } from "../historico/HistorialCambiosModal"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+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";
 // @ts-ignore
-import  AIChatModal  from "../ai/AIChatModal"
+import AIChatModal from "../ai/AIChatModal";
-
 
 /* =====================================================
    Query keys & fetcher
@@ -18,33 +28,29 @@ import  AIChatModal  from "../ai/AIChatModal"
 export const planKeys = {
   root: ["plan"] as const,
   byId: (id: string) => [...planKeys.root, id] as const,
-}
+};
 
 export type PlanTextFields = {
-  objetivo_general?: string | string[] | null
+  objetivo_general?: string | string[] | null;
-  sistema_evaluacion?: string | string[] | null
+  sistema_evaluacion?: string | string[] | null;
-  perfil_ingreso?: string | string[] | null
+  perfil_ingreso?: string | string[] | null;
-  perfil_egreso?: string | string[] | null
+  perfil_egreso?: string | string[] | null;
-  competencias_genericas?: string | string[] | null
+  competencias_genericas?: string | string[] | null;
-  competencias_especificas?: string | string[] | null
+  competencias_especificas?: string | string[] | null;
-  indicadores_desempeno?: string | string[] | null
+  indicadores_desempeno?: string | string[] | null;
-  pertinencia?: string | string[] | null
+  pertinencia?: string | string[] | null;
-  prompt?: string | null
+  prompt?: string | null;
-  historico?: string | null
+  historico?: string | null;
-}
+};
 
 async function fetchPlanText(planId: string): Promise<PlanTextFields> {
   const { data, error } = await supabase
     .from("plan_estudios")
-    .select(
+    .select(`*`)
-      `objetivo_general, sistema_evaluacion, perfil_ingreso, perfil_egreso,
-       competencias_genericas, competencias_especificas, indicadores_desempeno,
-       pertinencia, prompt`
-    )
     .eq("id", planId)
-    .single()
+    .single();
-  if (error) throw error
+  if (error) throw error;
-  return (data ?? {}) as PlanTextFields
+  return (data ?? {}) as PlanTextFields;
 }
 
 export const planTextOptions = (planId: string) =>
@@ -52,135 +58,341 @@ export const planTextOptions = (planId: string) =>
     queryKey: planKeys.byId(planId),
     queryFn: () => fetchPlanText(planId),
     staleTime: 60_000,
-  })
+  });
 
 /* =====================================================
    Color helpers
 ===================================================== */
 function hexToRgb(hex?: string | null): [number, number, number] {
-  if (!hex) return [37, 99, 235]
+  if (!hex) return [37, 99, 235];
-  const h = hex.replace("#", "")
+  const h = hex.replace("#", "");
-  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h
+  const v =
-  const n = parseInt(v, 16)
+    h.length === 3
-  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+      ? h
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : h;
+  const n = parseInt(v, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
 }
-const rgba = (rgb: [number, number, number], a: number) => `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`
+const rgba = (rgb: [number, number, number], a: number) =>
+  `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;
 
 /* =====================================================
    Expandable text
 ===================================================== */
-function ExpandableText({ text, mono = false }: { text?: string | string[] | null; mono?: boolean }) {
+function ExpandableText({
-  const [open, setOpen] = useState(false)
+  text,
+  mono = false,
+}: {
+  text?: string | string[] | null;
+  mono?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
   if (!text || (Array.isArray(text) && text.length === 0)) {
-    return <span className="text-neutral-400">—</span>
+    return <span className="text-neutral-400">—</span>;
   }
-  const content = Array.isArray(text) ? text.join("\n• ") : text
+  const content = Array.isArray(text) ? text.join("\n• ") : text;
-  const rendered = Array.isArray(text) ? `• ${content}` : content
+  const rendered = Array.isArray(text) ? `• ${content}` : content;
   return (
     <div>
       <ReactMarkdown>{rendered}</ReactMarkdown>
       {String(rendered).length > 220 && (
-        <button onClick={() => setOpen((v) => !v)} className="mt-2 text-xs font-medium text-neutral-600 hover:underline">
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="mt-2 text-xs font-medium text-neutral-600 hover:underline"
+        >
           {open ? "Ver menos" : "Ver más"}
         </button>
       )}
     </div>
-  )
+  );
 }
 
 /* =====================================================
    Section panel
 ===================================================== */
-function SectionPanel({ title, icon: Icon, color, children, id }: { title: string; icon: any; color?: string | null; children: React.ReactNode; id: string }) {
+function SectionPanel({
-  const rgb = hexToRgb(color)
+  title,
+  icon: Icon,
+  color,
+  children,
+  id,
+}: {
+  title: string;
+  icon: any;
+  color?: string | null;
+  children: React.ReactNode;
+  id: string;
+}) {
+  const rgb = hexToRgb(color);
   return (
-    <section id={id} className="relative rounded-3xl border overflow-hidden shadow-sm bg-white/70 dark:bg-neutral-900/60">
+    <section
+      id={id}
+      className="relative rounded-3xl border overflow-hidden shadow-sm bg-white/70 dark:bg-neutral-900/60"
+    >
       <div className="pointer-events-none absolute inset-0 -z-0">
-        <div className="absolute -top-20 -left-20 w-[28rem] h-[28rem] rounded-full blur-3xl" style={{ background: `radial-gradient(circle, ${rgba(rgb, 0.2)}, transparent 60%)` }} />
+        <div
-        <div className="absolute -bottom-24 -right-16 w-[24rem] h-[24rem] rounded-full blur-[60px]" style={{ background: `radial-gradient(circle, ${rgba(rgb, 0.14)}, transparent 60%)` }} />
+          className="absolute -top-20 -left-20 w-[28rem] h-[28rem] rounded-full blur-3xl"
+          style={{
+            background: `radial-gradient(circle, ${rgba(rgb, 0.2)}, transparent 60%)`,
+          }}
+        />
+        <div
+          className="absolute -bottom-24 -right-16 w-[24rem] h-[24rem] rounded-full blur-[60px]"
+          style={{
+            background: `radial-gradient(circle, ${rgba(rgb, 0.14)}, transparent 60%)`,
+          }}
+        />
       </div>
-      <div className="relative z-10 px-4 py-3 flex items-center gap-2 border-b" style={{ background: `linear-gradient(180deg, ${rgba(rgb, 0.1)}, transparent)` }}>
+      <div
-        <span className="inline-flex items-center justify-center rounded-xl border px-2.5 py-2 bg-white/80" style={{ borderColor: rgba(rgb, 0.25) }}>
+        className="relative z-10 px-4 py-3 flex items-center gap-2 border-b"
+        style={{
+          background: `linear-gradient(180deg, ${rgba(rgb, 0.1)}, transparent)`,
+        }}
+      >
+        <span
+          className="inline-flex items-center justify-center rounded-xl border px-2.5 py-2 bg-white/80"
+          style={{ borderColor: rgba(rgb, 0.25) }}
+        >
           <Icon className="w-4 h-4" />
         </span>
         <h3 className="font-semibold">{title}</h3>
       </div>
       <div className="relative z-10 p-5">{children}</div>
     </section>
-  )
+  );
 }
 
 /* =====================================================
    AcademicSections (con React Query)
 ===================================================== */
-export function AcademicSections({ planId, color }: { planId: string; color?: string | null }) {
+export function AcademicSections({
-  const qc = useQueryClient()
+  planId,
-  const auth = useSupabaseAuth()
+  color,
-  const [openHistorial, setOpenHistorial] = useState(false)
+}: {
-  const [openModalIa, setopenModalIa] = useState(false)
+  planId: string;
-  if(!planId) return <div>Cargando…</div>
+  color?: string | null;
-  const { data: plan } = useSuspenseQuery(planTextOptions(planId))
+}) {
+  const qc = useQueryClient();
+  const auth = useSupabaseAuth();
+  const [openHistorial, setOpenHistorial] = useState(false);
+  const [openModalIa, setopenModalIa] = useState(false);
+  if (!planId) return <div>Cargando…</div>;
+  const { data: plan } = useSuspenseQuery(planTextOptions(planId));
 
-  const [editing, setEditing] = useState<null | { key: keyof PlanTextFields; title: string }>(null)
+  const [editing, setEditing] = useState<null | {
-  const [draft, setDraft] = useState("")
+    key: keyof PlanTextFields;
+    title: string;
+  }>(null);
+  const [draft, setDraft] = useState("");
 
   // --- mutation con actualización optimista ---
   const updateField = useMutation({
-    mutationFn: async ({ key, value }: { key: keyof PlanTextFields; value: string | string[] | null }) => {
+    mutationFn: async ({
-      const payload: Record<string, any> = { [key]: value }
+      key,
-      const { error } = await supabase.from("plan_estudios").update(payload).eq("id", planId)
+      value,
-      if (error) throw error
+    }: {
-      return payload
+      key: keyof PlanTextFields;
+      value: string | string[] | null;
+    }) => {
+      const payload: Record<string, any> = { [key]: value };
+      const { error } = await supabase
+        .from("plan_estudios")
+        .update(payload)
+        .eq("id", planId);
+      if (error) throw error;
+      return payload;
     },
     onMutate: async ({ key, value }) => {
-      await qc.cancelQueries({ queryKey: planKeys.byId(planId) })
+      await qc.cancelQueries({ queryKey: planKeys.byId(planId) });
-      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId))
+      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId));
-      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({ ...(old ?? {}), [key]: value }))
+      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({
-      return { prev }
+        ...(old ?? {}),
+        [key]: value,
+      }));
+      return { prev };
     },
     onError: (e, _vars, ctx) => {
-      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev)
+      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev);
-      toast.error((e as any)?.message || "No se pudo guardar 😓")
+      toast.error((e as any)?.message || "No se pudo guardar 😓");
     },
     onSuccess: () => {
-      toast.success("Guardado ✅")
+      toast.success("Guardado ✅");
     },
     onSettled: async () => {
-      await qc.invalidateQueries({ queryKey: planKeys.byId(planId) })
+      await qc.invalidateQueries({ queryKey: planKeys.byId(planId) });
     },
-  })
+  });
 
   const sections = useMemo(
     () => [
-      { id: "sec-obj", title: "Objetivo general", icon: Icons.Target, key: "objetivo_general" as const, mono: false },
+      {
-      { id: "sec-eval", title: "Sistema de evaluación", icon: Icons.CheckCircle2, key: "sistema_evaluacion" as const, mono: false },
+        id: "sec-clave",
-      { id: "sec-ing", title: "Perfil de ingreso", icon: Icons.UserPlus, key: "perfil_ingreso" as const, mono: false },
+        title: "Clave del plan",
-      { id: "sec-egr", title: "Perfil de egreso", icon: Icons.GraduationCap, key: "perfil_egreso" as const, mono: false },
+        icon: Icons.Key,
-      { id: "sec-cg", title: "Competencias genéricas", icon: Icons.Sparkles, key: "competencias_genericas" as const, mono: false },
+        key: "clave_del_plan_de_estudios" as const,
-      { id: "sec-ce", title: "Competencias específicas", icon: Icons.Cog, key: "competencias_especificas" as const, mono: false },
+        mono: true,
-      { 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-area",
-      { id: "sec-hist", title: "Histórico de cambios", icon: Icons.History, key: "historico" as const, mono: false }
+        title: "Área de estudio",
+        icon: Icons.Library,
+        key: "area_de_estudio" as const,
+        mono: false,
+      },
+
+      // --- Estructura Temporal ---
+      {
+        id: "sec-ciclos",
+        title: "Total de ciclos",
+        icon: Icons.CalendarRange,
+        key: "total_de_ciclos_del_plan_de_estudios" as const,
+        mono: false,
+      },
+      {
+        id: "sec-duracion-ciclo",
+        title: "Duración del ciclo (semanas)",
+        icon: Icons.CalendarDays,
+        key: "duracion_del_ciclo_escolar" as const,
+        mono: false,
+      },
+      {
+        id: "sec-carga",
+        title: "Carga horaria semanal",
+        icon: Icons.Clock,
+        key: "carga_horaria_a_la_semana" as const,
+        mono: false,
+      },
+
+      // --- Perfiles y Fines ---
+      {
+        id: "sec-antecedente",
+        title: "Antecedente académico",
+        icon: Icons.BookOpen,
+        key: "antecedente_academico" as const,
+        mono: false,
+      },
+      {
+        id: "sec-ingreso",
+        title: "Perfil de ingreso",
+        icon: Icons.UserPlus,
+        key: "perfil_de_ingreso" as const,
+        mono: false,
+      },
+      {
+        id: "sec-fines",
+        title: "Fines de aprendizaje",
+        icon: Icons.Target,
+        key: "fines_de_aprendizaje_o_formacion" as const,
+        mono: false,
+      },
+      {
+        id: "sec-egreso",
+        title: "Perfil de egreso",
+        icon: Icons.UserCheck,
+        key: "perfil_de_egreso" as const,
+        mono: false,
+      },
+
+      // --- Operatividad y Modelo ---
+      {
+        id: "sec-admin",
+        title: "Administración y operatividad",
+        icon: Icons.Briefcase,
+        key: "administracion_y_operatividad_del_plan_de_estudios" as const,
+        mono: false,
+      },
+      {
+        id: "sec-sustento",
+        title: "Sustento teórico",
+        icon: Icons.Book,
+        key: "sustento_teorico_del_modelo_curricular" as const,
+        mono: false,
+      },
+      {
+        id: "sec-justificacion",
+        title: "Justificación curricular",
+        icon: Icons.MessageSquareText,
+        key: "justificacion_de_la_propuesta_curricular" as const,
+        mono: false,
+      },
+      {
+        id: "sec-evaluacion",
+        title: "Evaluación periódica",
+        icon: Icons.CheckCircle2,
+        key: "propuesta_de_evaluacion_periodica_del_plan_de_estudios" as const,
+        mono: false,
+      },
+
+      // --- Específicos / Opcionales ---
+      {
+        id: "sec-investigacion",
+        title: "Programa de investigación",
+        icon: Icons.Microscope,
+        key: "programa_de_investigacion" as const,
+        mono: false,
+      },
+      {
+        id: "sec-propedeutico",
+        title: "Curso propedéutico",
+        icon: Icons.School,
+        key: "curso_propedeutico" as const,
+        mono: false,
+      },
+
+      // --- Meta / Sistema ---
+      {
+        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,
+      },
     ],
     []
-  )
+  );
-  const [iaContext, setIaContext] = useState<{ key: keyof PlanTextFields; title: string; content: string } | null>(null)
+  const [iaContext, setIaContext] = useState<{
-
+    key: keyof PlanTextFields;
+    title: string;
+    content: string;
+  } | null>(null);
 
   return (
     <>
       <div className="grid gap-5 md:grid-cols-2">
         {sections.map((s) => {
-        const text = plan[s.key] ?? null
+          const text = String(plan[s.key]) ?? null;
           return (
-          <SectionPanel key={s.id} id={s.id} title={s.title} icon={s.icon} color={color}>
+            <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)}>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setOpenHistorial(true)}
+                  >
                     Ver historial
                   </Button>
-                <Button variant="outline" size="sm" onClick={() => setopenModalIa(true)}>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setopenModalIa(true)}
+                  >
                     Promt
                   </Button>
                 </>
@@ -191,10 +403,14 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
                     <Button
                       variant="outline"
                       size="sm"
-                    disabled={!text || (Array.isArray(text) && text.length === 0)}
+                      disabled={
+                        !text || (Array.isArray(text) && text.length === 0)
+                      }
                       onClick={() => {
-                      const toCopy = Array.isArray(text) ? text.join("\n") : (text ?? "")
+                        const toCopy = Array.isArray(text)
-                      if (toCopy) navigator.clipboard.writeText(toCopy)
+                          ? text.join("\n")
+                          : (text ?? "");
+                        if (toCopy) navigator.clipboard.writeText(toCopy);
                       }}
                     >
                       Copiar
@@ -204,9 +420,11 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
                         variant="ghost"
                         size="sm"
                         onClick={() => {
-                        const current = Array.isArray(text) ? text.join("\n") : (text ?? "")
+                          const current = Array.isArray(text)
-                        setEditing({ key: s.key, title: s.title })
+                            ? text.join("\n")
-                        setDraft(current)
+                            : (text ?? "");
+                          setEditing({ key: s.key, title: s.title });
+                          setDraft(current);
                         }}
                       >
                         Editar
@@ -216,17 +434,23 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
                 </>
               )}
             </SectionPanel>
-        )
+          );
         })}
-
       </div>
 
       {/* Diálogo de edición */}
-<Dialog open={!!editing} onOpenChange={(o) => { if (!o) setEditing(null) }}>
+      <Dialog
+        open={!!editing}
+        onOpenChange={(o) => {
+          if (!o) setEditing(null);
+        }}
+      >
         <DialogContent className="max-w-2xl">
           <DialogHeader>
             <DialogTitle className="font-mono">
-        {editing ? `Editar: ${sections.find((x) => x.key === editing.key)?.title}` : ""}
+              {editing
+                ? `Editar: ${sections.find((x) => x.key === editing.key)?.title}`
+                : ""}
             </DialogTitle>
           </DialogHeader>
 
@@ -238,41 +462,47 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
           />
 
           <DialogFooter>
-          <Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
+            <Button variant="outline" onClick={() => setEditing(null)}>
+              Cancelar
+            </Button>
             <Button
               onClick={async () => {
-              if (!editing) return
+                if (!editing) return;
 
                 // 1️⃣ Obtener el valor anterior (por ejemplo, desde 'plan' o 'section')
-              const oldValue = (plan as any)[editing.key]
+                const oldValue = (plan as any)[editing.key];
 
                 // 2️⃣ Crear un diff tipo JSON Patch
-              const diff = [{
+                const diff = [
+                  {
                     op: "replace",
                     path: `/${editing.key}`,
                     from: oldValue,
-                value: draft
+                    value: draft,
-              }]
+                  },
+                ];
 
                 // 3️⃣ Guardar respaldo antes de actualizar
-              const { error: backupError } = await supabase.from("historico_cambios").insert({
+                const { error: backupError } = await supabase
+                  .from("historico_cambios")
+                  .insert({
                     id_plan_estudios: planId, // asegúrate de tener `plan.id` disponible en este contexto
                     json_cambios: diff,
-                user_id:auth.user?.id,
+                    user_id: auth.user?.id,
-                created_at: new Date().toISOString()
+                    created_at: new Date().toISOString(),
-              })
+                  });
 
                 if (backupError) {
-                console.error("Error al guardar respaldo:", backupError)
+                  console.error("Error al guardar respaldo:", backupError);
-                alert("No se pudo guardar el respaldo de los cambios")
+                  alert("No se pudo guardar el respaldo de los cambios");
-                return
+                  return;
                 }
 
                 // 4️⃣ Ejecutar la mutación original
-              updateField.mutate({ key: editing.key, value: draft })
+                updateField.mutate({ key: editing.key, value: draft });
 
                 // 5️⃣ Cerrar el diálogo
-              setEditing(null)
+                setEditing(null);
               }}
               disabled={updateField.isPending}
             >
@@ -281,21 +511,19 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
             <Button
               variant="secondary"
               onClick={() => {
-              if (!editing) return
+                if (!editing) return;
-              const current = draft
+                const current = draft;
                 setIaContext({
                   key: editing.key,
                   title: editing.title,
                   content: current,
-              })
+                });
-              setopenModalIa(true)
+                setopenModalIa(true);
-              setEditing(null) // 🔹 Cierra el modal de edición
+                setEditing(null); // 🔹 Cierra el modal de edición
               }}
             >
               Mejorar con IA
             </Button>
-
-
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -304,7 +532,7 @@ export function AcademicSections({ planId, color }: { planId: string; color?: st
         onClose={() => setOpenHistorial(false)}
         planId={planId}
         onRestore={async (key, value) => {
-        updateField.mutate({ key, value })
+          updateField.mutate({ key, value });
         }}
       />
 
@@ -322,13 +550,11 @@ Entrega solo el contenido útil.`,
         }}
         onAccept={(newText: string) => {
           if (iaContext) {
-          updateField.mutate({ key: iaContext.key, value: newText })
+            updateField.mutate({ key: iaContext.key, value: newText });
-          setIaContext(null)
+            setIaContext(null);
           }
         }}
       />
-
-    
     </>
-  )
+  );
 }

src/components/planes/planQueries.ts

@@ -28,13 +28,15 @@ export function planByIdOptions(planId: string) {
       const { data, error } = await supabase
     .from("plan_estudios")
     .select(`
-          id, nombre, nivel, objetivo_general, perfil_ingreso, perfil_egreso, duracion, total_creditos,
+        *,
-          competencias_genericas, competencias_especificas, sistema_evaluacion, indicadores_desempeno,
+        carreras ( 
-          pertinencia, prompt, estado, fecha_creacion,
+            id, 
-          carreras ( id, nombre, facultades:facultades ( id, nombre, color, icon ) )
+            nombre, 
+            facultades ( id, nombre, color, icon ) 
+        )
     `)
     .eq("id", planId)
-        .maybeSingle()
+    .maybeSingle();
       if (error || !data) throw error ?? new Error("Plan no encontrado")
       return data as unknown as PlanFull
     },

src/routes/_authenticated/dashboard.tsx

@@ -49,7 +49,7 @@ async function fetchDashboard(): Promise<LoaderData> {
     supabase
       .from('plan_estudios')
       .select(
-        'id, nombre, fecha_creacion, objetivo_general, perfil_ingreso, perfil_egreso, sistema_evaluacion, total_creditos'
+        '*'
       ),
     supabase
       .from('asignaturas')

src/routes/_authenticated/plan/$planId.tsx

@@ -116,8 +116,9 @@ function RouteComponent() {
         <CardContent ref={statsRef}>
           <div className="academics relative z-10 grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
             <StatCard label="Nivel" value={plan.nivel ?? "—"} Icon={Icons.GraduationCap} accent={facColor} />
-            <StatCard label="Duración" value={plan.duracion ?? "—"} Icon={Icons.Clock} accent={facColor} />
+            <StatCard label="Duración" value={plan.total_de_ciclos_del_plan_de_estudios ?? "—"} Icon={Icons.Clock} accent={facColor} />
-            <StatCard label="Créditos" value={fmt(plan.total_creditos)} Icon={Icons.Coins} accent={facColor} />
+            <StatCard label="Modalidad educativa" value={plan.modalidad_educativa ?? "—"} Icon={Icons.Layers} accent={facColor} />
+            <StatCard label="Diseño curricular" value={plan.diseno_curricular ?? "—"} Icon={Icons.Layout} accent={facColor} />
             <StatCard label="Creado" value={plan.fecha_creacion ? new Date(plan.fecha_creacion).toLocaleDateString() : "—"} Icon={Icons.CalendarDays} accent={facColor} />
           </div>
         </CardContent>