Refactor user management in usuarios.tsx: integrate react-query for data fetching and mutations, streamline role handling, and enhance user ban/unban functionality.

src/components/planes/academic-sections.tsx

@@ -1,185 +1,219 @@
 import * as Icons from "lucide-react"
 import { useMemo, useState } from "react"
+import { useSuspenseQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
 import { Textarea } from "@/components/ui/textarea"
 import { supabase } from "@/auth/supabase"
+import { toast } from "sonner"
 
-/* ---------- helpers de color ---------- */
+/* =====================================================
+   Query keys & fetcher
+===================================================== */
+export const planKeys = {
+  root: ["plan"] as const,
+  byId: (id: string) => [...planKeys.root, id] as const,
+}
+
+export type PlanTextFields = {
+  objetivo_general?: string | string[] | null
+  sistema_evaluacion?: string | string[] | null
+  perfil_ingreso?: string | string[] | null
+  perfil_egreso?: string | string[] | null
+  competencias_genericas?: string | string[] | null
+  competencias_especificas?: string | string[] | null
+  indicadores_desempeno?: string | string[] | null
+  pertinencia?: string | string[] | null
+  prompt?: string | null
+}
+
+async function fetchPlanText(planId: string): Promise<PlanTextFields> {
+  const { data, error } = await supabase
+    .from("plan_estudios")
+    .select(
+      `objetivo_general, sistema_evaluacion, perfil_ingreso, perfil_egreso,
+       competencias_genericas, competencias_especificas, indicadores_desempeno,
+       pertinencia, prompt`
+    )
+    .eq("id", planId)
+    .single()
+  if (error) throw error
+  return (data ?? {}) as PlanTextFields
+}
+
+export const planTextOptions = (planId: string) =>
+  queryOptions({
+    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]
-    const h = hex.replace("#", "")
-    const v = h.length === 3 ? h.split("").map(c => c + c).join("") : h
-    const n = parseInt(v, 16)
-    return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+  if (!hex) return [37, 99, 235]
+  const h = hex.replace("#", "")
+  const v = h.length === 3 ? 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})`
 
-/* ---------- texto expandible (acepta string o string[]) ---------- */
+/* =====================================================
+   Expandable text
+===================================================== */
 function ExpandableText({ 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>
-    }
-    const content = Array.isArray(text) ? text.join("\n• ") : text
-    const rendered = Array.isArray(text) ? `• ${content}` : content
-    return (
-        <div>
-            <div className={`${mono ? "font-mono whitespace-pre-wrap" : ""} text-sm ${open ? "" : "line-clamp-10"}`}>
-                {rendered}
-            </div>
-            {String(rendered).length > 220 && (
-                <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>
-    )
+  const [open, setOpen] = useState(false)
+  if (!text || (Array.isArray(text) && text.length === 0)) {
+    return <span className="text-neutral-400">—</span>
+  }
+  const content = Array.isArray(text) ? text.join("\n• ") : text
+  const rendered = Array.isArray(text) ? `• ${content}` : content
+  return (
+    <div>
+      <div className={`${mono ? "font-mono whitespace-pre-wrap" : ""} text-sm ${open ? "" : "line-clamp-10"}`}>{rendered}</div>
+      {String(rendered).length > 220 && (
+        <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>
+  )
 }
 
-/* ---------- panel con aurora mesh ---------- */
-function SectionPanel({
-    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">
-            {/* aurora mesh sutil */}
-            <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, .20)}, transparent 60%)` }}
-                />
-                <div
-                    className="absolute -bottom-24 -right-16 w-[24rem] h-[24rem] rounded-full blur-[60px]"
-                    style={{ background: `radial-gradient(circle, ${rgba(rgb, .14)}, transparent 60%)` }}
-                />
-            </div>
+/* =====================================================
+   Section panel
+===================================================== */
+function SectionPanel({ 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">
+      <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 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)` }}>
+        <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>
+  )
+}
 
-            <div
-                className="relative z-10 px-4 py-3 flex items-center gap-2 border-b"
-                style={{ background: `linear-gradient(180deg, ${rgba(rgb, .10)}, transparent)` }}
-            >
-                <span
-                    className="inline-flex items-center justify-center rounded-xl border px-2.5 py-2 bg-white/80"
-                    style={{ borderColor: rgba(rgb, .25) }}
+/* =====================================================
+   AcademicSections (con React Query)
+===================================================== */
+export function AcademicSections({ planId, color }: { planId: string; color?: string | null }) {
+  const qc = useQueryClient()
+  const { data: plan } = useSuspenseQuery(planTextOptions(planId))
+
+  const [editing, setEditing] = useState<null | { 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 }) => {
+      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) })
+      const prev = qc.getQueryData<PlanTextFields>(planKeys.byId(planId))
+      qc.setQueryData<PlanTextFields>(planKeys.byId(planId), (old) => ({ ...(old ?? {}), [key]: value }))
+      return { prev }
+    },
+    onError: (e, _vars, ctx) => {
+      if (ctx?.prev) qc.setQueryData(planKeys.byId(planId), ctx.prev)
+      toast.error((e as any)?.message || "No se pudo guardar 😓")
+    },
+    onSuccess: () => {
+      toast.success("Guardado ✅")
+    },
+    onSettled: async () => {
+      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-ing", title: "Perfil de ingreso", icon: Icons.UserPlus, key: "perfil_ingreso" as const, mono: false },
+      { id: "sec-egr", title: "Perfil de egreso", icon: Icons.GraduationCap, key: "perfil_egreso" as const, mono: false },
+      { id: "sec-cg", title: "Competencias genéricas", icon: Icons.Sparkles, key: "competencias_genericas" as const, mono: false },
+      { id: "sec-ce", title: "Competencias específicas", icon: Icons.Cog, key: "competencias_especificas" as const, mono: false },
+      { 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 },
+    ],
+    []
+  )
+
+  return (
+    <>
+      <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)
+                  }}
                 >
-                    <Icon className="w-4 h-4" />
-                </span>
-                <h3 className="font-semibold">{title}</h3>
-            </div>
-            <div className="relative z-10 p-5">{children}</div>
-        </section>
-    )
-}
-
-/* ---------- Secciones integradas (sin tabs) ---------- */
-type PlanTextFields = {
-    objetivo_general?: string | string[] | null
-    sistema_evaluacion?: string | string[] | null
-    perfil_ingreso?: string | string[] | null
-    perfil_egreso?: string | string[] | null
-    competencias_genericas?: string | string[] | null
-    competencias_especificas?: string | string[] | null
-    indicadores_desempeno?: string | string[] | null
-    pertinencia?: string | string[] | null
-    prompt?: string | null
-}
-
-export function AcademicSections({
-    planId, plan, color,
-}: { planId: string; plan: PlanTextFields; color?: string | null }) {
-    const [local, setLocal] = useState<PlanTextFields>({ ...plan })
-    const [editing, setEditing] = useState<null | { key: keyof PlanTextFields; title: string }>(null)
-    const [draft, setDraft] = useState("")
-    const [saving, setSaving] = useState(false)
-
-    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-ing", title: "Perfil de ingreso", icon: Icons.UserPlus, key: "perfil_ingreso" as const, mono: false },
-        { id: "sec-egr", title: "Perfil de egreso", icon: Icons.GraduationCap, key: "perfil_egreso" as const, mono: false },
-        { id: "sec-cg", title: "Competencias genéricas", icon: Icons.Sparkles, key: "competencias_genericas" as const, mono: false },
-        { id: "sec-ce", title: "Competencias específicas", icon: Icons.Cog, key: "competencias_especificas" as const, mono: false },
-        { 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 },
-    ], [])
-
-    async function handleSave() {
-        if (!editing) return
-        setSaving(true)
-        const payload: any = { [editing.key]: draft }
-        const { error } = await supabase.from("plan_estudios").update(payload).eq("id", planId)
-        setSaving(false)
-        if (error) {
-            console.error(error)
-            alert("No se pudo guardar 😓")
-            return
-        }
-        setLocal(prev => ({ ...prev, [editing.key]: draft }))
-        setEditing(null)
-    }
-
-    return (
-        <>
-
-            {/* Todas las tarjetas visibles */}
-            <div className="grid gap-5 md:grid-cols-2">
-                {sections.map(s => {
-                    const text = local[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>
-                                <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 */}
-            <Dialog open={!!editing} onOpenChange={(o) => { if (!o) setEditing(null) }}>
-                <DialogContent className="max-w-2xl">
-                    <DialogHeader>
-                        <DialogTitle>
-                            {editing ? `Editar: ${sections.find(x => x.key === editing.key)?.title}` : ""}
-                        </DialogTitle>
-                    </DialogHeader>
-                    <Textarea
-                        value={draft}
-                        onChange={(e) => setDraft(e.target.value)}
-                        className={`min-h-[260px] ${editing?.key === "prompt" ? "font-mono" : ""}`}
-                        placeholder="Escribe aquí…"
-                    />
-                    <DialogFooter>
-                        <Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
-                        <Button onClick={handleSave} disabled={saving}>{saving ? "Guardando…" : "Guardar"}</Button>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
-        </>
-    )
+                  Copiar
+                </Button>
+                <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 */}
+      <Dialog open={!!editing} onOpenChange={(o) => { if (!o) setEditing(null) }}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{editing ? `Editar: ${sections.find((x) => x.key === editing.key)?.title}` : ""}</DialogTitle>
+          </DialogHeader>
+          <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} className={`min-h-[260px] ${editing?.key === "prompt" ? "font-mono" : ""}`} placeholder="Escribe aquí…" />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
+            <Button
+              onClick={() => {
+                if (!editing) return
+                updateField.mutate({ key: editing.key, value: draft })
+                setEditing(null)
+              }}
+              disabled={updateField.isPending}
+            >
+              {updateField.isPending ? "Guardando…" : "Guardar"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
 }