Global

Methods

Celda(txt, coloropt, tipoopt, rolopt, onClick)

Componente Celda que se utiliza para mostrar un texto con estilos personalizados.

Parameters:

Name	Type	Attributes	Default	Description
`txt`	string			El texto que se mostrará dentro de la celda (por defecto es "Valor").
`color`	string	<optional>		El color de la celda (puede ser un valor como "rojo", "verde", etc.).
`tipo`	string	<optional>	'titulo'	El tipo de celda, puede ser usado para diferenciar entre diferentes estilos (por defecto es "titulo").
`rol`	string	<optional>	'ver'	El rol de la celda, determina si tiene un comportamiento de visualización o de interacción (por defecto es "ver").
`onClick`	function			Función que se ejecuta cuando la celda es clickeada.

Source: Celda/Celda.jsx, line 17

ContenedorMaterias(url, info, estopt, nombre, idEst, idProfe) → {JSX.Element}

Componente que muestra un contenedor de materias asignadas a un estudiante o profesor. Permite navegar a la página de notas de la materia seleccionada.

Parameters:

Name	Type	Attributes	Default	Description
`url`	string			La URL base para la navegación a las páginas de notas.
`info`	Array			Array de objetos que contienen la información de las materias a mostrar.
`est`	boolean	<optional>	true	Si es `true`, muestra las materias del estudiante; si es `false`, muestra las materias del profesor.
`nombre`	string			El nombre del estudiante o profesor.
`idEst`	string			El ID del estudiante.
`idProfe`	string			El ID del profesor.

Source: ContenedorMaterias/ContenedorMaterias.jsx, line 23

Returns:

Un contenedor con las materias asignadas, o un mensaje si no hay materias.

Type:: JSX.Element

ContenedorPildoraMateriaGrado(info, docenteopt, eliminar, txt, clase) → {JSX.Element}

Componente que muestra un contenedor de "píldoras" para las materias o grados, con la capacidad de eliminar o navegar a la página correspondiente. Utiliza el componente Masonry para el diseño responsivo.

Parameters:

Name	Type	Attributes	Default	Description
`info`	Array			Array de objetos que contienen la información.
`docente`	boolean	<optional>	false	Si es `true`, muestra la información de los profesores; si es `false`, muestra la información de las materias.
`eliminar`	function			Función que se ejecuta al eliminar una materia o grado.
`txt`	string			Texto que describe si se trata de una materia o grado (usado en el mensaje de confirmación de eliminación).
`clase`	string			Clase CSS que se aplica al componente, dependiendo de si es para grados o materias.

Source: ContenedorPildoraMateriaGrado/ContenedorPildoraMateriaGrado.jsx, line 25

Returns:

Un contenedor con las "píldoras" de materias o grados, o un mensaje si no hay datos.

Type:: JSX.Element

CursosAsignadosDocente(idProfe, idInstitucion, url) → {JSX.Element}

Componente que muestra un listado de los cursos asignados a un docente, permitiendo filtrar por materia y grado. Los cursos se obtienen de una API.

Parameters:

Name	Type	Description
`idProfe`	string	El ID del profesor para obtener sus asignaciones de cursos.
`idInstitucion`	string	El ID de la institución para filtrar los cursos.
`url`	string	La URL base para navegar a otras páginas relacionadas con los cursos.

Source: CursosAsignadosDocente/CursosAsignadosDocente.jsx, line 20

Returns:

Un contenedor con los cursos asignados al docente, con filtros de materia y grado.

Type:: JSX.Element

CursosAsignadosEstudiante(url, idCurso, idInstitucion, nombreEst, idEst) → {JSX.Element}

Componente que muestra las materias asignadas a un estudiante en un curso determinado. Obtiene los datos desde la API y los muestra en un contenedor organizado.

Parameters:

Name	Type	Description
`url`	string	La URL base para navegar a otras páginas relacionadas con las materias.
`idCurso`	string	El ID del curso del estudiante para obtener las materias asignadas.
`idInstitucion`	string	El ID de la institución para filtrar las materias por institución.
`nombreEst`	string	El nombre del estudiante, que se mostrará en la interfaz.
`idEst`	string	El ID del estudiante para la navegación y otras funcionalidades.

Source: CursosAsignadosEstudiante/CursosAsignadosEstudiante.jsx, line 22

