AlexRG/Acad-IA
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Wiki Activity

refactor: remove unused imports in CreatePlanDialog and $planId components

Browse Source
This commit is contained in:
Alejandro Rosales
2025-10-22 15:58:47 -06:00
parent b8f446ba48
commit 4b19d166b6
3 changed files with 225 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

476
README.md
View File

@@ -1,290 +1,262 @@
Welcome to your new TanStack app! # 🎓 Academic Management Platform - Sistema Universitario Inteligente
# Getting Started **Una plataforma integral de gestión académica universitaria con inteligencia artificial integrada, diseñada para modernizar y optimizar la administración educativa superior.**
To run this application: ---
## 🚀 **¿Qué hace esta aplicación?**
Esta es una **plataforma completa de gestión académica universitaria** que automatiza y digitaliza todos los procesos de administración educativa, desde la planificación curricular hasta la gestión de contenidos académicos, con **inteligencia artificial integrada** para optimizar la creación y mejora de planes de estudio.
### 🎯 **Capacidades Principales**
#### 📋 **Gestión Curricular Avanzada**
- **Planes de Estudio Inteligentes**: Creación, edición y gestión completa de planes curriculares
- **Generación con IA**: Creación automática de planes de estudio mediante prompts de IA
- **Ajustes Inteligentes**: Mejoras y modificaciones de planes existentes usando IA
- **Métricas de Calidad**: Análisis automático de completitud y calidad de planes académicos
#### 🏫 **Estructura Organizacional Completa**
- **Facultades**: Gestión de facultades con colores e iconos personalizados
- **Carreras**: Administración de programas académicos por facultad
- **Planes de Estudio**: Vinculación jerárquica de planes con carreras y facultades
- **Jerarquía Completa**: Navegación fluida entre todos los niveles organizacionales
#### 📚 **Gestión de Asignaturas Detallada**
- **Información Completa**: Nombre, clave, tipo, semestre, créditos, horas teóricas/prácticas
- **Contenidos Estructurados**: Gestión de contenidos temáticos organizados por unidades
- **Bibliografía Dinámica**: Listas de referencias bibliográficas editables
- **Criterios de Evaluación**: Definición de métodos y criterios de evaluación
- **Objetivos Académicos**: Gestión de objetivos de aprendizaje por asignatura
#### <20> **Sistema de Usuarios Multi-Rol**
- **Roles Jerárquicos**: LCI, Vicerrectoría, Director de Facultad, Secretario Académico, Jefe de Carrera, Planeación
- **Permisos Granulares**: Acceso controlado según rol y nivel organizacional
- **Nombramientos**: Sistema de asignación de cargos administrativos
- **Autenticación Segura**: Integración completa con Supabase Auth
#### 📊 **Dashboard Ejecutivo con Métricas**
- **KPIs Institucionales**: Contadores de facultades, carreras, planes y asignaturas
- **Indicadores de Calidad**: Porcentajes de completitud de planes de estudio
- **Salud Académica**: Métricas de asignaturas sin bibliografía, criterios o contenidos
- **Actividad Reciente**: Timeline de planes y asignaturas creados recientemente
#### 📁 **Gestión de Archivos de Referencia**
- **Biblioteca Digital**: Repositorio de documentos académicos de referencia
- **Integración Curricular**: Vinculación de archivos con planes y asignaturas
---
## 🔥 **El Verdadero Poder de la Plataforma**
### 🤖 **Inteligencia Artificial Integrada**
- **Generación Automática**: Crea planes de estudio completos desde cero usando IA
- **Optimización Inteligente**: Mejora planes existentes con sugerencias de IA
- **Asistente de Contenidos**: Ayuda en la creación de contenidos y criterios académicos
### <20> **Analytics y Calidad Académica**
- **Métricas de Completitud**: Evaluación automática de la calidad de planes académicos
- **Indicadores de Salud**: Monitoreo de la completitud de asignaturas
- **Dashboards Ejecutivos**: Visualización de KPIs para toma de decisiones
### 🔄 **Flujos de Trabajo Inteligentes**
- **Navegación Contextual**: Acceso directo entre elementos relacionados
- **Búsquedas Avanzadas**: Filtrado por facultad, carrera, plan o asignatura
- **Edición en Contexto**: Modificación inline de elementos académicos
### 🎨 **Experiencia de Usuario Premium**
- **Interfaz Moderna**: Diseño con Tailwind CSS y componentes Radix UI
- **Temas Personalizables**: Modo claro/oscuro con persistencia
- **Responsive Design**: Funciona perfectamente en móviles y escritorio
- **Efectos Visuales**: Animaciones y efectos (Aurora, confetti) para mejor UX
---
## 🛠️ **Stack Tecnológico Avanzado**
### **Frontend & UI**
- **React 19** con TypeScript para máximo rendimiento
- **TanStack Router** para routing type-safe y code-splitting
- **TanStack Query** para gestión de estado servidor optimizada
- **Tailwind CSS v4** para styling moderno y eficiente
- **Radix UI + shadcn/ui** para componentes accesibles y consistentes
### **Backend & Base de Datos**
- **Supabase** como backend-as-a-service completo
- **PostgreSQL** con Row Level Security para datos seguros
- **Realtime subscriptions** para actualizaciones en tiempo real
- **Funciones serverless** para lógica de negocio
### **Inteligencia Artificial**
- **API de IA propia** para generación y mejora de contenidos
- **Integración seamless** con el flujo de trabajo académico
### **Herramientas de Desarrollo**
- **Vite** para desarrollo ultra-rápido y HMR
- **Bun** como package manager y runtime optimizado
- **Vitest** para testing unitario y de integración
- **TypeScript** para type safety completo
---
## 📊 **Arquitectura de Base de Datos**
### **Entidades Principales**
- **`facultades`**: Gestión de facultades universitarias
- **`carreras`**: Programas académicos por facultad
- **`plan_estudios`**: Planes curriculares con metadatos completos
- **`asignaturas`**: Materias con contenidos, bibliografía y criterios
- **`usuarios`**: Sistema de usuarios con roles jerárquicos
- **`nombramientos`**: Asignaciones de cargos administrativos
- **`criterios_carrera`**: Criterios específicos por programa
- **`archivos_referencia`**: Biblioteca digital institucional
### **Relaciones Jerárquicas**
```
Facultades → Carreras → Planes de Estudio → Asignaturas
↓ ↓ ↓ ↓
Usuarios → Nombramientos → Criterios → Contenidos
```
---
## 🚀 **Instalación y Configuración**
### **Prerequisitos**
- Node.js 18+ (recomendado 20+)
- [Bun](https://bun.sh/) (package manager optimizado)
- Cuenta [Supabase](https://supabase.com/) configurada
- Variables de entorno configuradas
### **Setup Rápido**
```bash ```bash
# Clonar repositorio
git clone <url-del-repositorio>
cd tanstack-router
# Instalar dependencias
bun install bun install
bunx --bun run start
# Configurar variables de entorno
cp .env.example .env.local
# Editar .env.local con tus credenciales de Supabase
# Ejecutar en desarrollo
bun dev
``` ```
# Building For Production ### **Variables de Entorno Requeridas**
```env
VITE_SUPABASE_URL=tu_supabase_project_url
VITE_SUPABASE_ANON_KEY=tu_supabase_anon_key
VITE_API_BASE=tu_backend_api_url
VITE_BACK_ORIGIN=tu_ia_service_url
```
To build this application for production: ---
## 📝 **Scripts Disponibles**
```bash ```bash
bunx --bun run build bun dev # Servidor de desarrollo (puerto 3000)
bun build # Build de producción optimizado
bun serve # Preview del build de producción
bun test # Ejecutar suite de tests
``` ```
## Testing ---
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with: ## <20> **Casos de Uso Principales**
```bash ### **Para Administradores Académicos**
bunx --bun run test - Crear y gestionar estructura organizacional completa
``` - Monitorear calidad académica mediante métricas automatizadas
- Generar reportes ejecutivos de estado institucional
## Styling ### **Para Coordinadores Curriculares**
- Diseñar planes de estudio con asistencia de IA
- Gestionar contenidos académicos de manera eficiente
- Mantener actualizados criterios y bibliografías
This project uses CSS for styling. ### **Para Directivos Institucionales**
- Acceder a dashboards ejecutivos con KPIs en tiempo real
- Supervisar calidad y completitud académica
- Tomar decisiones basadas en datos concretos
---
## <20> **Seguridad y Roles**
### **Roles del Sistema**
- **`lci`**: Acceso global a toda la plataforma
- **`vicerrectoria`**: Supervisión académica institucional
- **`director_facultad`**: Gestión de facultad específica
- **`secretario_academico`**: Administración académica
- **`jefe_carrera`**: Gestión de carrera específica
- **`planeacion`**: Planificación curricular
## Routing ### **Seguridad Implementada**
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`. - Row Level Security (RLS) en Supabase
- Autenticación JWT con refresh tokens
- Permisos granulares por rol y contexto
- Validación de datos tanto cliente como servidor
### Adding A Route ---
To add a new route to your application just add another a new file in the `./src/routes` directory. ## 🌟 **Características Avanzadas**
TanStack will automatically generate the content of the route file for you. ### **Performance & UX**
- Code splitting automático por ruta
- Lazy loading de componentes pesados
- Cache inteligente con TanStack Query
- Optimistic updates para mejor responsividad
Now that you have two routes you can use a `Link` component to navigate between them. ### **Accesibilidad**
- Componentes Radix UI totalmente accesibles
- Navegación por teclado completa
- Soporte para lectores de pantalla
- Contraste optimizado en ambos temas
### Adding Links ### **Internacionalización**
- Interfaz completamente en español
- Formatos de fecha y número localizados
- Soporte para múltiples idiomas preparado
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`. ---
```tsx ## 🤝 **Contribución y Desarrollo**
import { Link } from "@tanstack/react-router";
```
Then anywhere in your JSX you can use it like so: ### **Guías de Contribución**
1. Fork del repositorio
2. Crear branch descriptivo (`feature/nueva-funcionalidad`)
3. Commits semánticos con scope claro
4. Tests para nuevas funcionalidades
5. Pull Request con descripción detallada
```tsx ### **Estándares de Código**
<Link to="/about">About</Link> - TypeScript strict mode
``` - ESLint y Prettier configurados
- Convenciones de naming consistentes
- Documentación JSDoc para funciones complejas
This will create a link that will navigate to the `/about` route. ---
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent). ## 📄 **Licencia**
### Using A Layout MIT License - Ver archivo `LICENSE` para detalles completos.
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component. ---
Here is an example layout that includes a header: ## 🎯 **Roadmap y Futuro**
```tsx - [ ] **Mobile App**: Aplicación nativa con React Native
import { Outlet, createRootRoute } from '@tanstack/react-router' - [ ] **Reportes Avanzados**: PDFs automáticos de planes de estudio
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' - [ ] **Integración LMS**: Conexión con plataformas educativas
- [ ] **Analytics Predictivos**: ML para predicción de rendimiento
- [ ] **API Pública**: REST API para integraciones externas
import { Link } from "@tanstack/react-router"; ---
export const Route = createRootRoute({ **🏆 Una plataforma que transforma la gestión académica universitaria mediante tecnología moderna e inteligencia artificial.**
component: () => (
<>
<header>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
</header>
<Outlet />
<TanStackRouterDevtools />
</>
),
})
```
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout. *Desarrollado con pasión por la educación superior y la innovación tecnológica.*
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
For example:
```tsx
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/people",
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
return response.json() as Promise<{
results: {
name: string;
}[];
}>;
},
component: () => {
const data = peopleRoute.useLoaderData();
return (
<ul>
{data.results.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
);
},
});
```
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
### React-Query
React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
First add your dependencies:
```bash
bun install @tanstack/react-query @tanstack/react-query-devtools
```
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// ...
const queryClient = new QueryClient();
// ...
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
);
}
```
You can also add TanStack Query Devtools to the root route (optional).
```tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const rootRoute = createRootRoute({
component: () => (
<>
<Outlet />
<ReactQueryDevtools buttonPosition="top-right" />
<TanStackRouterDevtools />
</>
),
});
```
Now you can use `useQuery` to fetch your data.
```tsx
import { useQuery } from "@tanstack/react-query";
import "./App.css";
function App() {
const { data } = useQuery({
queryKey: ["people"],
queryFn: () =>
fetch("https://swapi.dev/api/people")
.then((res) => res.json())
.then((data) => data.results as { name: string }[]),
initialData: [],
});
return (
<div>
<ul>
{data.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
</div>
);
}
export default App;
```
You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
## State Management
Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
First you need to add TanStack Store as a dependency:
```bash
bun install @tanstack/store
```
Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
```tsx
import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
import "./App.css";
const countStore = new Store(0);
function App() {
const count = useStore(countStore);
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
</div>
);
}
export default App;
```
One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
Let's check this out by doubling the count using derived state.
```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";
const countStore = new Store(0);
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
});
doubledStore.mount();
function App() {
const count = useStore(countStore);
const doubledCount = useStore(doubledStore);
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
<div>Doubled - {doubledCount}</div>
</div>
);
}
export default App;
```
We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
# Demo files
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

2
src/components/planes/CreatePlanDialog.tsx
View File

@@ -1,6 +1,6 @@
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, useMemo, useCallback } from "react" import { useState, useEffect, useCallback } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"

1
src/routes/_authenticated/plan/$planId.tsx
View File

@@ -17,7 +17,6 @@ import { Label } from "@/components/ui/label"
import confetti from "canvas-confetti" import confetti from "canvas-confetti"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"
import { AuroraButton } from "@/components/effect/aurora-button" import { AuroraButton } from "@/components/effect/aurora-button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DeletePlanButton } from "@/components/planes/DeletePlan" import { DeletePlanButton } from "@/components/planes/DeletePlan"
import { AddAsignaturaButton } from "@/components/planes/AddAsignaturaButton" import { AddAsignaturaButton } from "@/components/planes/AddAsignaturaButton"