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

2025-08-29 16:05:41 -06:00
parent 6e84860230
commit f8de39e6d1
6 changed files with 170 additions and 151 deletions
--- a/src/components/planes/CreatePlanDialog.tsx
+++ b/src/components/planes/CreatePlanDialog.tsx
@@ -0,0 +1,106 @@
+import { useRouter } from "@tanstack/react-router"
+import { useSupabaseAuth } from "@/auth/supabase"
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+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"
+
+export 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 {
+      const res = await postAPI("/api/generar/plan", {
+        carreraId,
+        prompt,
+        insert: true,
+      })
+      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>
+  )
+}