Returns:

Un contenedor con las materias asignadas al estudiante, mostradas en el componente ContenedorMaterias.

Type:: JSX.Element

CustomSelect(opciones, valorSeleccionado, setValorSeleccionado, tituloopt, placeholderopt) → {JSX.Element}

Componente CustomSelect que crea un selector de opciones con capacidad de filtrado y enfoque.

Parameters:

Name	Type	Attributes	Default	Description
`opciones`	Array			Array de opciones que se mostrarán en el selector.
`valorSeleccionado`	string			El valor actualmente seleccionado en el selector.
`setValorSeleccionado`	function			Función para actualizar el valor seleccionado.
`titulo`	string	<optional>	'Titulo'	Título que se mostrará sobre el selector.
`placeholder`	string	<optional>		Texto que aparece como placeholder.

Source: CustomSelect/CustomSelect.jsx, line 19

Returns:

Un campo de selección con las opciones filtradas y seleccionables.

Type:: JSX.Element

FooterCom(imagenopt) → {JSX.Element}

Componente FooterCom que muestra el pie de página de la aplicación, con información de la institución, redes sociales y logo.

Parameters:

Name	Type	Attributes	Description
`imagen`	string	<optional>	URL de una imagen de logo personalizada. Si no se proporciona, se usa el logo de la institución.

Source: FooterCom/FooterCom.jsx, line 16

Returns:

El pie de página con la información de la institución y los iconos de redes sociales.

Type:: JSX.Element

InputContainer(classNameopt, placeholderopt, tituloopt, inputTypeopt, valueopt, requiredopt, isDisabledopt, nomInputopt, onChangeopt) → {JSX.Element}

Componente InputContainer que renderiza un campo de entrada personalizado con soporte para mostrar/ocultar contraseñas.

Parameters:

Name	Type	Attributes	Default	Description
`className`	string	<optional>		Clase adicional para aplicar estilos personalizados al contenedor.
`placeholder`	string	<optional>	'correo@gmail.com'	Texto que aparece como marcador de posición en el campo de entrada.
`titulo`	string	<optional>	'correo electronico:'	Título que se muestra junto al campo de entrada.
`inputType`	string	<optional>	'email'	Tipo del input (por defecto es 'email', puede ser 'password', 'file', etc.).
`value`	string	<optional>	''	Valor inicial del campo de entrada.
`required`	boolean	<optional>	false	Si es `true`, el campo será obligatorio.
`isDisabled`	boolean	<optional>	false	Si es `true`, el campo estará deshabilitado.
`nomInput`	string	<optional>		Nombre del input, utilizado en el atributo `name`.
`onChange`	function	<optional>		Función que se llama cuando el valor del input cambia.

Source: Input/InputContainer.jsx, line 25

Returns:

Un contenedor con un campo de entrada, con soporte para mostrar/ocultar contraseñas.

Type:: JSX.Element

Line() → {JSX.Element}

Componente Line que renderiza una línea horizontal con estilo personalizado basado en el tema actual. Utilizado para separar visualmente secciones en la interfaz de usuario.

Source: Line/Line.jsx, line 14

Returns:

Una línea horizontal que se adapta al tema de la aplicación.

Type:: JSX.Element

LogoPrae(textoopt, coloropt, imagenopt) → {JSX.Element}

Componente LogoPrae que muestra el logo de la aplicación junto con un texto personalizado. Permite personalizar el color del texto y la imagen del logo.

Parameters:

Name	Type	Attributes	Default	Description
`texto`	string	<optional>	'ESTUDIANTES'	El texto que se muestra junto al logo (por ejemplo, "ESTUDIANTES").
`color`	string	<optional>		El color del texto, que se aplica a la clase del elemento.
`imagen`	string	<optional>		URL de la imagen del logo. Si no se proporciona, se usa un logo por defecto.

Source: LogoPrae/LogoPrae.jsx, line 18

Returns:

Un contenedor con el logo y el texto correspondiente.

Type:: JSX.Element

Componente Modal que muestra un modal interactivo para eliminar o editar datos, como observaciones, actividades o notas. El modal cambia de diseño dependiendo del tipo de acción (eliminar, editar).

Parameters:

