Merge branch 'master' of https://github.lci.ulsa.mx/AlexRG/Acad-IA

src/routes/_authenticated/asignaturas.tsx

@@ -169,6 +169,36 @@ function RouteComponent() {
   const [groupBy, setGroupBy] = useState<'semestre' | 'ninguno'>('semestre')
   const [flag, setFlag] = useState<'' | 'sinBibliografia' | 'sinCriterios' | 'sinContenidos'>(search.f ?? '')
 
+const [facultad, setFacultad] = useState("todas")
+const [carrera, setCarrera] = useState("todas")
+
+
+// 🟣 Lista única de facultades
+const facultadesList = useMemo(() => {
+  const unique = new Map<string, string>()
+  planes?.forEach((p) => {
+    const fac = p.carrera?.facultad
+    if (fac?.id && fac?.nombre) unique.set(fac.id, fac.nombre)
+  })
+  return Array.from(unique.entries())
+}, [planes])
+
+// 🎓 Lista de carreras según la facultad seleccionada
+const carrerasList = useMemo(() => {
+  const unique = new Map<string, string>()
+  planes?.forEach((p) => {
+    if (
+      p.carrera?.id &&
+      p.carrera?.nombre &&
+      (!facultad || facultad === "todas" || p.carrera?.facultad?.id === facultad)
+    ) {
+      unique.set(p.carrera.id, p.carrera.nombre)
+    }
+  })
+  return Array.from(unique.entries())
+}, [planes, facultad])
+
+
   // NEW: Clonado individual
   const [cloneOpen, setCloneOpen] = useState(false)
   const [cloneTarget, setCloneTarget] = useState<Asignatura | null>(null)
@@ -217,28 +247,30 @@ function RouteComponent() {
     return { sinBibliografia, sinCriterios, sinContenidos }
   }, [asignaturas])
 
