diff --git a/README.md b/README.md index e06483d..7e25a95 100644 --- a/README.md +++ b/README.md @@ -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 + +#### � **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 + +### � **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 +# Clonar repositorio +git clone +cd tanstack-router + +# Instalar dependencias 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 -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: +## � **Casos de Uso Principales** -```bash -bunx --bun run test -``` +### **Para Administradores Académicos** +- 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 +--- +## � **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 -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`. +### **Seguridad Implementada** +- 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 -import { Link } from "@tanstack/react-router"; -``` +## 🤝 **Contribución y Desarrollo** -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 -About -``` +### **Estándares de Código** +- 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 `` component. +--- -Here is an example layout that includes a header: +## 🎯 **Roadmap y Futuro** -```tsx -import { Outlet, createRootRoute } from '@tanstack/react-router' -import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' +- [ ] **Mobile App**: Aplicación nativa con React Native +- [ ] **Reportes Avanzados**: PDFs automáticos de planes de estudio +- [ ] **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({ - component: () => ( - <> -
- -
- - - - ), -}) -``` +**🏆 Una plataforma que transforma la gestión académica universitaria mediante tecnología moderna e inteligencia artificial.** -The `` component is not required so you can remove it if you don't want it in your layout. - -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 ( -
    - {data.results.map((person) => ( -
  • {person.name}
    • - ))} -
- ); - }, -}); -``` - -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( - - - - ); -} -``` - -You can also add TanStack Query Devtools to the root route (optional). - -```tsx -import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; - -const rootRoute = createRootRoute({ - component: () => ( - <> - - - - - ), -}); -``` - -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 ( -
-
    - {data.map((person) => ( -
  • {person.name}
    • - ))} -
-
- ); -} - -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 ( -
- -
- ); -} - -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 ( -
- -
Doubled - {doubledCount}
-
- ); -} - -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). +*Desarrollado con pasión por la educación superior y la innovación tecnológica.* diff --git a/src/components/planes/CreatePlanDialog.tsx b/src/components/planes/CreatePlanDialog.tsx index 09d5c22..71e6f23 100644 --- a/src/components/planes/CreatePlanDialog.tsx +++ b/src/components/planes/CreatePlanDialog.tsx @@ -1,6 +1,6 @@ import { useRouter } from "@tanstack/react-router" 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 { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" diff --git a/src/routes/_authenticated/plan/$planId.tsx b/src/routes/_authenticated/plan/$planId.tsx index af8ed4b..414df62 100644 --- a/src/routes/_authenticated/plan/$planId.tsx +++ b/src/routes/_authenticated/plan/$planId.tsx @@ -17,7 +17,6 @@ import { Label } from "@/components/ui/label" import confetti from "canvas-confetti" import { Textarea } from "@/components/ui/textarea" import { AuroraButton } from "@/components/effect/aurora-button" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DeletePlanButton } from "@/components/planes/DeletePlan" import { AddAsignaturaButton } from "@/components/planes/AddAsignaturaButton"