Name	Type	Attributes	Default	Description
`isOpen`	boolean			Indica si el modal está abierto o cerrado.
`recargar`	function			Función para recargar los datos después de realizar una acción.
`closeModal`	function			Función para cerrar el modal.
`tipo`	string			Tipo de acción a realizar (puede ser 'eliminar', 'actividad', 'observacion').
`modalTitulo`	string	<optional>	'Eliminar'	Título del modal, por defecto 'Eliminar'.
`modalTexto`	string	<optional>	'Estas seguro de eliminar...'	Texto del modal que describe la acción que se va a realizar.
`valorAct`	string	<optional>	''	Valor de la actividad, usado para editar o eliminar actividades.
`ValorPeso`	string	<optional>	''	Valor del peso de la actividad, usado para editar actividades.
`valorNota`	string	<optional>	''	Valor de la nota, usado para registrar o editar la nota de un estudiante.
`valorObs`	string	<optional>	''	Valor de la observación, usado para editar o eliminar observaciones.
`extraData`	Object	<optional>	{}	Datos adicionales para el procesamiento del modal (como ID de la observación o actividad).
`children`	ReactNode			Elementos hijos que se pasan al modal para su personalización.

Source: Modal/Modal.jsx, line 30

Returns:

Un modal con diferentes funcionalidades dependiendo del tipo de acción.

Type:: JSX.Element

Componente NavBar que renderiza una barra de navegación personalizada con opciones dinámicas basadas en el rol del usuario. El menú de navegación cambia dependiendo de si el usuario es estudiante, docente o administrador.

Parameters:

Name	Type	Attributes	Default	Description
`rol`	string	<optional>	'normal'	El rol del usuario (normal, estudiante, docente, admin), lo que determina qué menú se muestra.
`nombreUsuario`	string	<optional>	'NOMBRE APELLIDO'	El nombre del usuario que se muestra en el menú.
`func`	function			Función que se ejecuta al hacer clic en la opción de "Salir".
`imagen`	string	<optional>		Imagen personalizada para el logo, si no se proporciona se usa el logo predeterminado.
`inst`	string	<optional>		Estilo adicional que puede aplicarse al contenedor del NavBar.

Source: NavBar/NavBar.jsx, line 39

Returns:

El componente NavBar con enlaces dinámicos, íconos y funcionalidades según el rol del usuario.

Type:: JSX.Element

NavBarItem(iconoopt, textoopt, rutaopt, tipoopt, coloropt, activoopt, funcopt, onClickopt) → {JSX.Element}

Componente NavBarItem que representa un ítem en la barra de navegación, con un ícono y texto. Permite la navegación dinámica según el rol del usuario y la ruta proporcionada.

Parameters:

Name	Type	Attributes	Default	Description
`icono`	React.Component	<optional>	HomeIcon	El ícono que se mostrará en el ítem de navegación. Por defecto, es el ícono de inicio (`HomeIcon`).
`texto`	string	<optional>	'Principal'	El texto que se mostrará en el ítem de navegación.
`ruta`	string	<optional>	'/'	La ruta a la que navegará el usuario al hacer clic en el ítem.
`tipo`	boolean	<optional>		Determina si el ítem tiene un estilo especial.
`color`	string	<optional>		Clase adicional para el color del ítem de navegación.
`activo`	boolean	<optional>	false	Si el ítem está activo (resaltado), lo marcará como tal.
`func`	function	<optional>		Función que se ejecuta al hacer clic en el ítem de navegación (si se proporciona).
`onClick`	function	<optional>		Función adicional que se ejecuta al hacer clic en el ítem (por defecto es una función vacía).

Source: NavBar/NavBarItem.jsx, line 27

Returns:

Un ítem de navegación con ícono, texto y comportamiento dinámico.

Type:: JSX.Element

NavBarPreview(rolopt, nombreUsuarioopt, imagenopt) → {JSX.Element}

Componente NavBarPreview que renderiza una barra de navegación para la vista previa en personalizar institución. Muestra el logo y las opciones de navegación para los roles definidos.

Parameters:

Name	Type	Attributes	Default	Description
`rol`	string	<optional>	'normal'	El rol del usuario (normal, estudiante, docente, admin), lo que determina qué menú se muestra.
`nombreUsuario`	string	<optional>	'JUAN CAMILO HENAO GALLEGO'	El nombre del usuario que se muestra en el menú.
`imagen`	string	<optional>		Imagen personalizada para el logo, si no se proporciona se usa el logo predeterminado.

