feat: add CreatePlanDialog and InfoChip components; implement chipTint utility; enhance styles for aurora effects

src/routes/_authenticated/planes.tsx

@@ -7,12 +7,9 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import * as Icons from "lucide-react"
 import { Plus, RefreshCcw, Building2 } from "lucide-react"
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { CarreraCombobox, FacultadCombobox } from "@/components/users/procedencia-combobox"
-import { postAPI } from "@/lib/api"
+import { InfoChip } from "@/components/planes/InfoChip"
+import { CreatePlanDialog } from "@/components/planes/CreatePlanDialog"
+import { chipTint } from "@/components/planes/chipTint"
 
 
 export type PlanDeEstudios = {
@@ -47,145 +44,6 @@ export const Route = createFileRoute("/_authenticated/planes")({
 
 })
 
-/* ---------- helpers de estilo suave ---------- */
-function hexToRgb(hex?: string | null): [number, number, number] {
-  if (!hex) return [37, 99, 235] // azul por defecto
-  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]
-}
-/* ---------- helpers ---------- */
-function chipTint(color?: string | null) {
-  const [r, g, b] = hexToRgb(color)
-  return {
-    borderColor: `rgba(${r},${g},${b},.30)`,
-    background: `rgba(${r},${g},${b},.10)`,
-  } as React.CSSProperties
-}
-
-function InfoChip({
-  icon, label, tint,
-}: { icon: React.ReactNode; label: string; tint?: string | null }) {
-  const style = tint ? chipTint(tint) : undefined
-  return (
-    <span
-      title={label}
-      className="inline-flex max-w-full items-center gap-1 rounded-lg border px-2.5 py-1 text-xs leading-none"
-      style={style}
-    >
-      {icon}
-      <span className="truncate">{label}</span>
-    </span>
-  )
-}
-
-function CreatePlanDialog({
-  open, onOpenChange
-}: { open: boolean; onOpenChange: (v: boolean) => void }) {
-  const router = useRouter()
-  const auth = useSupabaseAuth()
-  const role = auth.claims?.role
-
-  const [saving, setSaving] = useState(false)
-  const [err, setErr] = useState<string | null>(null)
-
-  const [facultadId, setFacultadId] = useState(auth.claims?.facultad_id ?? "")
-  const [carreraId, setCarreraId] = useState(auth.claims?.carrera_id ?? "")
-  const [nivel, setNivel] = useState("")
-  const [prompt, setPrompt] = useState(
-    "Genera un plan de estudios claro y realista: "
-  )
-
-  const lockFacultad = role === "secretario_academico" || role === "jefe_carrera"
-  const lockCarrera = role === "jefe_carrera"
-
-  async function crearConIA() {
-    setErr(null)
-    if (!carreraId) { setErr("Selecciona una carrera."); return }
-    setSaving(true)
-    try {
-      // 1) Generar (e insertar) plan vía tu API
-      const res = await postAPI("/api/generar/plan", {
-        carreraId,
-        prompt,
-        insert: true, // 👈 hace que tu backend inserte en supabase
-      })
-
-      // 2) Si el backend devuelve el ID, vamos directo; si no, recargamos listado
-      const newId = res?.id || res?.plan?.id || res?.data?.id
-      if (newId) {
-        onOpenChange(false)
-        router.invalidate()
-        router.navigate({ to: "/plan/$planId", params: { planId: newId } })
-      } else {
-        onOpenChange(false)
-        router.invalidate()
-      }
-    } catch (e: any) {
-      setErr(typeof e?.message === "string" ? e.message : "Error al generar el plan.")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[min(92vw,760px)]">
-        <DialogHeader>
-          <DialogTitle>Nuevo plan de estudios (IA)</DialogTitle>
-        </DialogHeader>
-
-        <div className="grid gap-4 md:grid-cols-2">
-          <div className="md:col-span-2 space-y-1">
-            <Label>Prompt</Label>
-            <Textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              className="min-h-[120px]"
-              placeholder="Describe cómo debe ser el plan…"
-            />
-          </div>
-
-          <div className="space-y-1">
-            <Label>Nivel (opcional)</Label>
-            <Input value={nivel} onChange={(e) => setNivel(e.target.value)} />
-          </div>
-
-          <div className="space-y-1">
-            <Label>Facultad</Label>
-            <FacultadCombobox
-              value={facultadId}
-              onChange={(id) => { setFacultadId(id); setCarreraId("") }}
-              disabled={lockFacultad}
-              placeholder="Elige una facultad…"
-            />
-          </div>
-
-          <div className="md:col-span-2 space-y-1">
-            <Label>Carrera *</Label>
-            <CarreraCombobox
-              facultadId={facultadId}
-              value={carreraId}
-              onChange={setCarreraId}
-              disabled={!facultadId || lockCarrera}
-              placeholder={facultadId ? "Elige una carrera…" : "Selecciona una facultad primero"}
-            />
-          </div>
-        </div>
-
-        {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 className="w-full sm:w-auto" onClick={crearConIA} disabled={saving}>
-            {saving ? "Generando…" : "Generar y crear"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
 
 function RouteComponent() {
   const auth = useSupabaseAuth()
@@ -271,7 +129,7 @@ function RouteComponent() {
                           <InfoChip
                             icon={<Icons.Building2 className="h-3 w-3" />}
                             label={fac.nombre}
-                            tint={fac.color}   // tinte sutil por facultad
+                            tint={fac.color}
                           />
                         )}
                       </div>