-  // Filtrado
   const filtered = useMemo(() => {
-    const t = q.trim().toLowerCase()
+  const t = q.trim().toLowerCase()
-    return asignaturas.filter(a => {
+  return asignaturas.filter(a => {
-      const matchesQ =
+    const matchesQ =
-        !t ||
+      !t ||
-        [a.nombre, a.clave, a.tipo, a.objetivos, a.plan?.nombre, a.plan?.carrera?.nombre, a.plan?.carrera?.facultad?.nombre]
+      [a.nombre, a.clave, a.tipo, a.objetivos, a.plan?.nombre, a.plan?.carrera?.nombre, a.plan?.carrera?.facultad?.nombre]
-          .filter(Boolean)
+        .filter(Boolean)
-          .some(v => String(v).toLowerCase().includes(t))
+        .some(v => String(v).toLowerCase().includes(t))
 
-      const semOK = sem === 'todos' || String(a.semestre ?? '—') === sem
+    const semOK = sem === 'todos' || String(a.semestre ?? '—') === sem
-      const tipoOK = tipo === 'todos' || (a.tipo ?? '—') === tipo
+    const tipoOK = tipo === 'todos' || (a.tipo ?? '—') === tipo
+    const carreraOK = carrera === 'todas' || a.plan?.carrera?.id === carrera
+    const facultadOK = facultad === 'todas' || a.plan?.carrera?.facultad?.id === facultad
 
-      const flagOK =
+    const flagOK =
-        !flag ||
+      !flag ||
-        (flag === 'sinBibliografia' && (!a.bibliografia || a.bibliografia.length === 0)) ||
+      (flag === 'sinBibliografia' && (!a.bibliografia || a.bibliografia.length === 0)) ||
-        (flag === 'sinCriterios' && (!a.criterios_evaluacion || !a.criterios_evaluacion.trim())) ||
+      (flag === 'sinCriterios' && (!a.criterios_evaluacion || !a.criterios_evaluacion.trim())) ||
-        (flag === 'sinContenidos' && (!a.contenidos || Object.keys(a.contenidos ?? {}).length === 0))
+      (flag === 'sinContenidos' && (!a.contenidos || Object.keys(a.contenidos ?? {}).length === 0))
+
+    return matchesQ && semOK && tipoOK && flagOK && carreraOK && facultadOK
+  })
+}, [q, sem, tipo, flag, carrera, facultad, asignaturas])
 
-      return matchesQ && semOK && tipoOK && flagOK
-    })
-  }, [q, sem, tipo, flag, asignaturas])
 
   // Agrupación
   const groups = useMemo(() => {
@@ -257,7 +289,7 @@ function RouteComponent() {
   }, [filtered, groupBy])
 
   // Helpers
-  const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setFlag('') }
+  const clearFilters = () => { setQ(''); setSem('todos'); setTipo('todos'); setCarrera('todas'); setFlag('') }
 
   // NEW: util para clonar 1 asignatura
   async function cloneOne(src: Asignatura, overrides: {
@@ -394,7 +426,7 @@ function RouteComponent() {
           </div>
 
           {/* Filtros */}
-          <div className="grid gap-4 sm:grid-cols-4">
+          <div className="grid gap-4 sm:grid-cols-5">
             <div>
               <Label>Búsqueda</Label>
               <Input
@@ -416,29 +448,53 @@ function RouteComponent() {
             </div>
 
             <div>
-              <Label>Tipo</Label>
+              <Label>Facultad</Label>
-              <Select value={tipo} onValueChange={setTipo}>
+              <Select
-                <SelectTrigger><SelectValue placeholder="Todos" /></SelectTrigger>
+                value={facultad ?? "todas"}
-                <SelectContent className="max-h-64">
+                onValueChange={(val) => {
-                  <SelectItem value="todos">Todos</SelectItem>
+                  setFacultad(val)
-                  {tipos.map(t => <SelectItem key={t} value={t}>{t}</SelectItem>)}
+                  setCarrera("todas") // reset de carrera al cambiar facultad
+                }}
+              >
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue placeholder="Filtrar por facultad" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="todas">Todas las facultades</SelectItem>
+                  {facultadesList.map(([id, nombre]) => (
+                    <SelectItem key={id} value={id}>
+                      {nombre}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
 
+            {facultad && facultad !== "todas" && (
             <div>
-              <Label>Agrupación</Label>
+              <Label>Carrera</Label>
-              <Select value={groupBy} onValueChange={(v) => setGroupBy(v as any)}>
+              <Select
-                <SelectTrigger><SelectValue /></SelectTrigger>
+                value={carrera ?? "todas"}
+                onValueChange={(val) => setCarrera(val)}
+              >
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue placeholder="Filtrar por carrera" />
+                </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="semestre">Por semestre</SelectItem>
+                  <SelectItem value="todas">Todas las carreras</SelectItem>
-                  <SelectItem value="ninguno">Sin agrupación</SelectItem>
+                  {carrerasList.map(([id, nombre]) => (
+                    <SelectItem key={id} value={id}>
+                      {nombre}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
+          )}          
           </div>
 
 
+
           {/* Chips de salud */}
           <div className="flex flex-wrap items-center gap-2">
             <HealthChip

src/routes/_authenticated/planes.tsx

@@ -10,26 +10,44 @@ import { Plus, RefreshCcw, Building2 } from "lucide-react"
 import { InfoChip } from "@/components/planes/InfoChip"
 import { CreatePlanDialog } from "@/components/planes/CreatePlanDialog"
 import { chipTint } from "@/components/planes/chipTint"
-import { z } from 'zod'
+import { z } from "zod"
-
+import {
-
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 
 export type PlanDeEstudios = {
-  id: string; nombre: string; nivel: string | null; duracion: string | null;
+  id: string
-  total_creditos: number | null; estado: string | null; fecha_creacion: string | null; carrera_id: string | null
+  nombre: string
+  nivel: string | null
+  duracion: string | null
+  total_creditos: number | null
+  estado: string | null
+  fecha_creacion: string | null
+  carrera_id: string | null
 }
 type PlanRow = PlanDeEstudios & {
   carreras: {
-    id: string; nombre: string;
+    id: string
-    facultades?: { id: string; nombre: string; color?: string | null; icon?: string | null } | null
+    nombre: string
+    facultades?: {
+      id: string
+      nombre: string
+      color?: string | null
+      icon?: string | null
+    } | null
   } | null
 }
 
 const planSearchSchema = z.object({
-  plan: z.string().nullable()
+  plan: z.string().nullable(),
+  facultad: z.string().nullable().optional(),
+  carrera: z.string().nullable().optional(),
 })
 
-
 export const Route = createFileRoute("/_authenticated/planes")({
   component: RouteComponent,
   loader: async () => {
@@ -45,93 +63,191 @@ export const Route = createFileRoute("/_authenticated/planes")({
       `)
       .order("fecha_creacion", { ascending: false })
       .limit(100)
-    console.log({ data, error })
     if (error) throw new Error(error.message)
     return (data ?? []) as PlanRow[]
   },
   validateSearch: planSearchSchema,
 })
 
-
 function RouteComponent() {
   const auth = useSupabaseAuth()
-  const { plan } = Route.useSearch()
+  const { plan, facultad, carrera } = Route.useSearch()
   const [openCreate, setOpenCreate] = useState(false)
   const data = Route.useLoaderData() as PlanRow[]
   const router = useRouter()
   const navigate = useNavigate({ from: Route.fullPath })
 
+  const showFacultad =
+    auth.claims?.role === "lci" || auth.claims?.role === "vicerrectoria"
+  const showCarrera =
+    showFacultad || auth.claims?.role === "secretario_academico"
 
-  const showFacultad = auth.claims?.role === "lci" || auth.claims?.role === "vicerrectoria"
+  // 🟣 Lista única de facultades
-  const showCarrera = showFacultad || auth.claims?.role === "secretario_academico"
+  const facultadesList = useMemo(() => {
+    const unique = new Map<string, string>()
+    data?.forEach((p) => {
+      const fac = p.carreras?.facultades
+      if (fac?.id && fac?.nombre) unique.set(fac.id, fac.nombre)
+    })
+    return Array.from(unique.entries())
+  }, [data])
 
+  // 🎓 Lista de carreras según facultad seleccionada
+  const carrerasList = useMemo(() => {
+    const unique = new Map<string, string>()
+    data?.forEach((p) => {
+      if (
+        p.carreras?.id &&
+        p.carreras?.nombre &&
+        (!facultad || p.carreras?.facultades?.id === facultad)
+      ) {
+        unique.set(p.carreras.id, p.carreras.nombre)
+      }
+    })
+    return Array.from(unique.entries())
+  }, [data, facultad])
+
+  // 🧩 Filtrado general
   const filtered = useMemo(() => {
     const term = plan?.trim().toLowerCase()
-    if (!term || !data) return data
+    let results = data ?? []
-    return data.filter((p) =>
+
-      [p.nombre, p.nivel, p.estado, p.carreras?.nombre, p.carreras?.facultades?.nombre]
+    if (term) {
-        .filter(Boolean)
+      results = results.filter((p) =>
-        .some((v) => String(v).toLowerCase().includes(term))
+        [p.nombre, p.nivel, p.estado, p.carreras?.nombre, p.carreras?.facultades?.nombre]
-    )
+          .filter(Boolean)
-  }, [plan, data])
+          .some((v) => String(v).toLowerCase().includes(term))
+      )
+    }
+
+    if (facultad && facultad !== "todas") {
+      results = results.filter((p) => p.carreras?.facultades?.id === facultad)
+    }
+
+    if (carrera && carrera !== "todas") {
+      results = results.filter((p) => p.carreras?.id === carrera)
+    }
+
+    return results
+  }, [plan, facultad, carrera, data])
 
   return (
     <div className="space-y-4">
       <Card>
         <CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
           <CardTitle className="text-xl font-mono">Planes de estudio</CardTitle>
-          <div className="flex w-full items-center gap-2 md:w-auto">
+
+          <div className="flex w-full flex-col md:flex-row items-center gap-2 md:w-auto">
+            {/* 🔍 Buscador */}
             <div className="relative w-full md:w-80">
               <Input
-                value={plan ?? ''}
+                value={plan ?? ""}
-                onChange={e => navigate({ search: { plan: e.target.value } })}
+                onChange={(e) =>
+                  navigate({ search: { plan: e.target.value, facultad, carrera } })
+                }
                 placeholder="Buscar por nombre, nivel, estado…"
               />
             </div>
-            <Button variant="outline" size="icon" onClick={() => router.invalidate()} title="Recargar">
+
+            {/* 🏛️ Filtro por facultad */}
+            <Select
+              value={facultad ?? "todas"}
+              onValueChange={(val) =>
+                navigate({ search: { plan, facultad: val, carrera: "todas" } })
+              }
+            >
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="Filtrar por facultad" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todas">Todas las facultades</SelectItem>
+                {facultadesList.map(([id, nombre]) => (
+                  <SelectItem key={id} value={id}>
+                    {nombre}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {/* 🎓 Filtro por carrera (según facultad) */}
+            {facultad && facultad !== "todas" && (
+              <Select
+                value={carrera ?? "todas"}
+                onValueChange={(val) =>
+                  navigate({ search: { plan, facultad, carrera: val } })
+                }
+              >
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue placeholder="Filtrar por carrera" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="todas">Todas las carreras</SelectItem>
+                  {carrerasList.map(([id, nombre]) => (
+                    <SelectItem key={id} value={id}>
+                      {nombre}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+
+            {/* 🔁 Recargar */}
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => router.invalidate()}
+              title="Recargar"
+            >
               <RefreshCcw className="h-4 w-4" />
             </Button>
+
+            {/* ➕ Nuevo plan */}
             <Button onClick={() => setOpenCreate(true)}>
               <Plus className="mr-2 h-4 w-4" /> Nuevo plan
             </Button>
-
           </div>
         </CardHeader>
 
-        {/* GRID de tarjetas con estilo suave por facultad */}
+        {/* GRID de tarjetas */}
         <CardContent>
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {filtered?.map((p) => {
               const fac = p.carreras?.facultades
               const styles = chipTint(fac?.color)
-              const IconComp = (fac?.icon && (Icons as any)[fac.icon]) || Building2
+              const IconComp =
+                (fac?.icon && (Icons as any)[fac.icon]) || Building2
 
               return (
                 <Link
                   key={p.id}
                   to="/plan/$planId"
-                  mask={{ to: '/plan/$planId', params: { planId: p.id } }}
+                  mask={{ to: "/plan/$planId", params: { planId: p.id } }}
                   className="group relative overflow-hidden rounded-3xl bg-white shadow-sm ring-1 transition-all hover:shadow-md hover:-translate-y-0.5"
                   params={{ planId: p.id }}
                   style={styles}
                 >
                   <div className="relative p-5 h-40 flex flex-col justify-between">
                     <div className="flex items-center gap-3">
-                      <span className="inline-flex items-center justify-center rounded-2xl border px-2.5 py-2"
+                      <span
-                        style={{ borderColor: styles.borderColor as string, background: 'rgba(255,255,255,.6)' }}>
+                        className="inline-flex items-center justify-center rounded-2xl border px-2.5 py-2"
+                        style={{
+                          borderColor: styles.borderColor as string,
+                          background: "rgba(255,255,255,.6)",
+                        }}
+                      >
                         <IconComp className="w-6 h-6" />
                       </span>
                       <div className="min-w-0">
                         <div className="font-semibold truncate">{p.nombre}</div>
                         <div className="text-xs text-neutral-600 truncate">
-                          {p.nivel ?? "—"} {p.duracion ? `· ${p.duracion}` : ""}
+                          {p.nivel ?? "—"}{" "}
+                          {p.duracion ? `· ${p.duracion}` : ""}
                         </div>
                       </div>
                     </div>
 
-                    {/* Dentro del map de tarjetas, sustituye SOLO el footer inferior */}
                     <div className="mt-3 flex items-center gap-2">
-                      {/* grupo izquierdo: chips (wrap si no caben) */}
                       <div className="min-w-0 flex-1 flex flex-wrap items-center gap-2">
                         {showCarrera && p.carreras?.nombre && (
                           <InfoChip
@@ -148,18 +264,21 @@ function RouteComponent() {
                         )}
                       </div>
 
-                      {/* derecha: estado */}
                       {p.estado && (
                         <Badge
                           variant="outline"
                           className="bg-white/60"
-                          style={{ borderColor: (chipTint(fac?.color).borderColor as string) }}
+                          style={{
+                            borderColor:
+                              chipTint(fac?.color).borderColor as string,
+                          }}
                         >
-                          {p.estado && p.estado.length > 10 ? `${p.estado.slice(0, 10)}…` : p.estado}
+                          {p.estado.length > 10
+                            ? `${p.estado.slice(0, 10)}…`
+                            : p.estado}
                         </Badge>
                       )}
                     </div>
-
                   </div>
                 </Link>
               )
@@ -167,16 +286,14 @@ function RouteComponent() {
           </div>
 
           {!filtered?.length && (
-            <div className="text-center text-sm text-muted-foreground py-10">Sin resultados</div>
+            <div className="text-center text-sm text-muted-foreground py-10">
+              Sin resultados
+            </div>
           )}
         </CardContent>
       </Card>
 
-      <CreatePlanDialog
+      <CreatePlanDialog open={openCreate} onOpenChange={setOpenCreate} />
-        open={openCreate}
-        onOpenChange={setOpenCreate}
-      />
-
     </div>
   )
 }