Source: NavBar/NavBarPreview.jsx, line 23

Returns:

El componente NavBarPreview con la personalización actual.

Type:: JSX.Element

Pildora(tituloopt, txtsuperioropt, txtinferioropt, coloropt, onClickopt) → {JSX.Element}

Componente Pildora que muestra una tarjeta interactiva con información sobre una materia o elemento.

Parameters:

Name	Type	Attributes	Default	Description
`titulo`	string	<optional>	'CALCULO 1'	El título de la materia o elemento.
`txtsuperior`	string	<optional>	'Juan Manuel'	El texto que se muestra en la parte superior de la pildora.
`txtinferior`	string	<optional>		El texto que se muestra en la parte inferior de la pildora.
`color`	string	<optional>		Color de la pildora, se puede usar para personalizar el estilo.
`onClick`	function	<optional>		Función que se ejecuta cuando se hace clic en la pildora.

Source: Pildora/Pildora.jsx, line 19

Returns:

Una pildora con el texto superior, título y texto inferior, y con un evento de clic.

Type:: JSX.Element

PildoraEst(coloropt, estopt, cursoopt, claseopt, onClickopt, estadisticaopt, childrenopt) → {JSX.Element}

Componente PildoraEst que muestra una "píldora" con información sobre un estudiante y su curso. Se puede personalizar con un color, un nombre de estudiante y un curso.

Parameters:

Name	Type	Attributes	Default	Description
`color`	string	<optional>	'azul'	El color de la píldora, utilizado para personalizar el estilo.
`est`	string	<optional>	'NOMBRE APELLIDO'	El nombre del estudiante que se mostrará en la píldora.
`curso`	string	<optional>	'11-2'	El curso del estudiante.
`clase`	string	<optional>	'grande'	Clase CSS que puede modificar el tamaño de la píldora.
`onClick`	function	<optional>		Función que se ejecuta cuando se hace clic en la píldora.
`estadistica`	boolean	<optional>	false	Si es `true`, se mostrará el contenido de `children` en lugar del curso.
`children`	ReactNode	<optional>		Elementos adicionales que se mostrarán si `estadistica` es `true`.

Source: PildoraEst/PildoraEst.jsx, line 22

Returns:

Una "píldora" con la información del estudiante y el curso, que puede ser personalizada.

Type:: JSX.Element

PildoraMateriaGrado(coloropt, textoopt, onClickopt, claseopt) → {JSX.Element}

Componente PildoraMateriaGrado que muestra una "píldora" con información sobre una materia o grado asignado. Se puede personalizar con un color y un texto.

Parameters:

Name	Type	Attributes	Default	Description
`color`	string	<optional>	'azul'	El color de la píldora, utilizado para personalizar el estilo.
`texto`	string	<optional>	'CALCULO I'	El texto que representa la materia (por ejemplo, "Cálculo I").
`onClick`	function	<optional>		Función que se ejecuta cuando se hace clic en la píldora.
`clase`	string	<optional>		Clase CSS adicional que puede modificar el estilo del componente.

Source: PildoraMateriaGrado/PildoraMateriaGrado.jsx, line 19

Returns:

Una "píldora" con el texto de la materia, que puede ser personalizada.

Type:: JSX.Element

PildoraPeriodos(titulo, valores, onChange, color, editable, minInicioopt) → {JSX.Element}

Componente PildoraPeriodos que muestra un formulario para gestionar un periodo académico, incluyendo el peso, la fecha de inicio y la fecha de fin. Realiza validaciones en los campos y permite la edición condicional de las fechas.

Parameters:

Name	Type	Attributes	Description
`titulo`	string		El título del periodo (e.g., "PERIODO 1", "PERIODO 2").
`valores`	Object		Objeto que contiene los valores del periodo: {string} peso - El peso del periodo (valor inicial, generalmente vacío). {string} fecha_inicio - La fecha de inicio del periodo en formato `YYYY-MM-DD`. {string} fecha_fin - La fecha de fin del periodo en formato `YYYY-MM-DD`.
`onChange`	function		Función que se ejecuta cuando se modifica el valor de algún campo. Recibe un objeto con: {string} periodoKey - El nombre del campo modificado (por ejemplo: 'peso', 'fecha_inicio', 'fecha_fin'). {string\|number} value - El nuevo valor del campo.
`color`	string		El color que se usa para personalizar el estilo del componente (por ejemplo, 'azul', 'morado').
`editable`	boolean		Determina si los campos de fecha son editables o no.
`minInicio`	string	<optional>	La fecha mínima que se puede seleccionar en los campos de fecha, debe estar en formato `YYYY-MM-DD`.

Source: PildoraPeriodos/PildoraPeriodos.jsx, line 32

Returns:

Un formulario que permite gestionar un periodo académico, con campos de entrada para el peso y las fechas de inicio y fin, con validaciones y edición condicional de las fechas.

Type:: JSX.Element

PildoraTitulo(coloropt, nombreopt, materiaopt, notaopt, gradoopt) → {JSX.Element}

Componente PildoraTitulo que muestra una "píldora" con información sobre un estudiante, la materia, el grado y la nota. Se puede personalizar con un color, un nombre de estudiante, una materia, un grado y una nota.

Parameters:

Name	Type	Attributes	Default	Description
`color`	string	<optional>	'azul'	El color de la píldora, utilizado para personalizar el estilo.
`nombre`	string	<optional>	'NOMBRE DOCENTE'	El nombre del estudiante que se mostrará en la píldora.
`materia`	string	<optional>	'CALCULO II'	La materia que se mostrará en la píldora.
`nota`	string	<optional>	'4.5'	La nota del estudiante en la materia.
`grado`	string	<optional>		El grado del estudiante (por ejemplo, "11-2").

Source: PildoraTitulo/PildoraTitulo.jsx, line 25

Returns:

Una "píldora" con la información del estudiante, la materia, la nota y el grado.

Type:: JSX.Element

Selector(titulo, multiopt, disabledopt, opciones, valores, onChange, placeholderopt, mensajeVacioopt) → {JSX.Element}

Componente Selector que renderiza un campo de selección múltiple o único con opciones personalizadas. Utiliza react-select para manejar las opciones de selección.

Parameters:

Name	Type	Attributes	Default	Description
`titulo`	string			El título que se muestra sobre el selector.
`multi`	boolean	<optional>	true	Si es `true`, permite la selección múltiple de opciones.
`disabled`	boolean	<optional>	false	Si es `true`, deshabilita el selector.
`opciones`	Array			Las opciones que se mostrarán en el selector.
`valores`	Array			Los valores seleccionados actualmente.
`onChange`	function			Función que se ejecuta cuando se cambia la selección.
`placeholder`	string	<optional>		Texto que aparece cuando no hay opciones seleccionadas.
`mensajeVacio`	string	<optional>	'No hay opciones disponibles'	Mensaje que se muestra cuando no hay opciones disponibles.

Source: Selector/Selector.jsx, line 24

Returns:

Un campo de selección con las opciones proporcionadas y con soporte para selección múltiple o única.

Type:: JSX.Element

TableDocentes(infoCurso, infoDocente) → {JSX.Element}

Componente TableDocentes que renderiza una tabla interactiva con la información de los estudiantes, actividades y notas de un curso asignado a un docente. Muestra las actividades de los estudiantes, permite agregar nuevas actividades y editar las notas de los estudiantes.

Parameters:

Name	Type	Description
`infoCurso`	Object	Información sobre el curso, incluyendo el ID de la materia, curso y nombre.
`infoDocente`	string	El ID del docente para obtener sus actividades y notas.

Source: TableDocentes/TableDocentes.jsx, line 25

Returns:

Una tabla con las actividades, estudiantes y sus notas, con opciones para editar y agregar actividades.

Type:: JSX.Element

TableEst(infoMateria, idEst) → {JSX.Element}

Componente TableEst que muestra una tabla con la información de las actividades y notas de un estudiante en una materia específica. Permite expandir cada período para ver las actividades, sus notas y los pesos correspondientes.

Parameters:

Name	Type	Description
`infoMateria`	Object	Información sobre la materia, incluyendo el ID, nombre, color, y el profesor.
`idEst`	string	El ID del estudiante para obtener sus actividades y notas.

Source: TableEst/TableEst.jsx, line 22

Returns:

Una tabla con las actividades, las notas y los pesos correspondientes a cada actividad del estudiante en la materia.

Type:: JSX.Element

TituloDes(tituloopt, descopt) → {JSX.Element}

Componente TituloDes que muestra un título y una descripción en un contenedor. Utilizado para proporcionar títulos y descripciones en la interfaz de usuario.

Parameters:

Name	Type	Attributes	Default	Description
`titulo`	string	<optional>	'Titulo'	El título que se muestra en el componente.
`desc`	string	<optional>	'Descripcion del titulo'	La descripción que se muestra debajo del título.

Source: TituloDes/TituloDes.jsx, line 16

Returns:

Un contenedor con un título y una descripción.

Type:: JSX.Element

custom - Muestra una alerta personalizada con opciones adicionales.(message, grandeopt, message, grandeopt, message, message, options) → {void}

Objeto que maneja las notificaciones personalizadas para la aplicación. Proporciona métodos para mostrar alertas de tipo éxito, error, información y alertas personalizadas.

Parameters:

Name	Type	Attributes	Default	Description
`message`	string			El mensaje de la alerta.
`grande`	boolean	<optional>	false	Si es `true`, muestra la alerta más grande.
`message`	string			El mensaje de la alerta.
`grande`	boolean	<optional>	false	Si es `true`, muestra la alerta más grande.
`message`	string			El mensaje de la alerta.
`message`	string			El mensaje de la alerta.
`options`	Object			Opciones adicionales para personalizar la alerta.

Source: Alerta/Alerta.jsx, line 4

Returns:

Type:: void

Methods

Celda(txt, coloropt, tipoopt, rolopt, onClick)

ContenedorMaterias(url, info, estopt, nombre, idEst, idProfe) → {JSX.Element}

ContenedorPildoraMateriaGrado(info, docenteopt, eliminar, txt, clase) → {JSX.Element}

CursosAsignadosDocente(idProfe, idInstitucion, url) → {JSX.Element}

CursosAsignadosEstudiante(url, idCurso, idInstitucion, nombreEst, idEst) → {JSX.Element}

CustomSelect(opciones, valorSeleccionado, setValorSeleccionado, tituloopt, placeholderopt) → {JSX.Element}

FooterCom(imagenopt) → {JSX.Element}

InputContainer(classNameopt, placeholderopt, tituloopt, inputTypeopt, valueopt, requiredopt, isDisabledopt, nomInputopt, onChangeopt) → {JSX.Element}

Line() → {JSX.Element}

LogoPrae(textoopt, coloropt, imagenopt) → {JSX.Element}

Modal(isOpen, recargar, closeModal, tipo, modalTituloopt, modalTextoopt, valorActopt, ValorPesoopt, valorNotaopt, valorObsopt, extraDataopt, children) → {JSX.Element}

NavBar(rolopt, nombreUsuarioopt, func, imagenopt, instopt) → {JSX.Element}

NavBarItem(iconoopt, textoopt, rutaopt, tipoopt, coloropt, activoopt, funcopt, onClickopt) → {JSX.Element}

NavBarPreview(rolopt, nombreUsuarioopt, imagenopt) → {JSX.Element}

Pildora(tituloopt, txtsuperioropt, txtinferioropt, coloropt, onClickopt) → {JSX.Element}

PildoraEst(coloropt, estopt, cursoopt, claseopt, onClickopt, estadisticaopt, childrenopt) → {JSX.Element}

PildoraMateriaGrado(coloropt, textoopt, onClickopt, claseopt) → {JSX.Element}

PildoraPeriodos(titulo, valores, onChange, color, editable, minInicioopt) → {JSX.Element}

PildoraTitulo(coloropt, nombreopt, materiaopt, notaopt, gradoopt) → {JSX.Element}

Selector(titulo, multiopt, disabledopt, opciones, valores, onChange, placeholderopt, mensajeVacioopt) → {JSX.Element}

TableDocentes(infoCurso, infoDocente) → {JSX.Element}

TableEst(infoMateria, idEst) → {JSX.Element}

TituloDes(tituloopt, descopt) → {JSX.Element}

custom - Muestra una alerta personalizada con opciones adicionales.(message, grandeopt, message, grandeopt, message, message, options) → {void}